Block themes: Enable block-level background image styles

Allows defining background images for blocks in theme.json.

Syncs PHP changes from WordPress/gutenberg#60100.

Props ramonopoly, aaronrobertshaw.
Fixes #61588.

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


git-svn-id: https://core.svn.wordpress.org/trunk@58193 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/block-supports/background.php

@@ -62,13 +62,14 @@ function wp_render_background_support( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$background_styles                    = array();
-	$background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array();
+	$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;
 
 	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;
+		$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
 
 		// If the background size is set to `contain` and no position is set, set the position to `center`.
 		if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {

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

@@ -848,6 +848,7 @@ public static function get_style_variations( $scope = 'theme' ) {
 	 * as the value of `_link` object in REST API responses.
 	 *
 	 * @since 6.6.0
+	 * @since 6.7.0 Resolve relative paths in block styles.
 	 *
 	 * @param WP_Theme_JSON $theme_json A theme json instance.
 	 * @return array An array of resolved paths.
@@ -860,15 +861,14 @@ public static function get_resolved_theme_uris( $theme_json ) {
 		}
 
 		$theme_json_data = $theme_json->get_raw_data();
-
-		// Top level styles.
-		$background_image_url = isset( $theme_json_data['styles']['background']['backgroundImage']['url'] ) ? $theme_json_data['styles']['background']['backgroundImage']['url'] : null;
-
 		/*
 		 * The same file convention when registering web fonts.
 		 * See: WP_Font_Face_Resolver::to_theme_file_uri.
 		 */
 		$placeholder = 'file:./';
+
+		// Top level styles.
+		$background_image_url = $theme_json_data['styles']['background']['backgroundImage']['url'] ?? null;
 		if (
 			isset( $background_image_url ) &&
 			is_string( $background_image_url ) &&
@@ -888,6 +888,33 @@ public static function get_resolved_theme_uris( $theme_json ) {
 			$resolved_theme_uris[] = $resolved_theme_uri;
 		}
 
+		// Block styles.
+		if ( ! empty( $theme_json_data['styles']['blocks'] ) ) {
+			foreach ( $theme_json_data['styles']['blocks'] as $block_name => $block_styles ) {
+				if ( ! isset( $block_styles['background']['backgroundImage']['url'] ) ) {
+					continue;
+				}
+				$background_image_url = $block_styles['background']['backgroundImage']['url'];
+				if (
+					is_string( $background_image_url ) &&
+					// Skip if the src doesn't start with the placeholder, as there's nothing to replace.
+					str_starts_with( $background_image_url, $placeholder )
+				) {
+					$file_type          = wp_check_filetype( $background_image_url );
+					$src_url            = str_replace( $placeholder, '', $background_image_url );
+					$resolved_theme_uri = array(
+						'name'   => $background_image_url,
+						'href'   => sanitize_url( get_theme_file_uri( $src_url ) ),
+						'target' => "styles.blocks.{$block_name}.background.backgroundImage.url",
+					);
+					if ( isset( $file_type['type'] ) ) {
+						$resolved_theme_uri['type'] = $file_type['type'];
+					}
+					$resolved_theme_uris[] = $resolved_theme_uri;
+				}
+			}
+		}
+
 		return $resolved_theme_uris;
 	}
 

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

@@ -520,10 +520,10 @@ class WP_Theme_JSON {
 	 */
 	const VALID_STYLES = array(
 		'background' => array(
-			'backgroundImage'    => 'top',
-			'backgroundPosition' => 'top',
-			'backgroundRepeat'   => 'top',
-			'backgroundSize'     => 'top',
+			'backgroundImage'    => null,
+			'backgroundPosition' => null,
+			'backgroundRepeat'   => null,
+			'backgroundSize'     => null,
 		),
 		'border'     => array(
 			'color'  => null,

wp-includes/global-styles-and-settings.php

@@ -247,13 +247,15 @@ function wp_get_global_stylesheet( $types = array() ) {
  * Adds global style rules to the inline style for each block.
  *
  * @since 6.1.0
+ * @since 6.7.0 Resolve relative paths in block styles.
  *
  * @global WP_Styles $wp_styles
  */
 function wp_add_global_styles_for_blocks() {
 	global $wp_styles;
 
 	$tree        = WP_Theme_JSON_Resolver::get_merged_data();
+	$tree        = WP_Theme_JSON_Resolver::resolve_theme_file_uris( $tree );
 	$block_nodes = $tree->get_styles_block_nodes();
 	foreach ( $block_nodes as $metadata ) {
 		$block_css = $tree->get_styles_for_block( $metadata );

wp-includes/version.php

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