Changeset 58222 for trunk/src/wp-includes/class-wp-theme-json.php

Timestamp:

05/28/2024 06:04:37 AM (21 months ago)

Author:

noisysocks

Message:

Block Themes: Allow setting site-wide background images in theme.json

Syncs the necessary changes from Gutenberg to allow setting site-wide
background images using the top-level styles.background key in theme.json.

Props ramonopoly.
Fixes #61123.

File:

• trunk/src/wp-includes/class-wp-theme-json.php (modified) (11 diffs)

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

@@ -214 +214 @@
      * @since 6.4.0 Added `writing-mode` property.
      * @since 6.5.0 Added `aspect-ratio` property.
+     * @since 6.6.0 Added `background-[image|position|repeat|size]` properties.
      *
      * @var array
@@ -221 +222 @@
         'background'                        => array( 'color', 'gradient' ),
         'background-color'                  => array( 'color', 'background' ),
+        'background-image'                  => array( 'background', 'backgroundImage' ),
+        'background-position'               => array( 'background', 'backgroundPosition' ),
+        'background-repeat'                 => array( 'background', 'backgroundRepeat' ),
+        'background-size'                   => array( 'background', 'backgroundSize' ),
         'border-radius'                     => array( 'border', 'radius' ),
         'border-top-left-radius'            => array( 'border', 'radius', 'topLeft' ),
@@ -284 +289 @@
      * Indirect properties are not output directly by `compute_style_properties`,
      * but are used elsewhere in the processing of global styles. The indirect
-     * property is used to validate whether or not a style value is allowed.
+     * property is used to validate whether a style value is allowed.
      *
      * @since 6.2.0
+     * @since 6.6.0 Added background-image properties.
      *
      * @var array
@@ -303 +309 @@
             array( 'layout', 'contentSize' ),
             array( 'layout', 'wideSize' ),
+        ),
+        'background-image' => array(
+            array( 'background', 'backgroundImage', 'url' ),
         ),
     );
@@ -483 +492 @@
      * @since 6.3.0 Added support for `typography.textColumns`.
      * @since 6.5.0 Added support for `dimensions.aspectRatio`.
+     * @since 6.6.0 Added `background` sub properties to top-level only.
      *
      * @var array
      */
     const VALID_STYLES = array(
+        'background' => array(
+            'backgroundImage'    => 'top',
+            'backgroundPosition' => 'top',
+            'backgroundRepeat'   => 'top',
+            'backgroundSize'     => 'top',
+        ),
         'border'     => array(
             'color'  => null,
@@ -2052 +2068 @@
      * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
      * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
-     * @since 6.6.0 Passing current theme JSON settings to wp_get_typography_font_size_value().
+     * @since 6.6.0 Pass current theme JSON settings to wp_get_typography_font_size_value(), and process background properties.
      *
      * @param array   $styles Styles to process.
@@ -2104 +2120 @@
                     continue;
                 }
+            }
+
+            // Processes background styles.
+            if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
+                $background_styles = wp_style_engine_get_styles( array( 'background' => $styles['background'] ) );
+                $value             = isset( $background_styles['declarations'][ $css_property ] ) ? $background_styles['declarations'][ $css_property ] : $value;
             }
 
@@ -2485 +2507 @@
      *
      * @since 6.1.0
+     * @since 6.6.0 Setting a min-height of HTML when root styles have a background gradient or image.
      *
      * @param array $block_metadata Metadata about the block to get styles for.
@@ -2496 +2519 @@
         $settings             = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array();
         $feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $node );
+        $is_root_selector     = static::ROOT_BLOCK_SELECTOR === $selector;
 
         // If there are style variations, generate the declarations for them, including any feature selectors the block may have.
@@ -2578 +2602 @@
 
         /*
-         * 1. Separate the declarations that use the general selector
+         * 1. Bespoke declaration modifiers:
+         * - 'filter': Separate the declarations that use the general selector
          * from the ones using the duotone selector.
+         * - 'background|background-image': set the html min-height to 100%
+         * to ensure the background covers the entire viewport.
          */
-        $declarations_duotone = array();
+        $declarations_duotone       = array();
+        $should_set_root_min_height = false;
+
         foreach ( $declarations as $index => $declaration ) {
             if ( 'filter' === $declaration['name'] ) {
+                /*
+                 * 'unset' filters happen when a filter is unset
+                 * in the site-editor UI. Because the 'unset' value
+                 * in the user origin overrides the value in the
+                 * theme origin, we can skip rendering anything
+                 * here as no filter needs to be applied anymore.
+                 * So only add declarations to with values other
+                 * than 'unset'.
+                 */
+                if ( 'unset' !== $declaration['value'] ) {
+                    $declarations_duotone[] = $declaration;
+                }
                 unset( $declarations[ $index ] );
-                $declarations_duotone[] = $declaration;
-            }
+            }
+
+            if ( $is_root_selector && ( 'background-image' === $declaration['name'] || 'background' === $declaration['name'] ) ) {
+                $should_set_root_min_height = true;
+            }
+        }
+
+        /*
+         * If root styles has a background-image or a background (gradient) set,
+         * set the min-height to '100%'. Minus `--wp-admin--admin-bar--height` for logged-in view.
+         * Setting the CSS rule on the HTML tag ensures background gradients and images behave similarly,
+         * and matches the behavior of the site editor.
+         */
+        if ( $should_set_root_min_height ) {
+            $block_rules .= static::to_ruleset(
+                'html',
+                array(
+                    array(
+                        'name'  => 'min-height',
+                        'value' => 'calc(100% - var(--wp-admin--admin-bar--height, 0px))',
+                    ),
+                )
+            );
         }
 
@@ -2604 +2666 @@
         // 4. Generate Layout block gap styles.
         if (
-            static::ROOT_BLOCK_SELECTOR !== $selector &&
+            ! $is_root_selector &&
             ! empty( $block_metadata['name'] )
         ) {