Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-07-03 10:14:54 +02:00
Code Issues Projects Releases Wiki Activity

Block Themes: Allow setting site-wide background images in theme.json

Browse Source 
Syncs the necessary changes from Gutenberg to allow setting site-wide
background images using the top-level `styles.background` key in `theme.json`.

Props ramonopoly.
Fixes #61123.

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


git-svn-id: http://core.svn.wordpress.org/trunk@57685 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
noisysocks 2024-05-28 06:06:11 +00:00
parent d66894e50d
commit 1284a7fe99
3 changed files with 82 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,6 +41,8 @@ function wp_register_background_support( $block_type ) {
*
* @since 6.4.0
* @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output.
* @since 6.6.0 Removed requirement for `backgroundImage.source`. A file/url is the default.
*
* @access private
*
* @param string $block_content Rendered block content.
@ -54,52 +56,27 @@ function wp_render_background_support( $block_content, $block ) {
if (
! $has_background_image_support ||
wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' )
wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' ) ||
! isset( $block_attributes['style']['background'] )
) {
return $block_content;
}
$background_image_source = isset( $block_attributes['style']['background']['backgroundImage']['source'] )
? $block_attributes['style']['background']['backgroundImage']['source']
: null;
$background_image_url = isset( $block_attributes['style']['background']['backgroundImage']['url'] )
? $block_attributes['style']['background']['backgroundImage']['url']
: null;
$background_styles = array();
$background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array();
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();
if (
'file' === $background_image_source &&
$background_image_url
) {
// Set file based background URL.
$background_block_styles['backgroundImage']['url'] = $background_image_url;
// 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 ( ! 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;
// 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';
if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {
$background_styles['backgroundPosition'] = 'center';
}
}
$styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) );
$styles = wp_style_engine_get_styles( array( 'background' => $background_styles ) );
if ( ! empty( $styles['css'] ) ) {
// Inject background styles to the first element, presuming it's the wrapper, if it exists.

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

@ -213,6 +213,7 @@ class WP_Theme_JSON {
* @since 6.3.0 Added `column-count` property.
* @since 6.4.0 Added `writing-mode` property.
* @since 6.5.0 Added `aspect-ratio` property.
* @since 6.6.0 Added `background-[image|position|repeat|size]` properties.
*
* @var array
*/
@ -220,6 +221,10 @@ class WP_Theme_JSON {
'aspect-ratio' => array( 'dimensions', 'aspectRatio' ),
'background' => array( 'color', 'gradient' ),
'background-color' => array( 'color', 'background' ),
'background-image' => array( 'background', 'backgroundImage' ),
'background-position' => array( 'background', 'backgroundPosition' ),
'background-repeat' => array( 'background', 'backgroundRepeat' ),
'background-size' => array( 'background', 'backgroundSize' ),
'border-radius' => array( 'border', 'radius' ),
'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ),
'border-top-right-radius' => array( 'border', 'radius', 'topRight' ),
@ -283,9 +288,10 @@ class WP_Theme_JSON {
*
* Indirect properties are not output directly by `compute_style_properties`,
* but are used elsewhere in the processing of global styles. The indirect
* property is used to validate whether or not a style value is allowed.
* property is used to validate whether a style value is allowed.
*
* @since 6.2.0
* @since 6.6.0 Added background-image properties.
*
* @var array
*/
@ -303,6 +309,9 @@ class WP_Theme_JSON {
array( 'layout', 'contentSize' ),
array( 'layout', 'wideSize' ),
),
'background-image' => array(
array( 'background', 'backgroundImage', 'url' ),
),
);
/**
@ -482,10 +491,17 @@ class WP_Theme_JSON {
* @since 6.2.0 Added `outline`, and `minHeight` properties.
* @since 6.3.0 Added support for `typography.textColumns`.
* @since 6.5.0 Added support for `dimensions.aspectRatio`.
* @since 6.6.0 Added `background` sub properties to top-level only.
*
* @var array
*/
const VALID_STYLES = array(
'background' => array(
'backgroundImage' => 'top',
'backgroundPosition' => 'top',
'backgroundRepeat' => 'top',
'backgroundSize' => 'top',
),
'border' => array(
'color' => null,
'radius' => null,
@ -2051,7 +2067,7 @@ class WP_Theme_JSON {
* @since 5.9.0 Added the `$settings` and `$properties` parameters.
* @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
* @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
* @since 6.6.0 Passing current theme JSON settings to wp_get_typography_font_size_value().
* @since 6.6.0 Pass current theme JSON settings to wp_get_typography_font_size_value(), and process background properties.
*
* @param array $styles Styles to process.
* @param array $settings Theme settings.
@ -2105,6 +2121,12 @@ class WP_Theme_JSON {
}
}
// Processes background styles.
if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
$background_styles = wp_style_engine_get_styles( array( 'background' => $styles['background'] ) );
$value = isset( $background_styles['declarations'][ $css_property ] ) ? $background_styles['declarations'][ $css_property ] : $value;
}
// Skip if empty and not "0" or value represents array of longhand values.
$has_missing_value = empty( $value ) && ! is_numeric( $value );
if ( $has_missing_value || is_array( $value ) ) {
@ -2484,6 +2506,7 @@ class WP_Theme_JSON {
* Gets the CSS rules for a particular block from theme.json.
*
* @since 6.1.0
* @since 6.6.0 Setting a min-height of HTML when root styles have a background gradient or image.
*
* @param array $block_metadata Metadata about the block to get styles for.
*
@ -2495,6 +2518,7 @@ class WP_Theme_JSON {
$selector = $block_metadata['selector'];
$settings = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array();
$feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $node );
$is_root_selector = static::ROOT_BLOCK_SELECTOR === $selector;
// If there are style variations, generate the declarations for them, including any feature selectors the block may have.
$style_variation_declarations = array();
@ -2577,15 +2601,53 @@ class WP_Theme_JSON {
$block_rules = '';
/*
* 1. Separate the declarations that use the general selector
* 1. Bespoke declaration modifiers:
* - 'filter': Separate the declarations that use the general selector
* from the ones using the duotone selector.
* - 'background|background-image': set the html min-height to 100%
* to ensure the background covers the entire viewport.
*/
$declarations_duotone = array();
$declarations_duotone = array();
$should_set_root_min_height = false;
foreach ( $declarations as $index => $declaration ) {
if ( 'filter' === $declaration['name'] ) {
/*
* 'unset' filters happen when a filter is unset
* in the site-editor UI. Because the 'unset' value
* in the user origin overrides the value in the
* theme origin, we can skip rendering anything
* here as no filter needs to be applied anymore.
* So only add declarations to with values other
* than 'unset'.
*/
if ( 'unset' !== $declaration['value'] ) {
$declarations_duotone[] = $declaration;
}
unset( $declarations[ $index ] );
$declarations_duotone[] = $declaration;
}
if ( $is_root_selector && ( 'background-image' === $declaration['name'] || 'background' === $declaration['name'] ) ) {
$should_set_root_min_height = true;
}
}
/*
* If root styles has a background-image or a background (gradient) set,
* set the min-height to '100%'. Minus `--wp-admin--admin-bar--height` for logged-in view.
* Setting the CSS rule on the HTML tag ensures background gradients and images behave similarly,
* and matches the behavior of the site editor.
*/
if ( $should_set_root_min_height ) {
$block_rules .= static::to_ruleset(
'html',
array(
array(
'name' => 'min-height',
'value' => 'calc(100% - var(--wp-admin--admin-bar--height, 0px))',
),
)
);
}
// Update declarations if there are separators with only background color defined.
@ -2603,7 +2665,7 @@ class WP_Theme_JSON {
// 4. Generate Layout block gap styles.
if (
static::ROOT_BLOCK_SELECTOR !== $selector &&
! $is_root_selector &&
! empty( $block_metadata['name'] )
) {
$block_rules .= $this->get_layout_styles( $block_metadata );

2
wp-includes/version.php
View File

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