Changeset 56614

Timestamp:

09/19/2023 01:27:43 AM (12 months ago)

Author:

isabel_brison

Message:

Editor: add background image support.

Adds a new background block support with the ability to set a background image on blocks that opt into it.

Props andrewserong, mukesh27.
Fixes #59357.

Location:

trunk

Files:

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

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

@@ -343 +343 @@
      *              `position.fixed` and `position.sticky`.
      * @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`.
-     * @since 6.4.0 Added `layout.allowEditing` and `typography.writingMode`.
-     *
+     * @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`,
+     *              and `typography.writingMode`.
      * @var array
      */
@@ -350 +350 @@
         'appearanceTools'               => null,
         'useRootPaddingAwareAlignments' => null,
+        'background'                    => array(
+            'backgroundImage' => null,
+        ),
         'border'                        => array(
             'color'  => null,
@@ -564 +567 @@
      * @since 6.0.0
      * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
+     * @since 6.4.0 Added `background.backgroundImage`.
      * @var array
      */
     const APPEARANCE_TOOLS_OPT_INS = array(
+        array( 'background', 'backgroundImage' ),
         array( 'border', 'color' ),
         array( 'border', 'radius' ),

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

@@ -23 +23 @@
  * @since 6.1.0
  * @since 6.3.0 Added support for text-columns.
+ * @since 6.4.0 Added support for background.backgroundImage.
  */
 #[AllowDynamicProperties]
@@ -52 +53 @@
      */
     const BLOCK_STYLE_DEFINITIONS_METADATA = array(
+        'background' => array(
+            'backgroundImage' => array(
+                'property_keys' => array(
+                    'default' => 'background-image',
+                ),
+                'value_func'    => array( self::class, 'get_url_or_value_css_declaration' ),
+                'path'          => array( 'background', 'backgroundImage' ),
+            ),
+            'backgroundSize'  => array(
+                'property_keys' => array(
+                    'default' => 'background-size',
+                ),
+                'path'          => array( 'background', 'backgroundSize' ),
+            ),
+        ),
         'color'      => array(
             'text'       => array(
@@ -591 +607 @@
 
     /**
+     * Style value parser that constructs a CSS definition array comprising a single CSS property and value.
+     * If the provided value is an array containing a `url` property, the function will return a CSS definition array
+     * with a single property and value, with `url` escaped and injected into a CSS `url()` function,
+     * e.g., array( 'background-image' => "url( '...' )" ).
+     *
+     * @since 6.4.0
+     *
+     * @param array $style_value      A single raw style value from $block_styles array.
+     * @param array $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
+     * @return string[] An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
+     */
+    protected static function get_url_or_value_css_declaration( $style_value, $style_definition ) {
+        if ( empty( $style_value ) ) {
+            return array();
+        }
+
+        $css_declarations = array();
+
+        if ( isset( $style_definition['property_keys']['default'] ) ) {
+            $value = null;
+
+            if ( ! empty( $style_value['url'] ) ) {
+                $value = "url('" . $style_value['url'] . "')";
+            } elseif ( is_string( $style_value ) ) {
+                $value = $style_value;
+            }
+
+            if ( null !== $value ) {
+                $css_declarations[ $style_definition['property_keys']['default'] ] = $value;
+            }
+        }
+
+        return $css_declarations;
+    }
+
+    /**
      * Returns compiled CSS from CSS declarations.
      *

trunk/src/wp-settings.php

@@ -341 +341 @@
 require ABSPATH . WPINC . '/block-supports/utils.php';
 require ABSPATH . WPINC . '/block-supports/align.php';
+require ABSPATH . WPINC . '/block-supports/background.php';
 require ABSPATH . WPINC . '/block-supports/border.php';
 require ABSPATH . WPINC . '/block-supports/colors.php';

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

@@ -510 +510 @@
                 ),
             ),
+
+            'inline_background_image_url_with_background_size' => array(
+                'block_styles'    => array(
+                    'background' => 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',
+                    ),
+                ),
+            ),
         );
     }

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

@@ -263 +263 @@
         $actual   = $theme_json->get_settings();
         $expected = array(
+            'background' => array(
+                'backgroundImage' => true,
+            ),
             'border'     => array(
                 'width'  => true,
@@ -296 +299 @@
                 ),
                 'core/group'     => array(
+                    'background' => array(
+                        'backgroundImage' => true,
+                    ),
                     'border'     => array(
                         'width'  => true,