WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/08/2021 07:18:39 PM (3 years ago)
Author:
jorgefilipecosta
Message:

Update theme.json classes for WordPress 5.9.

This commit ports to core the changes to the classes that deal with theme.json code.

See #54336.
Props oandregal, spacedmonkey, noisysocks, hellofromtonya, youknowriad.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r51443 r52049  
    1616    /**
    1717     * @ticket 52991
     18     * @ticket 54336
    1819     */
    1920    public function test_get_settings() {
    … …  
    2425                    'color'       => array(
    2526                        'custom' => false,
     27                    ),
     28                    'layout'      => array(
     29                        'contentSize' => 'value',
     30                        'invalid/key' => 'value',
    2631                    ),
    2732                    'invalid/key' => 'value',
    … …  
    5358                'custom' => false,
    5459            ),
     60            'layout' => array(
     61                'contentSize' => 'value',
     62            ),
    5563            'blocks' => array(
    5664                'core/group' => array(
    … …  
    6270        );
    6371
    64         $this->assertSameSetsWithIndex( $expected, $actual );
     72        $this->assertEqualSetsWithIndex( $expected, $actual );
    6573    }
    6674
    … …  
    194202
    195203    /**
     204     * @ticket 54336
     205     */
     206    public function test_get_stylesheet_support_for_shorthand_and_longhand_values() {
     207        $theme_json = new WP_Theme_JSON(
     208            array(
     209                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     210                'styles'  => array(
     211                    'blocks' => array(
     212                        'core/group' => array(
     213                            'border'  => array(
     214                                'radius' => '10px',
     215                            ),
     216                            'spacing' => array(
     217                                'padding' => '24px',
     218                                'margin'  => '1em',
     219                            ),
     220                        ),
     221                        'core/image' => array(
     222                            'border'  => array(
     223                                'radius' => array(
     224                                    'topLeft'     => '10px',
     225                                    'bottomRight' => '1em',
     226                                ),
     227                            ),
     228                            'spacing' => array(
     229                                'padding' => array(
     230                                    'top' => '15px',
     231                                ),
     232                                'margin'  => array(
     233                                    'bottom' => '30px',
     234                                ),
     235                            ),
     236                        ),
     237                    ),
     238                ),
     239            )
     240        );
     241
     242        $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; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}';
     243        $this->assertEquals( $styles, $theme_json->get_stylesheet() );
     244        $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
     245    }
     246
     247    /**
     248     * @ticket 54336
     249     */
     250    public function test_get_stylesheet_skips_disabled_protected_properties() {
     251        $theme_json = new WP_Theme_JSON(
     252            array(
     253                'version'  => WP_Theme_JSON::LATEST_SCHEMA,
     254                'settings' => array(
     255                    'spacing' => array(
     256                        'blockGap' => null,
     257                    ),
     258                ),
     259                'styles'   => array(
     260                    'spacing' => array(
     261                        'blockGap' => '1em',
     262                    ),
     263                    'blocks'  => array(
     264                        'core/columns' => array(
     265                            'spacing' => array(
     266                                'blockGap' => '24px',
     267                            ),
     268                        ),
     269                    ),
     270                ),
     271            )
     272        );
     273
     274        $expected = '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; }';
     275        $this->assertEquals( $expected, $theme_json->get_stylesheet() );
     276        $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
     277    }
     278
     279    /**
     280     * @ticket 54336
     281     */
     282    public function test_get_stylesheet_renders_enabled_protected_properties() {
     283        $theme_json = new WP_Theme_JSON(
     284            array(
     285                'version'  => WP_Theme_JSON::LATEST_SCHEMA,
     286                'settings' => array(
     287                    'spacing' => array(
     288                        'blockGap' => true,
     289                    ),
     290                ),
     291                'styles'   => array(
     292                    'spacing' => array(
     293                        'blockGap' => '1em',
     294                    ),
     295                    'blocks'  => array(
     296                        'core/columns' => array(
     297                            'spacing' => array(
     298                                'blockGap' => '24px',
     299                            ),
     300                        ),
     301                    ),
     302                ),
     303            )
     304        );
     305
     306        $expected = 'body{--wp--style--block-gap: 1em;}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; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }.wp-block-columns{--wp--style--block-gap: 24px;}';
     307        $this->assertEquals( $expected, $theme_json->get_stylesheet() );
     308        $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
     309    }
     310
     311    /**
    196312     * @ticket 53175
     313     * @ticket 54336
    197314     */
    198315    public function test_get_stylesheet() {
    … …  
    221338                            ),
    222339                        ),
     340                    ),
     341                    'spacing'    => array(
     342                        'blockGap' => false,
    223343                    ),
    224344                    'misc'       => 'value',
    … …  
    251371                    'blocks'   => array(
    252372                        'core/group'     => array(
     373                            'border'   => array(
     374                                'radius' => '10px',
     375                            ),
    253376                            'elements' => array(
    254377                                'link' => array(
    … …  
    259382                            ),
    260383                            'spacing'  => array(
    261                                 'padding' => array(
    262                                     'top'    => '12px',
    263                                     'bottom' => '24px',
    264                                 ),
     384                                'padding' => '24px',
    265385                            ),
    266386                        ),
    … …  
    294414                            ),
    295415                        ),
     416                        'core/image'     => array(
     417                            'border'  => array(
     418                                'radius' => array(
     419                                    'topLeft'     => '10px',
     420                                    'bottomRight' => '1em',
     421                                ),
     422                            ),
     423                            'spacing' => array(
     424                                'margin' => array(
     425                                    'bottom' => '30px',
     426                                ),
     427                            ),
     428                        ),
    296429                    ),
    297430                ),
    … …  
    300433        );
    301434
    302         $this->assertSame(
    303             'body{--wp--preset--color--grey: grey;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}',
    304             $theme_json->get_stylesheet()
    305         );
    306         $this->assertSame(
    307             'body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}',
    308             $theme_json->get_stylesheet( 'block_styles' )
    309         );
    310         $this->assertSame(
    311             'body{--wp--preset--color--grey: grey;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}',
    312             $theme_json->get_stylesheet( 'css_variables' )
    313         );
     435        $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
     436        $styles    = 'body{color: var(--wp--preset--color--grey);}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; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}';
     437        $presets   = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}';
     438        $all       = $variables . $styles . $presets;
     439        $this->assertEquals( $all, $theme_json->get_stylesheet() );
     440        $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
     441        $this->assertEquals( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
     442        $this->assertEquals( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
    314443    }
    315444
    316445    /**
    317446     * @ticket 52991
     447     * @ticket 54336
    318448     */
    319449    public function test_get_stylesheet_preset_classes_work_with_compounded_selectors() {
    … …  
    338468        );
    339469
    340         $this->assertSame(
    341             'h1.has-white-color,h2.has-white-color,h3.has-white-color,h4.has-white-color,h5.has-white-color,h6.has-white-color{color: var(--wp--preset--color--white) !important;}h1.has-white-background-color,h2.has-white-background-color,h3.has-white-background-color,h4.has-white-background-color,h5.has-white-background-color,h6.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}',
    342             $theme_json->get_stylesheet( 'block_styles' )
     470        $this->assertEquals(
     471            'h1.has-white-color,h2.has-white-color,h3.has-white-color,h4.has-white-color,h5.has-white-color,h6.has-white-color{color: var(--wp--preset--color--white) !important;}h1.has-white-background-color,h2.has-white-background-color,h3.has-white-background-color,h4.has-white-background-color,h5.has-white-background-color,h6.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}h1.has-white-border-color,h2.has-white-border-color,h3.has-white-border-color,h4.has-white-border-color,h5.has-white-border-color,h6.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}',
     472            $theme_json->get_stylesheet( array( 'presets' ) )
    343473        );
    344474    }
    … …  
    346476    /**
    347477     * @ticket 53175
     478     * @ticket 54336
    348479     */
    349480    public function test_get_stylesheet_preset_rules_come_after_block_rules() {
    … …  
    377508        );
    378509
    379         $this->assertSame(
    380             '.wp-block-group{--wp--preset--color--grey: grey;}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}',
    381             $theme_json->get_stylesheet()
    382         );
    383         $this->assertSame(
    384             '.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}',
    385             $theme_json->get_stylesheet( 'block_styles' )
    386         );
     510        $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; }.wp-block-group{color: red;}';
     511        $presets   = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}';
     512        $variables = '.wp-block-group{--wp--preset--color--grey: grey;}';
     513        $all       = $variables . $styles . $presets;
     514        $this->assertEquals( $all, $theme_json->get_stylesheet() );
     515        $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
     516        $this->assertEquals( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
     517        $this->assertEquals( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
     518    }
     519
     520    /**
     521     * @ticket 54336
     522     */
     523    public function test_get_stylesheet_generates_proper_classes_from_slugs() {
     524        $theme_json = new WP_Theme_JSON(
     525            array(
     526                'version'  => WP_Theme_JSON::LATEST_SCHEMA,
     527                'settings' => array(
     528                    'color' => array(
     529                        'palette' => array(
     530                            array(
     531                                'slug'  => 'grey',
     532                                'color' => 'grey',
     533                            ),
     534                            array(
     535                                'slug'  => 'dark grey',
     536                                'color' => 'grey',
     537                            ),
     538                            array(
     539                                'slug'  => 'light-grey',
     540                                'color' => 'grey',
     541                            ),
     542                            array(
     543                                'slug'  => 'white2black',
     544                                'color' => 'grey',
     545                            ),
     546                        ),
     547                    ),
     548                ),
     549            )
     550        );
     551
     552        $this->assertEquals(
     553            '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-dark-grey-color{color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-color{color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-color{color: var(--wp--preset--color--white-2-black) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-dark-grey-background-color{background-color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-background-color{background-color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-background-color{background-color: var(--wp--preset--color--white-2-black) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-dark-grey-border-color{border-color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-border-color{border-color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-border-color{border-color: var(--wp--preset--color--white-2-black) !important;}',
     554            $theme_json->get_stylesheet( array( 'presets' ) )
     555        );
     556        $this->assertEquals(
     557            'body{--wp--preset--color--grey: grey;--wp--preset--color--dark-grey: grey;--wp--preset--color--light-grey: grey;--wp--preset--color--white-2-black: grey;}',
     558            $theme_json->get_stylesheet( array( 'variables' ) )
     559        );
     560
    387561    }
    388562
    389563    /**
    390564     * @ticket 53175
     565     * @ticket 54336
    391566     */
    392567    public function test_get_stylesheet_preset_values_are_marked_as_important() {
    … …  
    422597        );
    423598
    424         $this->assertSame(
    425             'body{--wp--preset--color--grey: grey;}p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}',
     599        $this->assertEquals(
     600            'body{--wp--preset--color--grey: grey;}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; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
    426601            $theme_json->get_stylesheet()
    427602        );
    … …  
    430605    /**
    431606     * @ticket 52991
     607     * @ticket 54336
    432608     */
    433609    public function test_merge_incoming_data() {
    … …  
    609785                ),
    610786                'typography' => array(
    611                     'fontSizes' => array(
     787                    'fontSizes'    => array(
    612788                        'theme' => array(
    613789                            array(
    614790                                'slug' => 'fontSize',
    615791                                'size' => 'fontSize',
     792                            ),
     793                        ),
     794                    ),
     795                    'fontFamilies' => array(
     796                        'theme' => array(
     797                            array(
     798                                'slug'       => 'fontFamily',
     799                                'fontFamily' => 'fontFamily',
    616800                            ),
    617801                        ),
    … …  
    670854    /**
    671855     * @ticket 53175
     856     * @ticket 54336
    672857     */
    673858    public function test_merge_incoming_data_empty_presets() {
    … …  
    737922            'settings' => array(
    738923                'color'      => array(
    739                     'duotone'   => array(),
     924                    'duotone'   => array(
     925                        'theme' => array(),
     926                    ),
    740927                    'gradients' => array(
    741928                        'theme' => array(),
    … …  
    761948    /**
    762949     * @ticket 53175
     950     * @ticket 54336
    763951     */
    764952    public function test_merge_incoming_data_null_presets() {
    … …  
    811999                        ),
    8121000                        'spacing'    => array(
    813                             'customMargin' => false,
     1001                            'margin' => false,
    8141002                        ),
    8151003                        'typography' => array(
    816                             'customLineHeight' => false,
     1004                            'lineHeight' => false,
    8171005                        ),
    8181006                    ),
    … …  
    8281016                    'custom'    => false,
    8291017                    'duotone'   => array(
    830                         array(
    831                             'slug'   => 'value',
    832                             'colors' => array( 'red', 'green' ),
     1018                        'theme' => array(
     1019                            array(
     1020                                'slug'   => 'value',
     1021                                'colors' => array( 'red', 'green' ),
     1022                            ),
    8331023                        ),
    8341024                    ),
    … …  
    8511041                ),
    8521042                'spacing'    => array(
    853                     'customMargin' => false,
    854                     'units'        => array( 'px', 'em' ),
     1043                    'margin' => false,
     1044                    'units'  => array( 'px', 'em' ),
    8551045                ),
    8561046                'typography' => array(
    857                     'customLineHeight' => false,
    858                     'fontSizes'        => array(
     1047                    'lineHeight' => false,
     1048                    'fontSizes'  => array(
    8591049                        'theme' => array(
    8601050                            array(
    … …  
    8691059
    8701060        $this->assertEqualSetsWithIndex( $expected, $actual );
     1061    }
     1062
     1063    /**
     1064     * @ticket 54336
     1065     */
     1066    public function test_remove_insecure_properties_removes_unsafe_styles() {
     1067        $actual = WP_Theme_JSON::remove_insecure_properties(
     1068            array(
     1069                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     1070                'styles'  => array(
     1071                    'color'    => array(
     1072                        'gradient' => 'url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PHNjcmlwdD5hbGVydCgnb2snKTwvc2NyaXB0PjxsaW5lYXJHcmFkaWVudCBpZD0nZ3JhZGllbnQnPjxzdG9wIG9mZnNldD0nMTAlJyBzdG9wLWNvbG9yPScjRjAwJy8+PHN0b3Agb2Zmc2V0PSc5MCUnIHN0b3AtY29sb3I9JyNmY2MnLz4gPC9saW5lYXJHcmFkaWVudD48cmVjdCBmaWxsPSd1cmwoI2dyYWRpZW50KScgeD0nMCcgeT0nMCcgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScvPjwvc3ZnPg==\')',
     1073                        'text'     => 'var:preset|color|dark-red',
     1074                    ),
     1075                    'elements' => array(
     1076                        'link' => array(
     1077                            'color' => array(
     1078                                'gradient'   => 'url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PHNjcmlwdD5hbGVydCgnb2snKTwvc2NyaXB0PjxsaW5lYXJHcmFkaWVudCBpZD0nZ3JhZGllbnQnPjxzdG9wIG9mZnNldD0nMTAlJyBzdG9wLWNvbG9yPScjRjAwJy8+PHN0b3Agb2Zmc2V0PSc5MCUnIHN0b3AtY29sb3I9JyNmY2MnLz4gPC9saW5lYXJHcmFkaWVudD48cmVjdCBmaWxsPSd1cmwoI2dyYWRpZW50KScgeD0nMCcgeT0nMCcgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScvPjwvc3ZnPg==\')',
     1079                                'text'       => 'var:preset|color|dark-pink',
     1080                                'background' => 'var:preset|color|dark-red',
     1081                            ),
     1082                        ),
     1083                    ),
     1084                    'blocks'   => array(
     1085                        'core/image'  => array(
     1086                            'filter' => array(
     1087                                'duotone' => 'var:preset|duotone|blue-red',
     1088                            ),
     1089                        ),
     1090                        'core/cover'  => array(
     1091                            'filter' => array(
     1092                                'duotone' => 'var(--wp--preset--duotone--blue-red, var(--fallback-unsafe))',
     1093                            ),
     1094                        ),
     1095                        'core/group'  => array(
     1096                            'color'    => array(
     1097                                'gradient' => 'url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PHNjcmlwdD5hbGVydCgnb2snKTwvc2NyaXB0PjxsaW5lYXJHcmFkaWVudCBpZD0nZ3JhZGllbnQnPjxzdG9wIG9mZnNldD0nMTAlJyBzdG9wLWNvbG9yPScjRjAwJy8+PHN0b3Agb2Zmc2V0PSc5MCUnIHN0b3AtY29sb3I9JyNmY2MnLz4gPC9saW5lYXJHcmFkaWVudD48cmVjdCBmaWxsPSd1cmwoI2dyYWRpZW50KScgeD0nMCcgeT0nMCcgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScvPjwvc3ZnPg==\')',
     1098                                'text'     => 'var:preset|color|dark-gray',
     1099                            ),
     1100                            'elements' => array(
     1101                                'link' => array(
     1102                                    'color' => array(
     1103                                        'gradient' => 'url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PHNjcmlwdD5hbGVydCgnb2snKTwvc2NyaXB0PjxsaW5lYXJHcmFkaWVudCBpZD0nZ3JhZGllbnQnPjxzdG9wIG9mZnNldD0nMTAlJyBzdG9wLWNvbG9yPScjRjAwJy8+PHN0b3Agb2Zmc2V0PSc5MCUnIHN0b3AtY29sb3I9JyNmY2MnLz4gPC9saW5lYXJHcmFkaWVudD48cmVjdCBmaWxsPSd1cmwoI2dyYWRpZW50KScgeD0nMCcgeT0nMCcgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScvPjwvc3ZnPg==\')',
     1104                                        'text'     => 'var:preset|color|dark-pink',
     1105                                    ),
     1106                                ),
     1107                            ),
     1108                        ),
     1109                        'invalid/key' => array(
     1110                            'background' => 'green',
     1111                        ),
     1112                    ),
     1113                ),
     1114            )
     1115        );
     1116
     1117        $expected = array(
     1118            'version' => WP_Theme_JSON::LATEST_SCHEMA,
     1119            'styles'  => array(
     1120                'color'    => array(
     1121                    'text' => 'var:preset|color|dark-red',
     1122                ),
     1123                'elements' => array(
     1124                    'link' => array(
     1125                        'color' => array(
     1126                            'text'       => 'var:preset|color|dark-pink',
     1127                            'background' => 'var:preset|color|dark-red',
     1128                        ),
     1129                    ),
     1130                ),
     1131                'blocks'   => array(
     1132                    'core/image' => array(
     1133                        'filter' => array(
     1134                            'duotone' => 'var:preset|duotone|blue-red',
     1135                        ),
     1136                    ),
     1137                    'core/group' => array(
     1138                        'color'    => array(
     1139                            'text' => 'var:preset|color|dark-gray',
     1140                        ),
     1141                        'elements' => array(
     1142                            'link' => array(
     1143                                'color' => array(
     1144                                    'text' => 'var:preset|color|dark-pink',
     1145                                ),
     1146                            ),
     1147                        ),
     1148                    ),
     1149                ),
     1150            ),
     1151        );
     1152        $this->assertEqualSetsWithIndex( $expected, $actual );
     1153    }
     1154
     1155    /**
     1156     * @ticket 54336
     1157     */
     1158    public function test_remove_insecure_properties_removes_unsafe_styles_sub_properties() {
     1159        $actual = WP_Theme_JSON::remove_insecure_properties(
     1160            array(
     1161                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     1162                'styles'  => array(
     1163                    'border'   => array(
     1164                        'radius' => array(
     1165                            'topLeft'     => '6px',
     1166                            'topRight'    => 'var(--top-right, var(--unsafe-fallback))',
     1167                            'bottomRight' => '6px',
     1168                            'bottomLeft'  => '6px',
     1169                        ),
     1170                    ),
     1171                    'spacing'  => array(
     1172                        'padding' => array(
     1173                            'top'    => '1px',
     1174                            'right'  => '1px',
     1175                            'bottom' => 'var(--bottom, var(--unsafe-fallback))',
     1176                            'left'   => '1px',
     1177                        ),
     1178                    ),
     1179                    'elements' => array(
     1180                        'link' => array(
     1181                            'spacing' => array(
     1182                                'padding' => array(
     1183                                    'top'    => '2px',
     1184                                    'right'  => '2px',
     1185                                    'bottom' => 'var(--bottom, var(--unsafe-fallback))',
     1186                                    'left'   => '2px',
     1187                                ),
     1188                            ),
     1189                        ),
     1190                    ),
     1191                    'blocks'   => array(
     1192                        'core/group' => array(
     1193                            'border'   => array(
     1194                                'radius' => array(
     1195                                    'topLeft'     => '5px',
     1196                                    'topRight'    => 'var(--top-right, var(--unsafe-fallback))',
     1197                                    'bottomRight' => '5px',
     1198                                    'bottomLeft'  => '5px',
     1199                                ),
     1200                            ),
     1201                            'spacing'  => array(
     1202                                'padding' => array(
     1203                                    'top'    => '3px',
     1204                                    'right'  => '3px',
     1205                                    'bottom' => 'var(bottom, var(--unsafe-fallback))',
     1206                                    'left'   => '3px',
     1207                                ),
     1208                            ),
     1209                            'elements' => array(
     1210                                'link' => array(
     1211                                    'spacing' => array(
     1212                                        'padding' => array(
     1213                                            'top'    => '4px',
     1214                                            'right'  => '4px',
     1215                                            'bottom' => 'var(--bottom, var(--unsafe-fallback))',
     1216                                            'left'   => '4px',
     1217                                        ),
     1218                                    ),
     1219                                ),
     1220                            ),
     1221                        ),
     1222                    ),
     1223                ),
     1224            ),
     1225            true
     1226        );
     1227
     1228        $expected = array(
     1229            'version' => WP_Theme_JSON::LATEST_SCHEMA,
     1230            'styles'  => array(
     1231                'border'   => array(
     1232                    'radius' => array(
     1233                        'topLeft'     => '6px',
     1234                        'bottomRight' => '6px',
     1235                        'bottomLeft'  => '6px',
     1236                    ),
     1237                ),
     1238                'spacing'  => array(
     1239                    'padding' => array(
     1240                        'top'   => '1px',
     1241                        'right' => '1px',
     1242                        'left'  => '1px',
     1243                    ),
     1244                ),
     1245                'elements' => array(
     1246                    'link' => array(
     1247                        'spacing' => array(
     1248                            'padding' => array(
     1249                                'top'   => '2px',
     1250                                'right' => '2px',
     1251                                'left'  => '2px',
     1252                            ),
     1253                        ),
     1254                    ),
     1255                ),
     1256                'blocks'   => array(
     1257                    'core/group' => array(
     1258                        'border'   => array(
     1259                            'radius' => array(
     1260                                'topLeft'     => '5px',
     1261                                'bottomRight' => '5px',
     1262                                'bottomLeft'  => '5px',
     1263                            ),
     1264                        ),
     1265                        'spacing'  => array(
     1266                            'padding' => array(
     1267                                'top'   => '3px',
     1268                                'right' => '3px',
     1269                                'left'  => '3px',
     1270                            ),
     1271                        ),
     1272                        'elements' => array(
     1273                            'link' => array(
     1274                                'spacing' => array(
     1275                                    'padding' => array(
     1276                                        'top'   => '4px',
     1277                                        'right' => '4px',
     1278                                        'left'  => '4px',
     1279                                    ),
     1280                                ),
     1281                            ),
     1282                        ),
     1283                    ),
     1284                ),
     1285            ),
     1286        );
     1287        $this->assertEqualSetsWithIndex( $expected, $actual );
     1288    }
     1289
     1290    /**
     1291     * @ticket 54336
     1292     */
     1293    public function test_remove_insecure_properties_removes_non_preset_settings() {
     1294        $actual = WP_Theme_JSON::remove_insecure_properties(
     1295            array(
     1296                'version'  => WP_Theme_JSON::LATEST_SCHEMA,
     1297                'settings' => array(
     1298                    'color'   => array(
     1299                        'custom'  => true,
     1300                        'palette' => array(
     1301                            array(
     1302                                'name'  => 'Red',
     1303                                'slug'  => 'red',
     1304                                'color' => '#ff0000',
     1305                            ),
     1306                            array(
     1307                                'name'  => 'Green',
     1308                                'slug'  => 'green',
     1309                                'color' => '#00ff00',
     1310                            ),
     1311                            array(
     1312                                'name'  => 'Blue',
     1313                                'slug'  => 'blue',
     1314                                'color' => '#0000ff',
     1315                            ),
     1316                        ),
     1317                    ),
     1318                    'spacing' => array(
     1319                        'padding' => false,
     1320                    ),
     1321                    'blocks'  => array(
     1322                        'core/group' => array(
     1323                            'color'   => array(
     1324                                'custom'  => true,
     1325                                'palette' => array(
     1326                                    array(
     1327                                        'name'  => 'Yellow',
     1328                                        'slug'  => 'yellow',
     1329                                        'color' => '#ff0000',
     1330                                    ),
     1331                                    array(
     1332                                        'name'  => 'Pink',
     1333                                        'slug'  => 'pink',
     1334                                        'color' => '#00ff00',
     1335                                    ),
     1336                                    array(
     1337                                        'name'  => 'Orange',
     1338                                        'slug'  => 'orange',
     1339                                        'color' => '#0000ff',
     1340                                    ),
     1341                                ),
     1342                            ),
     1343                            'spacing' => array(
     1344                                'padding' => false,
     1345                            ),
     1346                        ),
     1347                    ),
     1348                ),
     1349            )
     1350        );
     1351
     1352        $expected = array(
     1353            'version'  => WP_Theme_JSON::LATEST_SCHEMA,
     1354            'settings' => array(
     1355                'color'  => array(
     1356                    'palette' => array(
     1357                        array(
     1358                            'name'  => 'Red',
     1359                            'slug'  => 'red',
     1360                            'color' => '#ff0000',
     1361                        ),
     1362                        array(
     1363                            'name'  => 'Green',
     1364                            'slug'  => 'green',
     1365                            'color' => '#00ff00',
     1366                        ),
     1367                        array(
     1368                            'name'  => 'Blue',
     1369                            'slug'  => 'blue',
     1370                            'color' => '#0000ff',
     1371                        ),
     1372                    ),
     1373                ),
     1374                'blocks' => array(
     1375                    'core/group' => array(
     1376                        'color' => array(
     1377                            'palette' => array(
     1378                                array(
     1379                                    'name'  => 'Yellow',
     1380                                    'slug'  => 'yellow',
     1381                                    'color' => '#ff0000',
     1382                                ),
     1383                                array(
     1384                                    'name'  => 'Pink',
     1385                                    'slug'  => 'pink',
     1386                                    'color' => '#00ff00',
     1387                                ),
     1388                                array(
     1389                                    'name'  => 'Orange',
     1390                                    'slug'  => 'orange',
     1391                                    'color' => '#0000ff',
     1392                                ),
     1393                            ),
     1394                        ),
     1395                    ),
     1396                ),
     1397            ),
     1398        );
     1399        $this->assertEqualSetsWithIndex( $expected, $actual );
     1400    }
     1401
     1402    /**
     1403     * @ticket 54336
     1404     */
     1405    public function test_remove_insecure_properties_removes_unsafe_preset_settings() {
     1406        $actual = WP_Theme_JSON::remove_insecure_properties(
     1407            array(
     1408                'version'  => WP_Theme_JSON::LATEST_SCHEMA,
     1409                'settings' => array(
     1410                    'color'      => array(
     1411                        'palette' => array(
     1412                            array(
     1413                                'name'  => 'Red/><b>ok</ok>',
     1414                                'slug'  => 'red',
     1415                                'color' => '#ff0000',
     1416                            ),
     1417                            array(
     1418                                'name'  => 'Green',
     1419                                'slug'  => 'a" attr',
     1420                                'color' => '#00ff00',
     1421                            ),
     1422                            array(
     1423                                'name'  => 'Blue',
     1424                                'slug'  => 'blue',
     1425                                'color' => 'var(--color, var(--unsafe-fallback))',
     1426                            ),
     1427                            array(
     1428                                'name'  => 'Pink',
     1429                                'slug'  => 'pink',
     1430                                'color' => '#FFC0CB',
     1431                            ),
     1432                        ),
     1433                    ),
     1434                    'typography' => array(
     1435                        'fontFamilies' => array(
     1436                            array(
     1437                                'name'       => 'Helvetica Arial/><b>test</b>',
     1438                                'slug'       => 'helvetica-arial',
     1439                                'fontFamily' => 'Helvetica Neue, Helvetica, Arial, sans-serif',
     1440                            ),
     1441                            array(
     1442                                'name'       => 'Geneva',
     1443                                'slug'       => 'geneva#asa',
     1444                                'fontFamily' => 'Geneva, Tahoma, Verdana, sans-serif',
     1445                            ),
     1446                            array(
     1447                                'name'       => 'Cambria',
     1448                                'slug'       => 'cambria',
     1449                                'fontFamily' => 'Cambria, Georgia, serif',
     1450                            ),
     1451                            array(
     1452                                'name'       => 'Helvetica Arial',
     1453                                'slug'       => 'helvetica-arial',
     1454                                'fontFamily' => 'var(--fontFamily, var(--unsafe-fallback))',
     1455                            ),
     1456                        ),
     1457                    ),
     1458                    'blocks'     => array(
     1459                        'core/group' => array(
     1460                            'color' => array(
     1461                                'palette' => array(
     1462                                    array(
     1463                                        'name'  => 'Red/><b>ok</ok>',
     1464                                        'slug'  => 'red',
     1465                                        'color' => '#ff0000',
     1466                                    ),
     1467                                    array(
     1468                                        'name'  => 'Green',
     1469                                        'slug'  => 'a" attr',
     1470                                        'color' => '#00ff00',
     1471                                    ),
     1472                                    array(
     1473                                        'name'  => 'Blue',
     1474                                        'slug'  => 'blue',
     1475                                        'color' => 'var(--color, var(--unsafe--fallback))',
     1476                                    ),
     1477                                    array(
     1478                                        'name'  => 'Pink',
     1479                                        'slug'  => 'pink',
     1480                                        'color' => '#FFC0CB',
     1481                                    ),
     1482                                ),
     1483                            ),
     1484                        ),
     1485                    ),
     1486                ),
     1487            )
     1488        );
     1489
     1490        $expected = array(
     1491            'version'  => WP_Theme_JSON::LATEST_SCHEMA,
     1492            'settings' => array(
     1493                'color'      => array(
     1494                    'palette' => array(
     1495                        array(
     1496                            'name'  => 'Pink',
     1497                            'slug'  => 'pink',
     1498                            'color' => '#FFC0CB',
     1499                        ),
     1500                    ),
     1501                ),
     1502                'typography' => array(
     1503                    'fontFamilies' => array(
     1504                        array(
     1505                            'name'       => 'Cambria',
     1506                            'slug'       => 'cambria',
     1507                            'fontFamily' => 'Cambria, Georgia, serif',
     1508                        ),
     1509                    ),
     1510                ),
     1511                'blocks'     => array(
     1512                    'core/group' => array(
     1513                        'color' => array(
     1514                            'palette' => array(
     1515                                array(
     1516                                    'name'  => 'Pink',
     1517                                    'slug'  => 'pink',
     1518                                    'color' => '#FFC0CB',
     1519                                ),
     1520                            ),
     1521                        ),
     1522                    ),
     1523                ),
     1524            ),
     1525        );
     1526        $this->assertEqualSetsWithIndex( $expected, $actual );
     1527    }
     1528
     1529    /**
     1530     * @ticket 54336
     1531     */
     1532    public function test_remove_insecure_properties_applies_safe_styles() {
     1533        $actual = WP_Theme_JSON::remove_insecure_properties(
     1534            array(
     1535                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     1536                'styles'  => array(
     1537                    'color' => array(
     1538                        'text' => '#abcabc ', // Trailing space.
     1539                    ),
     1540                ),
     1541            ),
     1542            true
     1543        );
     1544
     1545        $expected = array(
     1546            'version' => WP_Theme_JSON::LATEST_SCHEMA,
     1547            'styles'  => array(
     1548                'color' => array(
     1549                    'text' => '#abcabc ',
     1550                ),
     1551            ),
     1552        );
     1553        $this->assertEqualSetsWithIndex( $expected, $actual );
     1554    }
     1555
     1556    /**
     1557     * @ticket 54336
     1558     */
     1559    public function test_get_custom_templates() {
     1560        $theme_json = new WP_Theme_JSON(
     1561            array(
     1562                'version'         => 1,
     1563                'customTemplates' => array(
     1564                    array(
     1565                        'name'  => 'page-home',
     1566                        'title' => 'Homepage template',
     1567                    ),
     1568                ),
     1569            )
     1570        );
     1571
     1572        $page_templates = $theme_json->get_custom_templates();
     1573
     1574        $this->assertEqualSetsWithIndex(
     1575            $page_templates,
     1576            array(
     1577                'page-home' => array(
     1578                    'title'     => 'Homepage template',
     1579                    'postTypes' => array( 'page' ),
     1580                ),
     1581            )
     1582        );
     1583    }
     1584
     1585    /**
     1586     * @ticket 54336
     1587     */
     1588    public function test_get_template_parts() {
     1589        $theme_json = new WP_Theme_JSON(
     1590            array(
     1591                'version'       => 1,
     1592                'templateParts' => array(
     1593                    array(
     1594                        'name'  => 'small-header',
     1595                        'title' => 'Small Header',
     1596                        'area'  => 'header',
     1597                    ),
     1598                ),
     1599            )
     1600        );
     1601
     1602        $template_parts = $theme_json->get_template_parts();
     1603
     1604        $this->assertEqualSetsWithIndex(
     1605            $template_parts,
     1606            array(
     1607                'small-header' => array(
     1608                    'title' => 'Small Header',
     1609                    'area'  => 'header',
     1610                ),
     1611            )
     1612        );
    8711613    }
    8721614
    … …  
    9291671                ),
    9301672                'typography' => array(
    931                     'customFontSize'   => false,
    932                     'customLineHeight' => true,
    933                     'fontSizes'        => array(
     1673                    'customFontSize' => false,
     1674                    'lineHeight'    => true,
     1675                    'fontSizes'      => array(
    9341676                        array(
    9351677                            'slug' => 'size-slug',
    … …  
    9491691    /**
    9501692     * @ticket 52991
     1693     * @ticket 54336
    9511694     */
    9521695    public function test_get_editor_settings_no_theme_support() {
    … …  
    9911734                ),
    9921735                'typography' => array(
    993                     'customFontSize'   => true,
    994                     'customLineHeight' => false,
     1736                    'customFontSize' => true,
     1737                    'lineHeight'    => false,
    9951738                ),
    9961739            ),
    … …  
    10041747    /**
    10051748     * @ticket 52991
     1749     * @ticket 54336
    10061750     */
    10071751    public function test_get_editor_settings_blank() {
    … …  
    10121756        $actual   = WP_Theme_JSON::get_from_editor_settings( array() );
    10131757
    1014         $this->assertSameSetsWithIndex( $expected, $actual );
     1758        $this->assertEqualSetsWithIndex( $expected, $actual );
    10151759    }
    10161760
    10171761    /**
    10181762     * @ticket 52991
     1763     * @ticket 54336
    10191764     */
    10201765    public function test_get_editor_settings_custom_units_can_be_disabled() {
    10211766        add_theme_support( 'custom-units', array() );
    1022         $input = get_default_block_editor_settings();
     1767        $actual = WP_Theme_JSON::get_from_editor_settings( get_default_block_editor_settings() );
     1768        remove_theme_support( 'custom-units' );
    10231769
    10241770        $expected = array(
    1025             'units'         => array( array() ),
    1026             'customPadding' => false,
    1027         );
    1028 
    1029         $actual = WP_Theme_JSON::get_from_editor_settings( $input );
    1030 
    1031         $this->assertSameSetsWithIndex( $expected, $actual['settings']['spacing'] );
     1771            'units'   => array( array() ),
     1772            'padding' => false,
     1773        );
     1774
     1775        $this->assertEqualSetsWithIndex( $expected, $actual['settings']['spacing'] );
    10321776    }
    10331777
    10341778    /**
    10351779     * @ticket 52991
     1780     * @ticket 54336
    10361781     */
    10371782    public function test_get_editor_settings_custom_units_can_be_enabled() {
    10381783        add_theme_support( 'custom-units' );
    1039         $input = get_default_block_editor_settings();
     1784        $actual = WP_Theme_JSON::get_from_editor_settings( get_default_block_editor_settings() );
     1785        remove_theme_support( 'custom-units' );
    10401786
    10411787        $expected = array(
    1042             'units'         => array( 'px', 'em', 'rem', 'vh', 'vw', '%' ),
    1043             'customPadding' => false,
    1044         );
    1045 
    1046         $actual = WP_Theme_JSON::get_from_editor_settings( $input );
    1047 
    1048         $this->assertSameSetsWithIndex( $expected, $actual['settings']['spacing'] );
     1788            'units'   => array( 'px', 'em', 'rem', 'vh', 'vw', '%' ),
     1789            'padding' => false,
     1790        );
     1791
     1792        $this->assertEqualSetsWithIndex( $expected, $actual['settings']['spacing'] );
    10491793    }
    10501794
    10511795    /**
    10521796     * @ticket 52991
     1797     * @ticket 54336
    10531798     */
    10541799    public function test_get_editor_settings_custom_units_can_be_filtered() {
    10551800        add_theme_support( 'custom-units', 'rem', 'em' );
    1056         $input = get_default_block_editor_settings();
     1801        $actual = WP_Theme_JSON::get_from_editor_settings( get_default_block_editor_settings() );
     1802        remove_theme_support( 'custom-units' );
    10571803
    10581804        $expected = array(
    1059             'units'         => array( 'rem', 'em' ),
    1060             'customPadding' => false,
    1061         );
    1062 
    1063         $actual = WP_Theme_JSON::get_from_editor_settings( $input );
    1064 
    1065         $this->assertSameSetsWithIndex( $expected, $actual['settings']['spacing'] );
     1805            'units'   => array( 'rem', 'em' ),
     1806            'padding' => false,
     1807        );
     1808        $this->assertEqualSetsWithIndex( $expected, $actual['settings']['spacing'] );
    10661809    }
    10671810
Note: See TracChangeset for help on using the changeset viewer.