WordPress.org
Get WordPress

Make WordPress Core

Changeset 58936


Ignore:
Timestamp:
08/26/2024 05:38:05 AM (7 months ago)
Author:
ramonopoly
Message:

Background images: resolve theme.json dynamic ref values and ensure appropriate style default values

The commit syncs the following changes from Gutenberg:

  • Background images: add support for theme.json ref value resolution gutenberg#64128
  • Background images: ensure appropriate default values gutenberg#64192
  • Background image: ensure consistency with defaults and fix reset/remove functionality gutenberg#64328

These changes brings consistency to the default background image styles WordPress applies to user uploaded images, and adds support for ref resolution to "background" style properties.

Props andrewserong, aaronrobertshaw.

Fixes #61858

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

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

    r58834 r58936  
    7676        // If the background size is set to `contain` and no position is set, set the position to `center`.
    7777        if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {
    78             $background_styles['backgroundPosition'] = 'center';
     78            $background_styles['backgroundPosition'] = '50% 50%';
    7979        }
    8080    }

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

    r58896 r58936  
    22962296     *     array(
    22972297     *       'name'  => 'property_name',
    2298      *       'value' => 'property_value,
     2298     *       'value' => 'property_value',
    22992299     *     )
    23002300     *
    … …  
    23042304     * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
    23052305     * @since 6.6.0 Pass current theme JSON settings to wp_get_typography_font_size_value(), and process background properties.
     2306     * @since 6.7.0 `ref` resolution of background properties, and assigning custom default values.
    23062307     *
    23072308     * @param array   $styles Styles to process.
    … …  
    23572358            }
    23582359
    2359             // Processes background styles.
    2360             if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
    2361                 $background_styles = wp_style_engine_get_styles( array( 'background' => $styles['background'] ) );
    2362                 $value             = isset( $background_styles['declarations'][ $css_property ] ) ? $background_styles['declarations'][ $css_property ] : $value;
     2360            /*
     2361             * Processes background image styles.
     2362             * If the value is a URL, it will be converted to a CSS `url()` value.
     2363             * For uploaded image (images with a database ID), apply size and position defaults,
     2364             * equal to those applied in block supports in lib/background.php.
     2365             */
     2366            if ( 'background-image' === $css_property && ! empty( $value ) ) {
     2367                $background_styles = wp_style_engine_get_styles(
     2368                    array( 'background' => array( 'backgroundImage' => $value ) )
     2369                );
     2370                $value             = $background_styles['declarations'][ $css_property ];
     2371            }
     2372            if ( empty( $value ) && static::ROOT_BLOCK_SELECTOR !== $selector && ! empty( $styles['background']['backgroundImage']['id'] ) ) {
     2373                if ( 'background-size' === $css_property ) {
     2374                    $value = 'cover';
     2375                }
     2376                // If the background size is set to `contain` and no position is set, set the position to `center`.
     2377                if ( 'background-position' === $css_property ) {
     2378                    $background_size = $styles['background']['backgroundSize'] ?? null;
     2379                    $value           = 'contain' === $background_size ? '50% 50%' : null;
     2380                }
    23632381            }
    23642382
    … …  
    24222440     *              This is already done by the sanitize method,
    24232441     *              so every property will be in the standard form.
     2442     * @since 6.7.0 Added support for background image refs.
    24242443     *
    24252444     * @param array $styles Styles subtree.
    … …  
    24382457        /*
    24392458         * This converts references to a path to the value at that path
    2440          * where the values is an array with a "ref" key, pointing to a path.
     2459         * where the value is an array with a "ref" key, pointing to a path.
    24412460         * For example: { "ref": "style.color.background" } => "#fff".
     2461         * In the case of backgroundImage, if both a ref and a URL are present in the value,
     2462         * the URL takes precedence and the ref is ignored.
    24422463         */
    24432464        if ( is_array( $value ) && isset( $value['ref'] ) ) {
    24442465            $value_path = explode( '.', $value['ref'] );
    24452466            $ref_value  = _wp_array_get( $theme_json, $value_path );
     2467            // Background Image refs can refer to a string or an array containing a URL string.
     2468            $ref_value_url = $ref_value['url'] ?? null;
    24462469            // Only use the ref value if we find anything.
    2447             if ( ! empty( $ref_value ) && is_string( $ref_value ) ) {
     2470            if ( ! empty( $ref_value ) && ( is_string( $ref_value ) || is_string( $ref_value_url ) ) ) {
    24482471                $value = $ref_value;
    24492472            }
    … …  
    30843107     * @since 5.8.0
    30853108     * @since 5.9.0 Duotone preset also has origins.
     3109     * @since 6.7.0 Replace background image objects during merge.
    30863110     *
    30873111     * @param WP_Theme_JSON $incoming Data to merge.
    … …  
    32053229                    _wp_array_set( $this->theme_json, $path, $content );
    32063230                }
     3231            }
     3232        }
     3233
     3234        /*
     3235         * Style values are merged at the leaf level, however
     3236         * some values provide exceptions, namely style values that are
     3237         * objects and represent unique definitions for the style.
     3238         */
     3239        $style_nodes = static::get_styles_block_nodes();
     3240        foreach ( $style_nodes as $style_node ) {
     3241            $path = $style_node['path'];
     3242            /*
     3243             * Background image styles should be replaced, not merged,
     3244             * as they themselves are specific object definitions for the style.
     3245             */
     3246            $background_image_path = array_merge( $path, static::PROPERTIES_METADATA['background-image'] );
     3247            $content               = _wp_array_get( $incoming_data, $background_image_path, null );
     3248            if ( isset( $content ) ) {
     3249                _wp_array_set( $this->theme_json, $background_image_path, $content );
    32073250            }
    32083251        }

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

    r58834 r58936  
    7171     * @ticket 61123
    7272     * @ticket 61720
     73     * @ticket 61858
    7374     *
    7475     * @covers ::wp_render_background_support
    … …  
    155156                    'backgroundAttachment' => 'fixed',
    156157                ),
    157                 'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;background-attachment:fixed;">Content</div>',
     158                'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;background-attachment:fixed;">Content</div>',
    158159                'wrapper'             => '<div>Content</div>',
    159160            ),

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

    r58896 r58936  
    23332333        $actual = $defaults->get_raw_data();
    23342334        $this->assertSameSetsWithIndex( $expected, $actual );
     2335    }
     2336
     2337    /**
     2338     * @ticket 61858
     2339     */
     2340    public function test_merge_incoming_background_styles() {
     2341        $theme_json = new WP_Theme_JSON(
     2342            array(
     2343                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     2344                'styles'  => array(
     2345                    'background' => array(
     2346                        'backgroundImage' => array(
     2347                            'url' => 'http://example.org/quote.png',
     2348                        ),
     2349                        'backgroundSize'  => 'cover',
     2350                    ),
     2351                    'blocks'     => array(
     2352                        'core/group' => array(
     2353                            'background' => array(
     2354                                'backgroundImage'      => array(
     2355                                    'ref' => 'styles.blocks.core/verse.background.backgroundImage',
     2356                                ),
     2357                                'backgroundAttachment' => 'fixed',
     2358                            ),
     2359                        ),
     2360                        'core/quote' => array(
     2361                            'background' => array(
     2362                                'backgroundImage'      => array(
     2363                                    'url' => 'http://example.org/quote.png',
     2364                                ),
     2365                                'backgroundAttachment' => array(
     2366                                    'ref' => 'styles.blocks.core/group.background.backgroundAttachment',
     2367                                ),
     2368                            ),
     2369                        ),
     2370                    ),
     2371                ),
     2372            )
     2373        );
     2374
     2375        $update_background_image_styles = array(
     2376            'version' => WP_Theme_JSON::LATEST_SCHEMA,
     2377            'styles'  => array(
     2378                'background' => array(
     2379                    'backgroundSize' => 'contain',
     2380                ),
     2381                'blocks'     => array(
     2382                    'core/group' => array(
     2383                        'background' => array(
     2384                            'backgroundImage' => array(
     2385                                'url' => 'http://example.org/group.png',
     2386                            ),
     2387                        ),
     2388                    ),
     2389                    'core/quote' => array(
     2390                        'background' => array(
     2391                            'backgroundAttachment' => 'fixed',
     2392                        ),
     2393                    ),
     2394                    'core/verse' => array(
     2395                        'background' => array(
     2396                            'backgroundImage' => array(
     2397                                'ref' => 'styles.blocks.core/group.background.backgroundImage',
     2398                            ),
     2399                        ),
     2400                    ),
     2401                ),
     2402            ),
     2403        );
     2404        $expected                       = array(
     2405            'version' => WP_Theme_JSON::LATEST_SCHEMA,
     2406            'styles'  => array(
     2407                'background' => array(
     2408                    'backgroundImage' => array(
     2409                        'url' => 'http://example.org/quote.png',
     2410                    ),
     2411                    'backgroundSize'  => 'contain',
     2412                ),
     2413                'blocks'     => array(
     2414                    'core/group' => array(
     2415                        'background' => array(
     2416                            'backgroundImage'      => array(
     2417                                'url' => 'http://example.org/group.png',
     2418                            ),
     2419                            'backgroundAttachment' => 'fixed',
     2420                        ),
     2421                    ),
     2422                    'core/quote' => array(
     2423                        'background' => array(
     2424                            'backgroundImage'      => array(
     2425                                'url' => 'http://example.org/quote.png',
     2426                            ),
     2427                            'backgroundAttachment' => 'fixed',
     2428                        ),
     2429                    ),
     2430                    'core/verse' => array(
     2431                        'background' => array(
     2432                            'backgroundImage' => array(
     2433                                'ref' => 'styles.blocks.core/group.background.backgroundImage',
     2434                            ),
     2435                        ),
     2436                    ),
     2437                ),
     2438            ),
     2439        );
     2440        $theme_json->merge( new WP_Theme_JSON( $update_background_image_styles ) );
     2441        $actual = $theme_json->get_raw_data();
     2442
     2443        $this->assertEqualSetsWithIndex( $expected, $actual );
    23352444    }
    23362445
    … …  
    50075116
    50085117    /**
    5009      * Tests that theme background image styles are correctly generated.
     5118     * Tests that theme background image styles are correctly generated,
     5119     * and that default background size of "cover" isn't
     5120     * applied (it's only applied to blocks).
    50105121     *
    50115122     * @ticket 61123
    … …  
    50135124     * @ticket 61720
    50145125     * @ticket 61704
     5126     * @ticket 61858
    50155127     */
    50165128    public function test_get_top_level_background_image_styles() {
    … …  
    50235135                            'url' => 'http://example.org/image.png',
    50245136                        ),
    5025                         'backgroundSize'       => 'contain',
    50265137                        'backgroundRepeat'     => 'no-repeat',
    50275138                        'backgroundPosition'   => 'center center',
    … …  
    50375148        );
    50385149
    5039         $expected_styles = "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;background-attachment: fixed;}";
     5150        $expected_styles = "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-attachment: fixed;}";
    50405151        $this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_stylesheet()" with top-level background styles type do not match expectations' );
    50415152
    … …  
    50605171
    50615172    /**
     5173     * Block-level global background image styles.
     5174     *
    50625175     * @ticket 61588
    50635176     * @ticket 61720
     5177     * @ticket 61858
    50645178     */
    50655179    public function test_get_block_background_image_styles() {
    … …  
    50725186                            'background' => array(
    50735187                                'backgroundImage'      => "url('http://example.org/group.png')",
    5074                                 'backgroundSize'       => 'cover',
    50755188                                'backgroundRepeat'     => 'no-repeat',
    50765189                                'backgroundPosition'   => 'center center',
    … …  
    50805193                        'core/quote' => array(
    50815194                            'background' => array(
    5082                                 'backgroundImage'    => array(
     5195                                'backgroundImage' => array(
    50835196                                    'url' => 'http://example.org/quote.png',
    5084                                 ),
    5085                                 'backgroundSize'     => 'cover',
    5086                                 'backgroundRepeat'   => 'no-repeat',
    5087                                 'backgroundPosition' => 'center center',
    5088                             ),
    5089                         ),
    5090                     ),
    5091                 ),
    5092             )
    5093         );
     5197                                    'id'  => 321,
     5198                                ),
     5199                                'backgroundSize'  => 'contain',
     5200                            ),
     5201                        ),
     5202                        'core/verse' => array(
     5203                            'background' => array(
     5204                                'backgroundImage' => array(
     5205                                    'url' => 'http://example.org/verse.png',
     5206                                    'id'  => 123,
     5207                                ),
     5208                            ),
     5209                        ),
     5210                    ),
     5211                ),
     5212            )
     5213        );
     5214
     5215        $group_node = array(
     5216            'name'      => 'core/group',
     5217            'path'      => array( 'styles', 'blocks', 'core/group' ),
     5218            'selector'  => '.wp-block-group',
     5219            'selectors' => array(
     5220                'root' => '.wp-block-group',
     5221            ),
     5222        );
     5223
     5224        $group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-attachment: fixed;}";
     5225        $this->assertSame( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with core/group background styles as string type do not match expectations.' );
    50945226
    50955227        $quote_node = array(
    … …  
    51025234        );
    51035235
    5104         $quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: center center;background-repeat: no-repeat;background-size: cover;}";
    5105         $this->assertSame( $quote_styles, $theme_json->get_styles_for_block( $quote_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles do not match expectations' );
    5106 
    5107         $group_node = array(
    5108             'name'      => 'core/group',
    5109             'path'      => array( 'styles', 'blocks', 'core/group' ),
    5110             'selector'  => '.wp-block-group',
     5236        $quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: 50% 50%;background-size: contain;}";
     5237        $this->assertSame( $quote_styles, $theme_json->get_styles_for_block( $quote_node ), 'Styles returned from "::get_styles_for_block()" with core/quote default background styles do not match expectations.' );
     5238
     5239        $verse_node = array(
     5240            'name'      => 'core/verse',
     5241            'path'      => array( 'styles', 'blocks', 'core/verse' ),
     5242            'selector'  => '.wp-block-verse',
    51115243            'selectors' => array(
    5112                 'root' => '.wp-block-group',
    5113             ),
    5114         );
    5115 
    5116         $group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}";
    5117         $this->assertSame( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles as string type do not match expectations' );
     5244                'root' => '.wp-block-verse',
     5245            ),
     5246        );
     5247
     5248        $verse_styles = ":root :where(.wp-block-verse){background-image: url('http://example.org/verse.png');background-size: cover;}";
     5249        $this->assertSame( $verse_styles, $theme_json->get_styles_for_block( $verse_node ), 'Styles returned from "::get_styles_for_block()" with default core/verse background styles as string type do not match expectations.' );
     5250    }
     5251
     5252    /**
     5253     * Testing background dynamic properties in theme.json.
     5254     *
     5255     * @ticket 61858
     5256     */
     5257    public function test_get_resolved_background_image_styles() {
     5258        $theme_json = new WP_Theme_JSON(
     5259            array(
     5260                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     5261                'styles'  => array(
     5262                    'background' => array(
     5263                        'backgroundImage'      => array(
     5264                            'url' => 'http://example.org/top.png',
     5265                        ),
     5266                        'backgroundSize'       => 'contain',
     5267                        'backgroundRepeat'     => 'repeat',
     5268                        'backgroundPosition'   => '10% 20%',
     5269                        'backgroundAttachment' => 'scroll',
     5270                    ),
     5271                    'blocks'     => array(
     5272                        'core/group'        => array(
     5273                            'background' => array(
     5274                                'backgroundImage' => array(
     5275                                    'id'  => 123,
     5276                                    'url' => 'http://example.org/group.png',
     5277                                ),
     5278                            ),
     5279                        ),
     5280                        'core/post-content' => array(
     5281                            'background' => array(
     5282                                'backgroundImage'      => array(
     5283                                    'ref' => 'styles.background.backgroundImage',
     5284                                ),
     5285                                'backgroundSize'       => array(
     5286                                    'ref' => 'styles.background.backgroundSize',
     5287                                ),
     5288                                'backgroundRepeat'     => array(
     5289                                    'ref' => 'styles.background.backgroundRepeat',
     5290                                ),
     5291                                'backgroundPosition'   => array(
     5292                                    'ref' => 'styles.background.backgroundPosition',
     5293                                ),
     5294                                'backgroundAttachment' => array(
     5295                                    'ref' => 'styles.background.backgroundAttachment',
     5296                                ),
     5297                            ),
     5298                        ),
     5299                    ),
     5300                ),
     5301            )
     5302        );
     5303
     5304        $expected = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/top.png');background-position: 10% 20%;background-repeat: repeat;background-size: contain;background-attachment: scroll;}:root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-size: cover;}:root :where(.wp-block-post-content){background-image: url('http://example.org/top.png');background-position: 10% 20%;background-repeat: repeat;background-size: contain;background-attachment: scroll;}";
     5305        $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
    51185306    }
    51195307
Note: See TracChangeset for help on using the changeset viewer.