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

wp-includes/block-supports/background.php

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

wp-includes/class-wp-theme-json.php

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

wp-includes/style-engine/class-wp-style-engine.php

@@ -23,6 +23,7 @@
  * @since 6.1.0
  * @since 6.3.0 Added support for text-columns.
  * @since 6.4.0 Added support for background.backgroundImage.
+ * @since 6.5.0 Added support for background.backgroundPosition and background.backgroundRepeat.
  */
 #[AllowDynamicProperties]
 final class WP_Style_Engine {
@@ -48,14 +49,26 @@ 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' ),
 			),
-			'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(
 					'default' => 'background-size',
 				),

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @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.