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

Timestamp:

05/28/2024 06:04:37 AM (2 years 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'] )
                 ) {