From 1284a7fe9969e7f8dc4a0587a7db1c2c007f3dc7 Mon Sep 17 00:00:00 2001 From: noisysocks Date: Tue, 28 May 2024 06:06:11 +0000 Subject: [PATCH] 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. Built from https://develop.svn.wordpress.org/trunk@58222 git-svn-id: http://core.svn.wordpress.org/trunk@57685 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/block-supports/background.php | 49 ++++----------- wp-includes/class-wp-theme-json.php | 74 +++++++++++++++++++++-- wp-includes/version.php | 2 +- 3 files changed, 82 insertions(+), 43 deletions(-) diff --git a/wp-includes/block-supports/background.php b/wp-includes/block-supports/background.php index 9b82e6a9d5..ff50be3206 100644 --- a/wp-includes/block-supports/background.php +++ b/wp-includes/block-supports/background.php @@ -41,6 +41,8 @@ function wp_register_background_support( $block_type ) { * * @since 6.4.0 * @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output. + * @since 6.6.0 Removed requirement for `backgroundImage.source`. A file/url is the default. + * * @access private * * @param string $block_content Rendered block content. @@ -54,52 +56,27 @@ function wp_render_background_support( $block_content, $block ) { if ( ! $has_background_image_support || - wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' ) + wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' ) || + ! isset( $block_attributes['style']['background'] ) ) { return $block_content; } - $background_image_source = isset( $block_attributes['style']['background']['backgroundImage']['source'] ) - ? $block_attributes['style']['background']['backgroundImage']['source'] - : null; - $background_image_url = isset( $block_attributes['style']['background']['backgroundImage']['url'] ) - ? $block_attributes['style']['background']['backgroundImage']['url'] - : null; + $background_styles = array(); + $background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array(); - 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(); - - if ( - 'file' === $background_image_source && - $background_image_url - ) { - // Set file based background URL. - $background_block_styles['backgroundImage']['url'] = $background_image_url; - // 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 ( ! empty( $background_styles['backgroundImage'] ) ) { + $background_styles['backgroundSize'] = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover'; + $background_styles['backgroundPosition'] = isset( $block_attributes['style']['background']['backgroundPosition'] ) ? $block_attributes['style']['background']['backgroundPosition'] : null; + $background_styles['backgroundRepeat'] = isset( $block_attributes['style']['background']['backgroundRepeat'] ) ? $block_attributes['style']['background']['backgroundRepeat'] : null; // 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'; + if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) { + $background_styles['backgroundPosition'] = 'center'; } } - $styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) ); + $styles = wp_style_engine_get_styles( array( 'background' => $background_styles ) ); if ( ! empty( $styles['css'] ) ) { // Inject background styles to the first element, presuming it's the wrapper, if it exists. diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index d1af7ab6e2..f118f92c06 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/wp-includes/class-wp-theme-json.php @@ -213,6 +213,7 @@ class WP_Theme_JSON { * @since 6.3.0 Added `column-count` property. * @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 */ @@ -220,6 +221,10 @@ class WP_Theme_JSON { 'aspect-ratio' => array( 'dimensions', 'aspectRatio' ), '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' ), 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ), @@ -283,9 +288,10 @@ class WP_Theme_JSON { * * 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,6 +309,9 @@ class WP_Theme_JSON { array( 'layout', 'contentSize' ), array( 'layout', 'wideSize' ), ), + 'background-image' => array( + array( 'background', 'backgroundImage', 'url' ), + ), ); /** @@ -482,10 +491,17 @@ class WP_Theme_JSON { * @since 6.2.0 Added `outline`, and `minHeight` properties. * @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, 'radius' => null, @@ -2051,7 +2067,7 @@ class WP_Theme_JSON { * @since 5.9.0 Added the `$settings` and `$properties` parameters. * @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. * @param array $settings Theme settings. @@ -2105,6 +2121,12 @@ class WP_Theme_JSON { } } + // 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; + } + // Skip if empty and not "0" or value represents array of longhand values. $has_missing_value = empty( $value ) && ! is_numeric( $value ); if ( $has_missing_value || is_array( $value ) ) { @@ -2484,6 +2506,7 @@ class WP_Theme_JSON { * Gets the CSS rules for a particular block from theme.json. * * @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. * @@ -2495,6 +2518,7 @@ class WP_Theme_JSON { $selector = $block_metadata['selector']; $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. $style_variation_declarations = array(); @@ -2577,15 +2601,53 @@ class WP_Theme_JSON { $block_rules = ''; /* - * 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))', + ), + ) + ); } // Update declarations if there are separators with only background color defined. @@ -2603,7 +2665,7 @@ class WP_Theme_JSON { // 4. Generate Layout block gap styles. if ( - static::ROOT_BLOCK_SELECTOR !== $selector && + ! $is_root_selector && ! empty( $block_metadata['name'] ) ) { $block_rules .= $this->get_layout_styles( $block_metadata ); diff --git a/wp-includes/version.php b/wp-includes/version.php index b2d0d2377d..48d0ebd6c6 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.6-alpha-58221'; +$wp_version = '6.6-alpha-58222'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.