Changeset 57254

Timestamp:

01/09/2024 06:10:09 AM (18 months ago)

Author:

isabel_brison

Message:

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.

Location:

trunk

Files:

• src/wp-includes/block-supports/background.php (modified) (4 diffs)
• src/wp-includes/class-wp-theme-json.php (modified) (3 diffs)
• src/wp-includes/style-engine/class-wp-style-engine.php (modified) (3 diffs)
• tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php (modified) (4 diffs)
• tests/phpunit/tests/style-engine/styleEngine.php (modified) (2 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (2 diffs)

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

@@ -41 +41 @@
  *
  * @since 6.4.0
+ * @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output.
  * @access private
  *
@@ -65 +66 @@
         ? $block_attributes['style']['background']['backgroundImage']['url']
         : null;
+
+    if ( ! $background_image_source && ! $background_image_url ) {
+        return $block_content;
+    }
+
     $background_size         = isset( $block_attributes['style']['background']['backgroundSize'] )
         ? $block_attributes['style']['background']['backgroundSize']
         : 'cover';
+    $background_position     = isset( $block_attributes['style']['background']['backgroundPosition'] )
+        ? $block_attributes['style']['background']['backgroundPosition']
+        : null;
+    $background_repeat       = isset( $block_attributes['style']['background']['backgroundRepeat'] )
+        ? $block_attributes['style']['background']['backgroundRepeat']
+        : null;
 
     $background_block_styles = array();
@@ -77 +89 @@
         // Set file based background URL.
         $background_block_styles['backgroundImage']['url'] = $background_image_url;
-        // Only output the background size when an image url is set.
-        $background_block_styles['backgroundSize'] = $background_size;
+        // Only output the background size and repeat when an image url is set.
+        $background_block_styles['backgroundSize']     = $background_size;
+        $background_block_styles['backgroundRepeat']   = $background_repeat;
+        $background_block_styles['backgroundPosition'] = $background_position;
+
+        // If the background size is set to `contain` and no position is set, set the position to `center`.
+        if ( 'contain' === $background_size && ! isset( $background_position ) ) {
+            $background_block_styles['backgroundPosition'] = 'center';
+        }
     }
 
@@ -100 +119 @@
             $updated_style .= $styles['css'];
             $tags->set_attribute( 'style', $updated_style );
+            $tags->add_class( 'has-background' );
         }
 

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

@@ -345 +345 @@
      * @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`,
      *              `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`.
-     * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`.
+     * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize` and
+     *              `background.backgroundSize`.
      * @var array
      */
@@ -353 +354 @@
         'background'                    => array(
             'backgroundImage' => null,
+            'backgroundSize'  => null,
         ),
         'border'                        => array(
@@ -574 +576 @@
      * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
      * @since 6.4.0 Added `background.backgroundImage`.
+     * @since 6.5.0 Added `background.backgroundSize`.
      * @var array
      */
     const APPEARANCE_TOOLS_OPT_INS = array(
         array( 'background', 'backgroundImage' ),
+        array( 'background', 'backgroundSize' ),
         array( 'border', 'color' ),
         array( 'border', 'radius' ),

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

@@ -24 +24 @@
  * @since 6.3.0 Added support for text-columns.
  * @since 6.4.0 Added support for background.backgroundImage.
+ * @since 6.5.0 Added support for background.backgroundPosition and background.backgroundRepeat.
  */
 #[AllowDynamicProperties]
@@ -49 +50 @@
     const BLOCK_STYLE_DEFINITIONS_METADATA = array(
         'background' => array(
-            'backgroundImage' => array(
+            'backgroundImage'    => array(
                 'property_keys' => array(
                     'default' => 'background-image',
@@ -56 +57 @@
                 'path'          => array( 'background', 'backgroundImage' ),
             ),
-            'backgroundSize'  => array(
+            'backgroundPosition' => array(
+                'property_keys' => array(
+                    'default' => 'background-position',
+                ),
+                'path'          => array( 'background', 'backgroundPosition' ),
+            ),
+            'backgroundRepeat'   => array(
+                'property_keys' => array(
+                    'default' => 'background-repeat',
+                ),
+                'path'          => array( 'background', 'backgroundRepeat' ),
+            ),
+            'backgroundSize'     => array(
                 'property_keys' => array(
                     'default' => 'background-size',

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

@@ -68 +68 @@
      *
      * @ticket 59357
+     * @ticket 60175
      *
      * @covers ::wp_render_background_support
@@ -136 +137 @@
                     ),
                 ),
-                'expected_wrapper'    => '<div style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+                'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
                 'wrapper'             => '<div>Content</div>',
             ),
+            'background image style with contain, position, and repeat is applied' => array(
+                'theme_name'          => 'block-theme-child-with-fluid-typography',
+                'block_name'          => 'test/background-rules-are-output',
+                'background_settings' => array(
+                    'backgroundImage' => true,
+                ),
+                'background_style'    => array(
+                    'backgroundImage'  => array(
+                        'url'    => 'https://example.com/image.jpg',
+                        'source' => 'file',
+                    ),
+                    'backgroundRepeat' => 'no-repeat',
+                    'backgroundSize'   => 'contain',
+                ),
+                '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>',
+                'wrapper'             => '<div>Content</div>',
+            ),
             'background image style is appended if a style attribute already exists' => array(
                 'theme_name'          => 'block-theme-child-with-fluid-typography',
@@ -151 +169 @@
                     ),
                 ),
-                '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>',
-                'wrapper'             => '<div classname="wp-block-test" style="color: red">Content</div>',
+                '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>',
+                'wrapper'             => '<div class="wp-block-test" style="color: red">Content</div>',
             ),
             'background image style is appended if a style attribute containing multiple styles already exists' => array(
@@ -166 +184 @@
                     ),
                 ),
-                '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>',
-                'wrapper'             => '<div classname="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
+                '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>',
+                'wrapper'             => '<div class="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
             ),
             'background image style is not applied if the block does not support background image' => array(

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

@@ -28 +28 @@
      * @ticket 58549
      * @ticket 58590
+     * @ticket 60175
      *
      * @covers ::wp_style_engine_get_styles
@@ -521 +522 @@
                 'block_styles'    => array(
                     'background' => array(
-                        'backgroundImage' => array(
+                        'backgroundImage'    => array(
                             'url' => 'https://example.com/image.jpg',
                         ),
-                        'backgroundSize'  => 'cover',
-                    ),
-                ),
-                'options'         => array(),
-                'expected_output' => array(
-                    'css'          => "background-image:url('https://example.com/image.jpg');background-size:cover;",
-                    'declarations' => array(
-                        'background-image' => "url('https://example.com/image.jpg')",
-                        'background-size'  => 'cover',
+                        'backgroundPosition' => 'center',
+                        'backgroundRepeat'   => 'no-repeat',
+                        'backgroundSize'     => 'cover',
+                    ),
+                ),
+                'options'         => array(),
+                'expected_output' => array(
+                    'css'          => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;",
+                    'declarations' => array(
+                        'background-image'    => "url('https://example.com/image.jpg')",
+                        'background-position' => 'center',
+                        'background-repeat'   => 'no-repeat',
+                        'background-size'     => 'cover',
                     ),
                 ),

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -265 +265 @@
             'background' => array(
                 'backgroundImage' => true,
+                'backgroundSize'  => true,
             ),
             'border'     => array(
@@ -301 +302 @@
                     'background' => array(
                         'backgroundImage' => true,
+                        'backgroundSize'  => true,
                     ),
                     'border'     => array(