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
This commit is contained in:
ramonopoly 2024-07-31 02:41:16 +00:00
parent f483d6dc4e
commit 38fdd7bb3a
4 changed files with 25 additions and 14 deletions

View File

@ -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';

View File

@ -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,

View File

@ -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(

View File

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