Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Background block supports: move block support defaults to gutenberg_render_background_support and revert gutenberg_get_background_support_styles #59889

Merged
merged 13 commits into from
Mar 21, 2024
Merged

Background block supports: move block support defaults to gutenberg_render_background_support and revert gutenberg_get_background_support_styles #59889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
efb7bf1
Initial commit: defaul background size to "auto" not "cover"
ramonjd Mar 15, 2024
f602c7c
Testing allowing blocks to set their own background size via block.json
ramonjd Mar 18, 2024
09ac286
Reset repeat for cover
ramonjd Mar 18, 2024
418c4a7
Updating tests
ramonjd Mar 19, 2024
475a3e4
Linty
ramonjd Mar 19, 2024
0d1cd6a
Documentation
ramonjd Mar 19, 2024
d2161ee
Reverting the block.json default backgroundSize and associated tests
ramonjd Mar 19, 2024
86615bf
Update comment to explain the fallback to defaultValue for background…
ramonjd Mar 19, 2024
b2c2057
Revert JS changes, moving them to a new PR https://github.com/WordPre…
ramonjd Mar 19, 2024
10c8341
background-size auto is the same as no background-size
ramonjd Mar 20, 2024
748d267
Reverting `gutenberg_get_background_support_styles` so that the top-l…
ramonjd Mar 20, 2024
4046321
Using style engine in theme json class to generate background styles …
ramonjd Mar 20, 2024
e17df6e
Apply suggestions from code review - update comment and remove test f…
ramonjd Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 15 additions & 23 deletions lib/block-supports/background.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,28 +30,6 @@ function gutenberg_register_background_support( $block_type ) {
}
}

/**
* Given a theme.json or block background styles, returns the background styles for a block.
*
* @since 6.6.0
*
* @param array $background_styles Background style properties.
* @return array Style engine array of CSS string and style declarations.
*/
function gutenberg_get_background_support_styles( $background_styles = array() ) {
$background_image_source = isset( $background_styles['backgroundImage']['source'] ) ? $background_styles['backgroundImage']['source'] : null;
$background_styles['backgroundSize'] = ! empty( $background_styles['backgroundSize'] ) ? $background_styles['backgroundSize'] : 'cover';

if ( 'file' === $background_image_source && ! empty( $background_styles['backgroundImage']['url'] ) ) {
// If the background size is set to `contain` and no position is set, set the position to `center`.
if ( 'contain' === $background_styles['backgroundSize'] && ! isset( $background_styles['backgroundPosition'] ) ) {
$background_styles['backgroundPosition'] = 'center';
}
}

return gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );
}

/**
* Renders the background styles to the block wrapper.
* This block support uses the `render_block` hook to ensure that
Expand All @@ -74,7 +52,21 @@ function gutenberg_render_background_support( $block_content, $block ) {
return $block_content;
}

$styles = gutenberg_get_background_support_styles( $block_attributes['style']['background'] );
$background_styles = array();
$background_styles['backgroundSize'] = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover';
$background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array();

if ( isset( $background_styles['backgroundImage']['source'] ) && 'file' === $background_styles['backgroundImage']['source'] && isset( $background_styles['backgroundImage']['url'] ) ) {
$background_styles['backgroundPosition'] = isset( $block_attributes['style']['background']['backgroundPosition'] ) ? $block_attributes['style']['background']['backgroundPosition'] : null;
$background_styles['backgroundRepeat'] = isset( $block_attributes['style']['background']['backgroundRepeat'] ) ? $block_attributes['style']['background']['backgroundRepeat'] : null;

// If the background size is set to `contain` and no position is set, set the position to `center`.
if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {
$background_styles['backgroundPosition'] = 'center';
}
}

$styles = gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );

if ( ! empty( $styles['css'] ) ) {
// Inject background styles to the first element, presuming it's the wrapper, if it exists.
Expand Down
3 changes: 2 additions & 1 deletion lib/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2084,6 +2084,7 @@ protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
* @since 5.9.0 Added the `$settings` and `$properties` parameters.
* @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
* @since 6.5.0 Passing current theme JSON settings to wp_get_typography_font_size_value().
* @since 6.6.0 Using style engine to correctly fetch background CSS values.
*
* @param array $styles Styles to process.
* @param array $settings Theme settings.
Expand Down Expand Up @@ -2135,7 +2136,7 @@ protected static function compute_style_properties( $styles, $settings = array()

// Processes background styles.
if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
$background_styles = gutenberg_get_background_support_styles( $styles['background'] );
$background_styles = gutenberg_style_engine_get_styles( array( 'background' => $styles['background'] ) );
$value = $background_styles['declarations'][ $css_property ] ?? $value;
}

Expand Down
67 changes: 0 additions & 67 deletions phpunit/block-supports/background-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,71 +213,4 @@ public function data_background_block_support() {
),
);
}

/**
* Tests generating background styles.
*
* @covers ::gutenberg_get_background_support_styles
*
* @dataProvider data_get_background_support_styles
*
* @param mixed $background_style The background styles within the block attributes.
* @param string $expected_css Expected markup for the block wrapper.
*/
public function test_get_background_support_styles( $background_style, $expected_css ) {
$actual = gutenberg_get_background_support_styles( $background_style )['css'];

$this->assertEquals(
$expected_css,
$actual,
'Background CSS should be correct.'
);
}
public function data_get_background_support_styles() {
return array(
'css generated with file source' => array(
'background_style' => array(
'backgroundImage' => array(
'url' => 'https://example.com/image.jpg',
'source' => 'file',
),
),
'expected_css' => "background-image:url('https://example.com/image.jpg');background-size:cover;",
),
'css generated where backgroundImage is a string' => array(
'background_style' => array(
'backgroundImage' => "url('https://example.com/image.jpg')",
),
'expected_css' => "background-image:url('https://example.com/image.jpg');background-size:cover;",
),
'css generated with escaped URL' => array(
'background_style' => array(
'backgroundImage' => array(
'url' => 'https://example.com/image.jpg?q=pom-poms+%3Cscript%3Eevil_script()%3C/script%3E',
),
'backgroundSize' => 'cover',
),
'expected_css' => 'background-size:cover;',
),
'css generated with expected properties' => array(
'background_style' => array(
'backgroundImage' => "url('https://example.com/image.jpg')",
'backgroundSize' => '6px, auto, contain',
'backgroundPosition' => 'bottom 10px right 20px',
'backgroundRepeat' => 'repeat space',
),
'expected_css' => "background-image:url('https://example.com/image.jpg');background-position:bottom 10px right 20px;background-repeat:repeat space;background-size:6px, auto, contain;",
),
'css generated for file source with contain size should add center position' => array(
'background_style' => array(
'backgroundImage' => array(
'url' => 'https://example.com/image.jpg',
'source' => 'file',
),
'backgroundSize' => 'contain',
),
'expected_css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-size:contain;",
),
);
}
}
19 changes: 18 additions & 1 deletion phpunit/class-wp-theme-json-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4836,7 +4836,24 @@ public function test_get_top_level_background_image_styles() {
);

$expected_styles = "body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
$this->assertSame( $expected_styles, $theme_json->get_stylesheet() );
$this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background styles type does not match expectations' );

$theme_json = new WP_Theme_JSON_Gutenberg(
array(
'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
'styles' => array(
'background' => array(
'backgroundImage' => "url('http://example.org/image.png')",
'backgroundSize' => 'contain',
'backgroundRepeat' => 'no-repeat',
'backgroundPosition' => 'center center',
),
),
)
);

$expected_styles = "body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
$this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background image as string type does not match expectations' );
}

public function test_get_custom_css_handles_global_custom_css() {
Expand Down
Loading