Make WordPress Core


Ignore:
Timestamp:
06/21/2023 07:54:01 AM (8 months ago)
Author:
oandregal
Message:

wp_get_global_styles: return the standard format for CSS Custom Properties.

Props samnajian, hellofromtonya, isabel_brison.
Fixes #58467.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r55956 r55959  
    19731973            'styles'  => array(
    19741974                'color'    => array(
    1975                     'text' => 'var:preset|color|dark-red',
     1975                    'text' => 'var(--wp--preset--color--dark-red)',
    19761976                ),
    19771977                'elements' => array(
    19781978                    'link' => array(
    19791979                        'color' => array(
    1980                             'text'       => 'var:preset|color|dark-pink',
    1981                             'background' => 'var:preset|color|dark-red',
     1980                            'text'       => 'var(--wp--preset--color--dark-pink)',
     1981                            'background' => 'var(--wp--preset--color--dark-red)',
    19821982                        ),
    19831983                    ),
     
    19861986                    'core/image' => array(
    19871987                        'filter' => array(
    1988                             'duotone' => 'var:preset|duotone|blue-red',
     1988                            'duotone' => 'var(--wp--preset--duotone--blue-red)',
    19891989                        ),
    19901990                    ),
    19911991                    'core/group' => array(
    19921992                        'color'    => array(
    1993                             'text' => 'var:preset|color|dark-gray',
     1993                            'text' => 'var(--wp--preset--color--dark-gray)',
    19941994                        ),
    19951995                        'elements' => array(
    19961996                            'link' => array(
    19971997                                'color' => array(
    1998                                     'text' => 'var:preset|color|dark-pink',
     1998                                    'text' => 'var(--wp--preset--color--dark-pink)',
    19991999                                ),
    20002000                            ),
     
    47074707        );
    47084708    }
     4709
     4710    public function test_internal_syntax_is_converted_to_css_variables() {
     4711        $result = new WP_Theme_JSON(
     4712            array(
     4713                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     4714                'styles'  => array(
     4715                    'color'    => array(
     4716                        'background' => 'var:preset|color|primary',
     4717                        'text'       => 'var(--wp--preset--color--secondary)',
     4718                    ),
     4719                    'elements' => array(
     4720                        'link' => array(
     4721                            'color' => array(
     4722                                'background' => 'var:preset|color|pri',
     4723                                'text'       => 'var(--wp--preset--color--sec)',
     4724                            ),
     4725                        ),
     4726                    ),
     4727                    'blocks'   => array(
     4728                        'core/post-terms' => array(
     4729                            'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--small)' ),
     4730                            'color'      => array( 'background' => 'var:preset|color|secondary' ),
     4731                        ),
     4732                        'core/navigation' => array(
     4733                            'elements' => array(
     4734                                'link' => array(
     4735                                    'color' => array(
     4736                                        'background' => 'var:preset|color|p',
     4737                                        'text'       => 'var(--wp--preset--color--s)',
     4738                                    ),
     4739                                ),
     4740                            ),
     4741                        ),
     4742                        'core/quote'      => array(
     4743                            'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--d)' ),
     4744                            'color'      => array( 'background' => 'var:preset|color|d' ),
     4745                            'variations' => array(
     4746                                'plain' => array(
     4747                                    'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--s)' ),
     4748                                    'color'      => array( 'background' => 'var:preset|color|s' ),
     4749                                ),
     4750                            ),
     4751                        ),
     4752                    ),
     4753                ),
     4754            )
     4755        );
     4756        $styles = $result->get_raw_data()['styles'];
     4757
     4758        $this->assertEquals( 'var(--wp--preset--color--primary)', $styles['color']['background'], 'Top level: Assert the originally correct values are still correct.' );
     4759        $this->assertEquals( 'var(--wp--preset--color--secondary)', $styles['color']['text'], 'Top level: Assert the originally correct values are still correct.' );
     4760
     4761        $this->assertEquals( 'var(--wp--preset--color--pri)', $styles['elements']['link']['color']['background'], 'Element top level: Assert the originally correct values are still correct.' );
     4762        $this->assertEquals( 'var(--wp--preset--color--sec)', $styles['elements']['link']['color']['text'], 'Element top level: Assert the originally correct values are still correct.' );
     4763
     4764        $this->assertEquals( 'var(--wp--preset--font-size--small)', $styles['blocks']['core/post-terms']['typography']['fontSize'], 'Top block level: Assert the originally correct values are still correct.' );
     4765        $this->assertEquals( 'var(--wp--preset--color--secondary)', $styles['blocks']['core/post-terms']['color']['background'], 'Top block level: Assert the internal variables are convert to CSS custom variables.' );
     4766
     4767        $this->assertEquals( 'var(--wp--preset--color--p)', $styles['blocks']['core/navigation']['elements']['link']['color']['background'], 'Elements block level: Assert the originally correct values are still correct.' );
     4768        $this->assertEquals( 'var(--wp--preset--color--s)', $styles['blocks']['core/navigation']['elements']['link']['color']['text'], 'Elements block level: Assert the originally correct values are still correct.' );
     4769
     4770        $this->assertEquals( 'var(--wp--preset--font-size--s)', $styles['blocks']['core/quote']['variations']['plain']['typography']['fontSize'], 'Style variations: Assert the originally correct values are still correct.' );
     4771        $this->assertEquals( 'var(--wp--preset--color--s)', $styles['blocks']['core/quote']['variations']['plain']['color']['background'], 'Style variations: Assert the internal variables are convert to CSS custom variables.' );
     4772
     4773    }
    47094774}
Note: See TracChangeset for help on using the changeset viewer.