From edb05c5809dbd86d7b7c800bd1659d7ee2780d61 Mon Sep 17 00:00:00 2001 From: noisysocks Date: Wed, 24 Jul 2024 00:26:14 +0000 Subject: [PATCH] Block themes: Enable block-level background image styles Allows defining background images for blocks in theme.json. Syncs PHP changes from https://github.com/WordPress/gutenberg/pull/60100. Props ramonopoly, aaronrobertshaw. Fixes #61588. Built from https://develop.svn.wordpress.org/trunk@58797 git-svn-id: http://core.svn.wordpress.org/trunk@58193 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/block-supports/background.php | 11 +++--- wp-includes/class-wp-theme-json-resolver.php | 35 +++++++++++++++++--- wp-includes/class-wp-theme-json.php | 8 ++--- wp-includes/global-styles-and-settings.php | 2 ++ wp-includes/version.php | 2 +- 5 files changed, 44 insertions(+), 14 deletions(-) diff --git a/wp-includes/block-supports/background.php b/wp-includes/block-supports/background.php index ff50be32068..b7b501a44ac 100644 --- a/wp-includes/block-supports/background.php +++ b/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'] ) { diff --git a/wp-includes/class-wp-theme-json-resolver.php b/wp-includes/class-wp-theme-json-resolver.php index 5caaf0bb7e1..d63a84353cd 100644 --- a/wp-includes/class-wp-theme-json-resolver.php +++ b/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; } diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index 512df0fbf8c..631dd1f703e 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/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, diff --git a/wp-includes/global-styles-and-settings.php b/wp-includes/global-styles-and-settings.php index b79eac58450..f40d4a5e986 100644 --- a/wp-includes/global-styles-and-settings.php +++ b/wp-includes/global-styles-and-settings.php @@ -247,6 +247,7 @@ 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 */ @@ -254,6 +255,7 @@ 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 ); diff --git a/wp-includes/version.php b/wp-includes/version.php index 9ed346a1c1c..99257cb75ee 100644 --- a/wp-includes/version.php +++ b/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.