WordPress.org
Get WordPress

Make WordPress Core

Changeset 54443


Ignore:
Timestamp:
10/10/2022 02:52:21 PM (4 years ago)
Author:
audrasjb
Message:

Build/Test Tools: Expand unit tests for theme.json.

This changeset adds unit test coverage for the following features:

  • Gradients
  • filter (Duotones)
  • blockGap
  • shadow
  • useRootPaddingAwareAlignments
  • appearanceTools

Props gunterer, johnregan3, audrasjb, mukesh27.
Fixes #56611.

Location:
trunk/tests/phpunit
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/tests/phpunit/data/themedir1/block-theme/theme.json

    r54184 r54443  
    2323                                }
    2424                        ],
     25                        "duotone": [
     26                                {
     27                                        "colors": [ "#333333", "#aaaaaa" ],
     28                                        "slug": "custom-duotone",
     29                                        "name": "Custom Duotone"
     30                                }
     31                        ],
    2532                        "custom": false,
    2633                        "customGradient": false
    … …  
    3946                "spacing": {
    4047                        "units": ["rem"],
    41                         "customPadding": true
     48                        "customPadding": true,
     49                        "blockGap": true
    4250                },
    4351                "blocks": {
    … …  
    5159                                                }
    5260                                        ]
     61                                }
     62                        }
     63                }
     64        },
     65        "styles" : {
     66                "blocks" :{
     67                        "core/post-featured-image": {
     68                                "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)",
     69                                "filter": {
     70                                        "duotone": "var(--wp--preset--duotone--custom-duotone)"
     71                                }
     72                        }
     73                },
     74                "elements": {
     75                        "button": {
     76                                "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
     77                        },
     78                        "link": {
     79                                "typography": {
     80                                        "textDecoration": "none"
     81                                },
     82                                "border": {
     83                                        "bottom": {
     84                                                "width": "2px",
     85                                                "color": "currentColor",
     86                                                "style": "solid"
     87                                        }
     88                                },
     89                                ":hover": {
     90                                        "typography": {
     91                                                "textDecoration": "none"
     92                                        },
     93                                        "border": {
     94                                                "bottom": {
     95                                                        "width": "2px",
     96                                                        "color": "#000",
     97                                                        "style": "dotted"
     98                                                }
     99                                        }
    53100                                }
    54101                        }

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

    r54402 r54443  
    432432         * @ticket 53175
    433433         * @ticket 54336
     434         * @ticket 56611
    434435         */
    435436        public function test_get_stylesheet() {
    … …  
    439440                                'settings' => array(
    440441                                        'color'      => array(
    441                                                 'text'    => 'value',
    442                                                 'palette' => array(
     442                                                'text'      => 'value',
     443                                                'palette'   => array(
    443444                                                        array(
    444445                                                                'slug'  => 'grey',
    445446                                                                'color' => 'grey',
     447                                                        ),
     448                                                ),
     449                                                'gradients' => array(
     450                                                        array(
     451                                                                'gradient' => 'linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%)',
     452                                                                'name'     => 'Custom gradient',
     453                                                                'slug'     => 'custom-gradient',
     454                                                        ),
     455                                                ),
     456                                                'duotone'   => array(
     457                                                        array(
     458                                                                'colors' => array( '#333333', '#aaaaaa' ),
     459                                                                'name'   => 'Custom Duotone',
     460                                                                'slug'   => 'custom-duotone',
    446461                                                        ),
    447462                                                ),
    … …  
    479494                                        'misc'     => 'value',
    480495                                        'elements' => array(
    481                                                 'link' => array(
     496                                                'link'   => array(
    482497                                                        'color' => array(
    483498                                                                'text'       => '#111',
    … …  
    485500                                                        ),
    486501                                                ),
     502                                                'button' => array(
     503                                                        'shadow' => '10px 10px 5px 0px rgba(0,0,0,0.66)',
     504                                                ),
    487505                                        ),
    488506                                        'blocks'   => array(
    489507                                                'core/group'     => array(
     508                                                        'color'    => array(
     509                                                                'gradient' => 'var:preset|gradient|custom-gradient',
     510                                                        ),
    490511                                                        'border'   => array(
    491512                                                                'radius' => '10px',
    … …  
    543564                                                                ),
    544565                                                        ),
     566                                                        'filter'  => array(
     567                                                                'duotone' => 'var:preset|duotone|custom-duotone',
     568                                                        ),
    545569                                                ),
    546570                                        ),
    … …  
    553577                );
    554578
    555                 $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;}';
    556                 $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; }body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';
    557                 $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;}';
     579                $variables = "body{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--duotone--custom-duotone: url('#wp-duotone-custom-duotone');--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;}";
     580                $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; }body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';
     581                $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-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !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;}';
    558582                $all       = $variables . $styles . $presets;
    559583                $this->assertSame( $all, $theme_json->get_stylesheet() );
    … …  
    677701                        $theme_json->get_stylesheet( array( 'presets' ) )
    678702                );
    679 
    680703                $this->assertSame(
    681704                        '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;--wp--custom--white-2-black: value;}',
    … …  
    29482971
    29492972        /**
     2973         * @ticket 56611
     2974         */
     2975        function test_export_data_sets_use_root_padding_aware_alignments() {
     2976                $theme = new WP_Theme_JSON(
     2977                        array(
     2978                                'version'  => 2,
     2979                                'settings' => array(
     2980                                        'useRootPaddingAwareAlignments' => true,
     2981                                        'blocks'                        => array(
     2982                                                'core/paragraph' => array(
     2983                                                        'useRootPaddingAwareAlignments' => true,
     2984                                                ),
     2985                                        ),
     2986                                ),
     2987                        )
     2988                );
     2989
     2990                $actual   = $theme->get_data();
     2991                $expected = array(
     2992                        'version'  => 2,
     2993                        'settings' => array(
     2994                                'useRootPaddingAwareAlignments' => true,
     2995                                'blocks'                        => array(
     2996                                        'core/paragraph' => array(
     2997                                                'useRootPaddingAwareAlignments' => true,
     2998                                        ),
     2999                                ),
     3000                        ),
     3001                );
     3002
     3003                $this->assertEqualSetsWithIndex( $expected, $actual );
     3004        }
     3005
     3006
     3007        /**
    29503008         * @ticket 56467
    29513009         */
    … …  
    33543412                );
    33553413
    3356                 $this->assertSame(
     3414                $this->assertEquals(
    33573415                        '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-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1rem; }body { --wp--style--block-gap: 1rem; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1rem;margin-block-end: 0;}body .is-layout-flex{gap: 1rem;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}.wp-block-post-content{color: gray;}.wp-block-social-links.is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links.is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links.is-layout-flex{gap: 0;}.wp-block-buttons.is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons.is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons.is-layout-flex{gap: 0;}',
    33583416                        $theme_json->get_stylesheet()
    … …  
    34693527
    34703528                $metadata = array(
    3471                         'path'     => array(
    3472                                 '0' => 'styles',
    3473                         ),
     3529                        'path'     => array( 'styles' ),
    34743530                        'selector' => 'body',
    34753531                );
    … …  
    35023558
    35033559                $metadata = array(
    3504                         'path'     => array(
    3505                                 '0' => 'styles',
    3506                         ),
     3560                        'path'     => array( 'styles' ),
    35073561                        'selector' => 'body',
    35083562                );
    … …  
    35313585
    35323586                $metadata = array(
    3533                         'path'     => array(
    3534                                 '0' => 'settings',
    3535                         ),
     3587                        'path'     => array( 'settings' ),
    35363588                        'selector' => 'body',
    35373589                );
    … …  
    35413593                $style_rules = $theme_json->get_styles_for_block( $metadata );
    35423594                $this->assertSame( $expected, $root_rules . $style_rules );
     3595        }
     3596
     3597        /**
     3598         * @ticket 56611
     3599         */
     3600        function test_get_styles_with_appearance_tools() {
     3601                $theme_json = new WP_Theme_JSON(
     3602                        array(
     3603                                'version'  => 2,
     3604                                'settings' => array(
     3605                                        'appearanceTools' => true,
     3606                                ),
     3607                        )
     3608                );
     3609
     3610                $metadata = array(
     3611                        'path'     => array( 'settings' ),
     3612                        'selector' => 'body',
     3613                );
     3614
     3615                $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; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: ; }body { --wp--style--block-gap: ; }';
     3616                $root_rules = $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata );
     3617                $this->assertSame( $expected, $root_rules );
    35433618        }
    35443619

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

    r54402 r54443  
    7777         * @ticket 52991
    7878         * @ticket 54336
     79         * @ticket 56611
    7980         */
    8081        public function test_translations_are_applied() {
    … …  
    119120                                                ),
    120121                                        ),
     122                                        'duotone'        => array(
     123                                                'theme' => array(
     124                                                        array(
     125                                                                'colors' => array( '#333333', '#aaaaaa' ),
     126                                                                'slug'   => 'custom-duotone',
     127                                                                'name'   => 'Custom Duotone',
     128                                                        ),
     129                                                ),
     130                                        ),
    121131                                ),
    122132                                'typography' => array(
    … …  
    134144                                ),
    135145                                'spacing'    => array(
    136                                         'units'   => array( 'rem' ),
    137                                         'padding' => true,
     146                                        'units'    => array( 'rem' ),
     147                                        'padding'  => true,
     148                                        'blockGap' => true,
    138149                                ),
    139150                                'blocks'     => array(
    … …  
    245256        /**
    246257         * @ticket 54336
     258         * @ticket 56611
    247259         */
    248260        function test_merges_child_theme_json_into_parent_theme_json() {
    … …  
    254266                                'custom'         => false,
    255267                                'customGradient' => false,
     268                                'duotone'        => array(
     269                                        'theme' => array(
     270                                                array(
     271                                                        'colors' => array( '#333333', '#aaaaaa' ),
     272                                                        'name'   => 'Custom Duotone',
     273                                                        'slug'   => 'custom-duotone',
     274                                                ),
     275                                        ),
     276                                ),
    256277                                'gradients'      => array(
    257278                                        'theme' => array(
    … …  
    298319                        ),
    299320                        'spacing'    => array(
    300                                 'units'   => array( 'rem' ),
    301                                 'padding' => true,
     321                                'blockGap' => true,
     322                                'units'    => array( 'rem' ),
     323                                'padding'  => true,
    302324                        ),
    303325                        'blocks'     => array(
    … …  
    367389                }
    368390                $query_count = count( $this->queries ) - $query_count;
    369                 $this->assertSame( 0, $query_count, 'Unexpected SQL queries detected for the wp_global_style post type' );
     391                $this->assertEquals( 0, $query_count, 'Unexpected SQL queries detected for the wp_global_style post type' );
    370392
    371393                $user_cpt = WP_Theme_JSON_Resolver::get_user_data_from_wp_global_styles( $theme );
    … …  
    382404                }
    383405                $query_count = count( $this->queries ) - $query_count;
    384                 $this->assertSame( 0, $query_count, 'Unexpected SQL queries detected for the wp_global_style post type' );
     406                $this->assertEquals( 0, $query_count, 'Unexpected SQL queries detected for the wp_global_style post type' );
    385407                remove_filter( 'query', array( $this, 'filter_db_query' ) );
    386408        }
Note: See TracChangeset for help on using the changeset viewer.