WordPress.org
Get WordPress

Make WordPress Core

Changeset 58222


Ignore:
Timestamp:
05/28/2024 06:04:37 AM (21 months ago)
Author:
noisysocks
Message:

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

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.

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/block-supports/background.php

    r57365 r58222  
    4242 * @since 6.4.0
    4343 * @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output.
     44 * @since 6.6.0 Removed requirement for `backgroundImage.source`. A file/url is the default.
     45 *
    4446 * @access private
    4547 *
    … …  
    5557    if (
    5658        ! $has_background_image_support ||
    57         wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' )
     59        wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' ) ||
     60        ! isset( $block_attributes['style']['background'] )
    5861    ) {
    5962        return $block_content;
    6063    }
    6164
    62     $background_image_source = isset( $block_attributes['style']['background']['backgroundImage']['source'] )
    63         ? $block_attributes['style']['background']['backgroundImage']['source']
    64         : null;
    65     $background_image_url    = isset( $block_attributes['style']['background']['backgroundImage']['url'] )
    66         ? $block_attributes['style']['background']['backgroundImage']['url']
    67         : null;
     65    $background_styles                    = array();
     66    $background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array();
    6867
    69     if ( ! $background_image_source && ! $background_image_url ) {
    70         return $block_content;
    71     }
    72 
    73     $background_size     = isset( $block_attributes['style']['background']['backgroundSize'] )
    74         ? $block_attributes['style']['background']['backgroundSize']
    75         : 'cover';
    76     $background_position = isset( $block_attributes['style']['background']['backgroundPosition'] )
    77         ? $block_attributes['style']['background']['backgroundPosition']
    78         : null;
    79     $background_repeat   = isset( $block_attributes['style']['background']['backgroundRepeat'] )
    80         ? $block_attributes['style']['background']['backgroundRepeat']
    81         : null;
    82 
    83     $background_block_styles = array();
    84 
    85     if (
    86         'file' === $background_image_source &&
    87         $background_image_url
    88     ) {
    89         // Set file based background URL.
    90         $background_block_styles['backgroundImage']['url'] = $background_image_url;
    91         // Only output the background size and repeat when an image url is set.
    92         $background_block_styles['backgroundSize']     = $background_size;
    93         $background_block_styles['backgroundRepeat']   = $background_repeat;
    94         $background_block_styles['backgroundPosition'] = $background_position;
     68    if ( ! empty( $background_styles['backgroundImage'] ) ) {
     69        $background_styles['backgroundSize']     = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover';
     70        $background_styles['backgroundPosition'] = isset( $block_attributes['style']['background']['backgroundPosition'] ) ? $block_attributes['style']['background']['backgroundPosition'] : null;
     71        $background_styles['backgroundRepeat']   = isset( $block_attributes['style']['background']['backgroundRepeat'] ) ? $block_attributes['style']['background']['backgroundRepeat'] : null;
    9572
    9673        // If the background size is set to `contain` and no position is set, set the position to `center`.
    97         if ( 'contain' === $background_size && ! isset( $background_position ) ) {
    98             $background_block_styles['backgroundPosition'] = 'center';
     74        if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {
     75            $background_styles['backgroundPosition'] = 'center';
    9976        }
    10077    }
    10178
    102     $styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) );
     79    $styles = wp_style_engine_get_styles( array( 'background' => $background_styles ) );
    10380
    10481    if ( ! empty( $styles['css'] ) ) {

  • trunk/src/wp-includes/class-wp-theme-json.php

    r58171 r58222  
    214214     * @since 6.4.0 Added `writing-mode` property.
    215215     * @since 6.5.0 Added `aspect-ratio` property.
     216     * @since 6.6.0 Added `background-[image|position|repeat|size]` properties.
    216217     *
    217218     * @var array
    … …  
    221222        'background'                        => array( 'color', 'gradient' ),
    222223        'background-color'                  => array( 'color', 'background' ),
     224        'background-image'                  => array( 'background', 'backgroundImage' ),
     225        'background-position'               => array( 'background', 'backgroundPosition' ),
     226        'background-repeat'                 => array( 'background', 'backgroundRepeat' ),
     227        'background-size'                   => array( 'background', 'backgroundSize' ),
    223228        'border-radius'                     => array( 'border', 'radius' ),
    224229        'border-top-left-radius'            => array( 'border', 'radius', 'topLeft' ),
    … …  
    284289     * Indirect properties are not output directly by `compute_style_properties`,
    285290     * but are used elsewhere in the processing of global styles. The indirect
    286      * property is used to validate whether or not a style value is allowed.
     291     * property is used to validate whether a style value is allowed.
    287292     *
    288293     * @since 6.2.0
     294     * @since 6.6.0 Added background-image properties.
    289295     *
    290296     * @var array
    … …  
    303309            array( 'layout', 'contentSize' ),
    304310            array( 'layout', 'wideSize' ),
     311        ),
     312        'background-image' => array(
     313            array( 'background', 'backgroundImage', 'url' ),
    305314        ),
    306315    );
    … …  
    483492     * @since 6.3.0 Added support for `typography.textColumns`.
    484493     * @since 6.5.0 Added support for `dimensions.aspectRatio`.
     494     * @since 6.6.0 Added `background` sub properties to top-level only.
    485495     *
    486496     * @var array
    487497     */
    488498    const VALID_STYLES = array(
     499        'background' => array(
     500            'backgroundImage'    => 'top',
     501            'backgroundPosition' => 'top',
     502            'backgroundRepeat'   => 'top',
     503            'backgroundSize'     => 'top',
     504        ),
    489505        'border'     => array(
    490506            'color'  => null,
    … …  
    20522068     * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
    20532069     * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
    2054      * @since 6.6.0 Passing current theme JSON settings to wp_get_typography_font_size_value().
     2070     * @since 6.6.0 Pass current theme JSON settings to wp_get_typography_font_size_value(), and process background properties.
    20552071     *
    20562072     * @param array   $styles Styles to process.
    … …  
    21042120                    continue;
    21052121                }
     2122            }
     2123
     2124            // Processes background styles.
     2125            if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
     2126                $background_styles = wp_style_engine_get_styles( array( 'background' => $styles['background'] ) );
     2127                $value             = isset( $background_styles['declarations'][ $css_property ] ) ? $background_styles['declarations'][ $css_property ] : $value;
    21062128            }
    21072129
    … …  
    24852507     *
    24862508     * @since 6.1.0
     2509     * @since 6.6.0 Setting a min-height of HTML when root styles have a background gradient or image.
    24872510     *
    24882511     * @param array $block_metadata Metadata about the block to get styles for.
    … …  
    24962519        $settings             = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array();
    24972520        $feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $node );
     2521        $is_root_selector     = static::ROOT_BLOCK_SELECTOR === $selector;
    24982522
    24992523        // If there are style variations, generate the declarations for them, including any feature selectors the block may have.
    … …  
    25782602
    25792603        /*
    2580          * 1. Separate the declarations that use the general selector
     2604         * 1. Bespoke declaration modifiers:
     2605         * - 'filter': Separate the declarations that use the general selector
    25812606         * from the ones using the duotone selector.
     2607         * - 'background|background-image': set the html min-height to 100%
     2608         * to ensure the background covers the entire viewport.
    25822609         */
    2583         $declarations_duotone = array();
     2610        $declarations_duotone       = array();
     2611        $should_set_root_min_height = false;
     2612
    25842613        foreach ( $declarations as $index => $declaration ) {
    25852614            if ( 'filter' === $declaration['name'] ) {
     2615                /*
     2616                 * 'unset' filters happen when a filter is unset
     2617                 * in the site-editor UI. Because the 'unset' value
     2618                 * in the user origin overrides the value in the
     2619                 * theme origin, we can skip rendering anything
     2620                 * here as no filter needs to be applied anymore.
     2621                 * So only add declarations to with values other
     2622                 * than 'unset'.
     2623                 */
     2624                if ( 'unset' !== $declaration['value'] ) {
     2625                    $declarations_duotone[] = $declaration;
     2626                }
    25862627                unset( $declarations[ $index ] );
    2587                 $declarations_duotone[] = $declaration;
    2588             }
     2628            }
     2629
     2630            if ( $is_root_selector && ( 'background-image' === $declaration['name'] || 'background' === $declaration['name'] ) ) {
     2631                $should_set_root_min_height = true;
     2632            }
     2633        }
     2634
     2635        /*
     2636         * If root styles has a background-image or a background (gradient) set,
     2637         * set the min-height to '100%'. Minus `--wp-admin--admin-bar--height` for logged-in view.
     2638         * Setting the CSS rule on the HTML tag ensures background gradients and images behave similarly,
     2639         * and matches the behavior of the site editor.
     2640         */
     2641        if ( $should_set_root_min_height ) {
     2642            $block_rules .= static::to_ruleset(
     2643                'html',
     2644                array(
     2645                    array(
     2646                        'name'  => 'min-height',
     2647                        'value' => 'calc(100% - var(--wp-admin--admin-bar--height, 0px))',
     2648                    ),
     2649                )
     2650            );
    25892651        }
    25902652
    … …  
    26042666        // 4. Generate Layout block gap styles.
    26052667        if (
    2606             static::ROOT_BLOCK_SELECTOR !== $selector &&
     2668            ! $is_root_selector &&
    26072669            ! empty( $block_metadata['name'] )
    26082670        ) {

  • trunk/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php

    r58181 r58222  
    6969     * @ticket 59357
    7070     * @ticket 60175
     71     * @ticket 61123
    7172     *
    7273     * @covers ::wp_render_background_support
    … …  
    133134                'background_style'    => array(
    134135                    'backgroundImage' => array(
    135                         'url'    => 'https://example.com/image.jpg',
    136                         'source' => 'file',
     136                        'url' => 'https://example.com/image.jpg',
    137137                    ),
    138138                ),
    … …  
    148148                'background_style'    => array(
    149149                    'backgroundImage'  => array(
    150                         'url'    => 'https://example.com/image.jpg',
    151                         'source' => 'file',
     150                        'url' => 'https://example.com/image.jpg',
    152151                    ),
    153152                    'backgroundRepeat' => 'no-repeat',
    … …  
    165164                'background_style'    => array(
    166165                    'backgroundImage' => array(
    167                         'url'    => 'https://example.com/image.jpg',
    168                         'source' => 'file',
     166                        'url' => 'https://example.com/image.jpg',
    169167                    ),
    170168                ),
    … …  
    180178                'background_style'    => array(
    181179                    'backgroundImage' => array(
    182                         'url'    => 'https://example.com/image.jpg',
    183                         'source' => 'file',
     180                        'url' => 'https://example.com/image.jpg',
    184181                    ),
    185182                ),
    … …  
    195192                'background_style'    => array(
    196193                    'backgroundImage' => array(
    197                         'url'    => 'https://example.com/image.jpg',
    198                         'source' => 'file',
     194                        'url' => 'https://example.com/image.jpg',
    199195                    ),
    200196                ),

  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r58173 r58222  
    49864986
    49874987    /**
     4988     * Tests that theme background image styles are correctly generated.
     4989     *
     4990     * @ticket 61123
     4991     */
     4992    public function test_get_top_level_background_image_styles() {
     4993        $theme_json = new WP_Theme_JSON(
     4994            array(
     4995                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     4996                'styles'  => array(
     4997                    'background' => array(
     4998                        'backgroundImage'    => array(
     4999                            'url' => 'http://example.org/image.png',
     5000                        ),
     5001                        'backgroundSize'     => 'contain',
     5002                        'backgroundRepeat'   => 'no-repeat',
     5003                        'backgroundPosition' => 'center center',
     5004                    ),
     5005                    'blocks'     => array(
     5006                        'core/paragraph' => array(
     5007                            'background' => array(
     5008                                'backgroundImage'    => array(
     5009                                    'url' => 'http://example.org/image.png',
     5010                                ),
     5011                                'backgroundSize'     => 'cover',
     5012                                'backgroundRepeat'   => 'no-repeat',
     5013                                'backgroundPosition' => 'center center',
     5014                            ),
     5015                        ),
     5016                    ),
     5017                    'elements'   => array(
     5018                        'button' => array(
     5019                            'background' => array(
     5020                                'backgroundImage'    => array(
     5021                                    'url' => 'http://example.org/image.png',
     5022                                ),
     5023                                'backgroundSize'     => 'cover',
     5024                                'backgroundRepeat'   => 'no-repeat',
     5025                                'backgroundPosition' => 'center center',
     5026                            ),
     5027                        ),
     5028                    ),
     5029                ),
     5030            )
     5031        );
     5032
     5033        $expected_styles = "body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
     5034        $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background styles type does not match expectations' );
     5035
     5036        $theme_json = new WP_Theme_JSON(
     5037            array(
     5038                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     5039                'styles'  => array(
     5040                    'background' => array(
     5041                        'backgroundImage'    => "url('http://example.org/image.png')",
     5042                        'backgroundSize'     => 'contain',
     5043                        'backgroundRepeat'   => 'no-repeat',
     5044                        'backgroundPosition' => 'center center',
     5045                    ),
     5046                ),
     5047            )
     5048        );
     5049
     5050        $expected_styles = "body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
     5051        $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background image as string type does not match expectations' );
     5052    }
     5053
     5054    /**
    49885055     * @ticket 57536
    49895056     */
Note: See TracChangeset for help on using the changeset viewer.