From 38fdd7bb3afcd59d51bc7bafcaa3d78820e3593b Mon Sep 17 00:00:00 2001 From: ramonopoly Date: Wed, 31 Jul 2024 02:41:16 +0000 Subject: [PATCH] Background: add background attachment support to theme.json styles Introduces the ability to specify a value for `background.backgroundAttachment` in theme.json styles. The theme.json value determines the CSS value for the `background-attachment` property. This feature was introduced into the Gutenberg plugin in version 18.9. Props andrewserong, mukesh27, noisysocks, ramonopoly. Fixes #61720 Built from https://develop.svn.wordpress.org/trunk@58834 git-svn-id: http://core.svn.wordpress.org/trunk@58230 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/block-supports/background.php | 12 +++++++----- wp-includes/class-wp-theme-json.php | 11 +++++++---- wp-includes/style-engine/class-wp-style-engine.php | 14 ++++++++++---- wp-includes/version.php | 2 +- 4 files changed, 25 insertions(+), 14 deletions(-) diff --git a/wp-includes/block-supports/background.php b/wp-includes/block-supports/background.php index b7b501a44a..4e7995f53f 100644 --- a/wp-includes/block-supports/background.php +++ b/wp-includes/block-supports/background.php @@ -42,6 +42,7 @@ 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. + * @since 6.7.0 Added support for `backgroundAttachment` output. * * @access private * @@ -62,11 +63,12 @@ function wp_render_background_support( $block_content, $block ) { return $block_content; } - $background_styles = array(); - $background_styles['backgroundImage'] = $block_attributes['style']['background']['backgroundImage'] ?? null; - $background_styles['backgroundSize'] = $block_attributes['style']['background']['backgroundSize'] ?? null; - $background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null; - $background_styles['backgroundRepeat'] = $block_attributes['style']['background']['backgroundRepeat'] ?? null; + $background_styles = array(); + $background_styles['backgroundImage'] = $block_attributes['style']['background']['backgroundImage'] ?? null; + $background_styles['backgroundSize'] = $block_attributes['style']['background']['backgroundSize'] ?? null; + $background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null; + $background_styles['backgroundRepeat'] = $block_attributes['style']['background']['backgroundRepeat'] ?? null; + $background_styles['backgroundAttachment'] = $block_attributes['style']['background']['backgroundAttachment'] ?? null; if ( ! empty( $background_styles['backgroundImage'] ) ) { $background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover'; diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index 631dd1f703..e6ca23bff3 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/wp-includes/class-wp-theme-json.php @@ -226,6 +226,7 @@ class WP_Theme_JSON { * @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. + * @since 6.7.0 Added `background-attachment` property. * * @var array */ @@ -237,6 +238,7 @@ class WP_Theme_JSON { 'background-position' => array( 'background', 'backgroundPosition' ), 'background-repeat' => array( 'background', 'backgroundRepeat' ), 'background-size' => array( 'background', 'backgroundSize' ), + 'background-attachment' => array( 'background', 'backgroundAttachment' ), 'border-radius' => array( 'border', 'radius' ), 'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ), 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ), @@ -520,10 +522,11 @@ class WP_Theme_JSON { */ const VALID_STYLES = array( 'background' => array( - 'backgroundImage' => null, - 'backgroundPosition' => null, - 'backgroundRepeat' => null, - 'backgroundSize' => null, + 'backgroundImage' => null, + 'backgroundPosition' => null, + 'backgroundRepeat' => null, + 'backgroundSize' => null, + 'backgroundAttachment' => null, ), 'border' => array( 'color' => null, diff --git a/wp-includes/style-engine/class-wp-style-engine.php b/wp-includes/style-engine/class-wp-style-engine.php index 1ba813ed65..3012ca3eef 100644 --- a/wp-includes/style-engine/class-wp-style-engine.php +++ b/wp-includes/style-engine/class-wp-style-engine.php @@ -50,31 +50,37 @@ final class WP_Style_Engine { */ const BLOCK_STYLE_DEFINITIONS_METADATA = array( 'background' => array( - 'backgroundImage' => array( + 'backgroundImage' => array( 'property_keys' => array( 'default' => 'background-image', ), 'value_func' => array( self::class, 'get_url_or_value_css_declaration' ), 'path' => array( 'background', 'backgroundImage' ), ), - 'backgroundPosition' => array( + 'backgroundPosition' => array( 'property_keys' => array( 'default' => 'background-position', ), 'path' => array( 'background', 'backgroundPosition' ), ), - 'backgroundRepeat' => array( + 'backgroundRepeat' => array( 'property_keys' => array( 'default' => 'background-repeat', ), 'path' => array( 'background', 'backgroundRepeat' ), ), - 'backgroundSize' => array( + 'backgroundSize' => array( 'property_keys' => array( 'default' => 'background-size', ), 'path' => array( 'background', 'backgroundSize' ), ), + 'backgroundAttachment' => array( + 'property_keys' => array( + 'default' => 'background-attachment', + ), + 'path' => array( 'background', 'backgroundAttachment' ), + ), ), 'color' => array( 'text' => array( diff --git a/wp-includes/version.php b/wp-includes/version.php index 83bb91ff91..3d6a8e6b81 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.7-alpha-58833'; +$wp_version = '6.7-alpha-58834'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.