WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
08/26/2024 05:38:05 AM (17 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

File:
1 edited

Legend:

Unmodified
Added
Removed

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