Changeset 56614 for trunk/src/wp-includes/style-engine/class-wp-style-engine.php

Timestamp:

09/19/2023 01:27:43 AM (20 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.

File:

• trunk/src/wp-includes/style-engine/class-wp-style-engine.php (modified) (3 diffs)

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.
      *