Skip to content

Commit 15b5be2

Browse files
tellthemachinestellthemachines
committed
Editor: add size and repeat to background image support.
Adds background size and background repeat style processing to the background image block support and `WP_Style_Engine` definitions. Props andrewserong, mukesh27. Fixes #60175. git-svn-id: https://develop.svn.wordpress.org/trunk@57254 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 2d764b4 commit 15b5be2

6 files changed

Lines changed: 77 additions & 15 deletions

File tree

‎src/wp-includes/block-supports/background.php‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ function wp_register_background_support( $block_type ) {
4040
* it is also applied to non-server-rendered blocks.
4141
*
4242
* @since 6.4.0
43+
* @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output.
4344
* @access private
4445
*
4546
* @param string $block_content Rendered block content.
@@ -64,9 +65,20 @@ function wp_render_background_support( $block_content, $block ) {
6465
$background_image_url = isset( $block_attributes['style']['background']['backgroundImage']['url'] )
6566
? $block_attributes['style']['background']['backgroundImage']['url']
6667
: null;
68+
69+
if ( ! $background_image_source && ! $background_image_url ) {
70+
return $block_content;
71+
}
72+
6773
$background_size = isset( $block_attributes['style']['background']['backgroundSize'] )
6874
? $block_attributes['style']['background']['backgroundSize']
6975
: 'cover';
76+
$background_position = isset( $block_attributes['style']['background']['backgroundPosition'] )
77+
? $block_attributes['style']['background']['backgroundPosition']
78+
: null;
79+
$background_repeat = isset( $block_attributes['style']['background']['backgroundRepeat'] )
80+
? $block_attributes['style']['background']['backgroundRepeat']
81+
: null;
7082

7183
$background_block_styles = array();
7284

@@ -76,8 +88,15 @@ function wp_render_background_support( $block_content, $block ) {
7688
) {
7789
// Set file based background URL.
7890
$background_block_styles['backgroundImage']['url'] = $background_image_url;
79-
// Only output the background size when an image url is set.
80-
$background_block_styles['backgroundSize'] = $background_size;
91+
// Only output the background size and repeat when an image url is set.
92+
$background_block_styles['backgroundSize'] = $background_size;
93+
$background_block_styles['backgroundRepeat'] = $background_repeat;
94+
$background_block_styles['backgroundPosition'] = $background_position;
95+
96+
// If the background size is set to `contain` and no position is set, set the position to `center`.
97+
if ( 'contain' === $background_size && ! isset( $background_position ) ) {
98+
$background_block_styles['backgroundPosition'] = 'center';
99+
}
81100
}
82101

83102
$styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) );
@@ -99,6 +118,7 @@ function wp_render_background_support( $block_content, $block ) {
99118

100119
$updated_style .= $styles['css'];
101120
$tags->set_attribute( 'style', $updated_style );
121+
$tags->add_class( 'has-background' );
102122
}
103123

104124
return $tags->get_updated_html();

‎src/wp-includes/class-wp-theme-json.php‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -344,14 +344,16 @@ class WP_Theme_JSON {
344344
* @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`.
345345
* @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`,
346346
* `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`.
347-
* @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`.
347+
* @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize` and
348+
* `background.backgroundSize`.
348349
* @var array
349350
*/
350351
const VALID_SETTINGS = array(
351352
'appearanceTools' => null,
352353
'useRootPaddingAwareAlignments' => null,
353354
'background' => array(
354355
'backgroundImage' => null,
356+
'backgroundSize' => null,
355357
),
356358
'border' => array(
357359
'color' => null,
@@ -573,10 +575,12 @@ public static function get_element_class_name( $element ) {
573575
* @since 6.0.0
574576
* @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
575577
* @since 6.4.0 Added `background.backgroundImage`.
578+
* @since 6.5.0 Added `background.backgroundSize`.
576579
* @var array
577580
*/
578581
const APPEARANCE_TOOLS_OPT_INS = array(
579582
array( 'background', 'backgroundImage' ),
583+
array( 'background', 'backgroundSize' ),
580584
array( 'border', 'color' ),
581585
array( 'border', 'radius' ),
582586
array( 'border', 'style' ),

‎src/wp-includes/style-engine/class-wp-style-engine.php‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
* @since 6.1.0
2424
* @since 6.3.0 Added support for text-columns.
2525
* @since 6.4.0 Added support for background.backgroundImage.
26+
* @since 6.5.0 Added support for background.backgroundPosition and background.backgroundRepeat.
2627
*/
2728
#[AllowDynamicProperties]
2829
final class WP_Style_Engine {
@@ -48,14 +49,26 @@ final class WP_Style_Engine {
4849
*/
4950
const BLOCK_STYLE_DEFINITIONS_METADATA = array(
5051
'background' => array(
51-
'backgroundImage' => array(
52+
'backgroundImage' => array(
5253
'property_keys' => array(
5354
'default' => 'background-image',
5455
),
5556
'value_func' => array( self::class, 'get_url_or_value_css_declaration' ),
5657
'path' => array( 'background', 'backgroundImage' ),
5758
),
58-
'backgroundSize' => array(
59+
'backgroundPosition' => array(
60+
'property_keys' => array(
61+
'default' => 'background-position',
62+
),
63+
'path' => array( 'background', 'backgroundPosition' ),
64+
),
65+
'backgroundRepeat' => array(
66+
'property_keys' => array(
67+
'default' => 'background-repeat',
68+
),
69+
'path' => array( 'background', 'backgroundRepeat' ),
70+
),
71+
'backgroundSize' => array(
5972
'property_keys' => array(
6073
'default' => 'background-size',
6174
),

‎tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ public function filter_set_theme_root() {
6767
* Tests that background image block support works as expected.
6868
*
6969
* @ticket 59357
70+
* @ticket 60175
7071
*
7172
* @covers ::wp_render_background_support
7273
*
@@ -135,7 +136,24 @@ public function data_background_block_support() {
135136
'source' => 'file',
136137
),
137138
),
138-
'expected_wrapper' => '<div style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
139+
'expected_wrapper' => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
140+
'wrapper' => '<div>Content</div>',
141+
),
142+
'background image style with contain, position, and repeat is applied' => array(
143+
'theme_name' => 'block-theme-child-with-fluid-typography',
144+
'block_name' => 'test/background-rules-are-output',
145+
'background_settings' => array(
146+
'backgroundImage' => true,
147+
),
148+
'background_style' => array(
149+
'backgroundImage' => array(
150+
'url' => 'https://example.com/image.jpg',
151+
'source' => 'file',
152+
),
153+
'backgroundRepeat' => 'no-repeat',
154+
'backgroundSize' => 'contain',
155+
),
156+
'expected_wrapper' => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;">Content</div>',
139157
'wrapper' => '<div>Content</div>',
140158
),
141159
'background image style is appended if a style attribute already exists' => array(
@@ -150,8 +168,8 @@ public function data_background_block_support() {
150168
'source' => 'file',
151169
),
152170
),
153-
'expected_wrapper' => '<div classname="wp-block-test" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
154-
'wrapper' => '<div classname="wp-block-test" style="color: red">Content</div>',
171+
'expected_wrapper' => '<div class="wp-block-test has-background" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
172+
'wrapper' => '<div class="wp-block-test" style="color: red">Content</div>',
155173
),
156174
'background image style is appended if a style attribute containing multiple styles already exists' => array(
157175
'theme_name' => 'block-theme-child-with-fluid-typography',
@@ -165,8 +183,8 @@ public function data_background_block_support() {
165183
'source' => 'file',
166184
),
167185
),
168-
'expected_wrapper' => '<div classname="wp-block-test" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
169-
'wrapper' => '<div classname="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
186+
'expected_wrapper' => '<div class="wp-block-test has-background" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
187+
'wrapper' => '<div class="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
170188
),
171189
'background image style is not applied if the block does not support background image' => array(
172190
'theme_name' => 'block-theme-child-with-fluid-typography',

‎tests/phpunit/tests/style-engine/styleEngine.php‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ public function tear_down() {
2727
* @ticket 56467
2828
* @ticket 58549
2929
* @ticket 58590
30+
* @ticket 60175
3031
*
3132
* @covers ::wp_style_engine_get_styles
3233
*
@@ -520,18 +521,22 @@ public function data_wp_style_engine_get_styles() {
520521
'inline_background_image_url_with_background_size' => array(
521522
'block_styles' => array(
522523
'background' => array(
523-
'backgroundImage' => array(
524+
'backgroundImage' => array(
524525
'url' => 'https://example.com/image.jpg',
525526
),
526-
'backgroundSize' => 'cover',
527+
'backgroundPosition' => 'center',
528+
'backgroundRepeat' => 'no-repeat',
529+
'backgroundSize' => 'cover',
527530
),
528531
),
529532
'options' => array(),
530533
'expected_output' => array(
531-
'css' => "background-image:url('https://example.com/image.jpg');background-size:cover;",
534+
'css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;",
532535
'declarations' => array(
533-
'background-image' => "url('https://example.com/image.jpg')",
534-
'background-size' => 'cover',
536+
'background-image' => "url('https://example.com/image.jpg')",
537+
'background-position' => 'center',
538+
'background-repeat' => 'no-repeat',
539+
'background-size' => 'cover',
535540
),
536541
),
537542
),

‎tests/phpunit/tests/theme/wpThemeJson.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,7 @@ public function test_get_settings_appearance_true_opts_in() {
264264
$expected = array(
265265
'background' => array(
266266
'backgroundImage' => true,
267+
'backgroundSize' => true,
267268
),
268269
'border' => array(
269270
'width' => true,
@@ -300,6 +301,7 @@ public function test_get_settings_appearance_true_opts_in() {
300301
'core/group' => array(
301302
'background' => array(
302303
'backgroundImage' => true,
304+
'backgroundSize' => true,
303305
),
304306
'border' => array(
305307
'width' => true,

0 commit comments

Comments
 (0)