Skip to content

Commit

Permalink
Background block supports: move block support defaults to gutenberg_r…
Browse files Browse the repository at this point in the history 
…ender_background_support and revert gutenberg_get_background_support_styles (WordPress#59889)

* Move block support defaults to gutenberg_render_background_support and revert gutenberg_get_background_support_styles
* Revert JS changes, moving them to a new PR WordPress#60008
* background-size auto is the same as no background-size
* Using style engine in theme json class to generate background styles because background image can be a string or an object.



Co-authored-by: ramonjd <[email protected]>
Co-authored-by: andrewserong <[email protected]>
  • Loading branch information
@ramonjd @andrewserong @carstingaxion
3 people authored and carstingaxion committed Mar 27, 2024
1 parent 7864e2d commit 068d289
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 92 deletions.
38 changes: 15 additions & 23 deletions lib/block-supports/background.php
View file
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
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
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
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

0 comments on commit 068d289

Please sign in to comment.