Editor: add size and repeat to background image support.

Adds background size and background repeat style processing to the background image block support and `WP_Style_Engine` definitions.

Props andrewserong, mukesh27.
Fixes #60175.


Built from https://develop.svn.wordpress.org/trunk@57254


git-svn-id: http://core.svn.wordpress.org/trunk@56760 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
isabel_brison 2024-01-09 06:12:18 +00:00
parent 6e67ad1701
commit 90088c4c92
4 changed files with 43 additions and 6 deletions

View File

@ -40,6 +40,7 @@ function wp_register_background_support( $block_type ) {
* it is also applied to non-server-rendered blocks. * it is also applied to non-server-rendered blocks.
* *
* @since 6.4.0 * @since 6.4.0
* @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output.
* @access private * @access private
* *
* @param string $block_content Rendered block content. * @param string $block_content Rendered block content.
@ -64,9 +65,20 @@ function wp_render_background_support( $block_content, $block ) {
$background_image_url = isset( $block_attributes['style']['background']['backgroundImage']['url'] ) $background_image_url = isset( $block_attributes['style']['background']['backgroundImage']['url'] )
? $block_attributes['style']['background']['backgroundImage']['url'] ? $block_attributes['style']['background']['backgroundImage']['url']
: null; : null;
if ( ! $background_image_source && ! $background_image_url ) {
return $block_content;
}
$background_size = isset( $block_attributes['style']['background']['backgroundSize'] ) $background_size = isset( $block_attributes['style']['background']['backgroundSize'] )
? $block_attributes['style']['background']['backgroundSize'] ? $block_attributes['style']['background']['backgroundSize']
: 'cover'; : '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(); $background_block_styles = array();
@ -76,8 +88,15 @@ function wp_render_background_support( $block_content, $block ) {
) { ) {
// Set file based background URL. // Set file based background URL.
$background_block_styles['backgroundImage']['url'] = $background_image_url; $background_block_styles['backgroundImage']['url'] = $background_image_url;
// Only output the background size when an image url is set. // Only output the background size and repeat when an image url is set.
$background_block_styles['backgroundSize'] = $background_size; $background_block_styles['backgroundSize'] = $background_size;
$background_block_styles['backgroundRepeat'] = $background_repeat;
$background_block_styles['backgroundPosition'] = $background_position;
// 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';
}
} }
$styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) ); $styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) );
@ -99,6 +118,7 @@ function wp_render_background_support( $block_content, $block ) {
$updated_style .= $styles['css']; $updated_style .= $styles['css'];
$tags->set_attribute( 'style', $updated_style ); $tags->set_attribute( 'style', $updated_style );
$tags->add_class( 'has-background' );
} }
return $tags->get_updated_html(); return $tags->get_updated_html();

View File

@ -344,7 +344,8 @@ class WP_Theme_JSON {
* @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`. * @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`.
* @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`, * @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`,
* `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`. * `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`.
* @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`. * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize` and
* `background.backgroundSize`.
* @var array * @var array
*/ */
const VALID_SETTINGS = array( const VALID_SETTINGS = array(
@ -352,6 +353,7 @@ class WP_Theme_JSON {
'useRootPaddingAwareAlignments' => null, 'useRootPaddingAwareAlignments' => null,
'background' => array( 'background' => array(
'backgroundImage' => null, 'backgroundImage' => null,
'backgroundSize' => null,
), ),
'border' => array( 'border' => array(
'color' => null, 'color' => null,
@ -573,10 +575,12 @@ class WP_Theme_JSON {
* @since 6.0.0 * @since 6.0.0
* @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`. * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
* @since 6.4.0 Added `background.backgroundImage`. * @since 6.4.0 Added `background.backgroundImage`.
* @since 6.5.0 Added `background.backgroundSize`.
* @var array * @var array
*/ */
const APPEARANCE_TOOLS_OPT_INS = array( const APPEARANCE_TOOLS_OPT_INS = array(
array( 'background', 'backgroundImage' ), array( 'background', 'backgroundImage' ),
array( 'background', 'backgroundSize' ),
array( 'border', 'color' ), array( 'border', 'color' ),
array( 'border', 'radius' ), array( 'border', 'radius' ),
array( 'border', 'style' ), array( 'border', 'style' ),

View File

@ -23,6 +23,7 @@
* @since 6.1.0 * @since 6.1.0
* @since 6.3.0 Added support for text-columns. * @since 6.3.0 Added support for text-columns.
* @since 6.4.0 Added support for background.backgroundImage. * @since 6.4.0 Added support for background.backgroundImage.
* @since 6.5.0 Added support for background.backgroundPosition and background.backgroundRepeat.
*/ */
#[AllowDynamicProperties] #[AllowDynamicProperties]
final class WP_Style_Engine { final class WP_Style_Engine {
@ -48,14 +49,26 @@ final class WP_Style_Engine {
*/ */
const BLOCK_STYLE_DEFINITIONS_METADATA = array( const BLOCK_STYLE_DEFINITIONS_METADATA = array(
'background' => array( 'background' => array(
'backgroundImage' => array( 'backgroundImage' => array(
'property_keys' => array( 'property_keys' => array(
'default' => 'background-image', 'default' => 'background-image',
), ),
'value_func' => array( self::class, 'get_url_or_value_css_declaration' ), 'value_func' => array( self::class, 'get_url_or_value_css_declaration' ),
'path' => array( 'background', 'backgroundImage' ), 'path' => array( 'background', 'backgroundImage' ),
), ),
'backgroundSize' => array( 'backgroundPosition' => array(
'property_keys' => array(
'default' => 'background-position',
),
'path' => array( 'background', 'backgroundPosition' ),
),
'backgroundRepeat' => array(
'property_keys' => array(
'default' => 'background-repeat',
),
'path' => array( 'background', 'backgroundRepeat' ),
),
'backgroundSize' => array(
'property_keys' => array( 'property_keys' => array(
'default' => 'background-size', 'default' => 'background-size',
), ),

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.5-alpha-57253'; $wp_version = '6.5-alpha-57254';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.