Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-21 03:51:26 +02:00
Code Issues Projects Releases Wiki Activity

Block themes: Enable block-level background image styles

Browse Source 
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
This commit is contained in:
noisysocks 2024-07-24 00:26:14 +00:00
parent afd60dd8a4
commit edb05c5809
5 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
wp-includes/block-supports/background.php
View File

@ -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'] ) {

35
wp-includes/class-wp-theme-json-resolver.php
View File

@ -848,6 +848,7 @@ class WP_Theme_JSON_Resolver {
* 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 @@ class WP_Theme_JSON_Resolver {
}
$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 @@ class WP_Theme_JSON_Resolver {
$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;
}

8
wp-includes/class-wp-theme-json.php
View File

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

2
wp-includes/global-styles-and-settings.php
View File

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

2
wp-includes/version.php
View File

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