Changeset 58987 for branches/6.6/tests/phpunit/tests/theme/wpThemeJson.php

Timestamp:

09/04/2024 02:22:16 PM (2 years ago)

Author:

hellofromTonya

Message:

Editor: Fix block custom CSS pseudo element selectors in global styles.

Fixes a regression introduced in [58241] where selectors with pseudo elements are wrapped within :where() causing malformed CSS and the CSS rule(s) not being applied.

When processing custom CSS for blocks, this changeset:

• Strips the pseudo-elements from the original nested selector, performs the required wrapping in :root :where, then re-appends the pseudo-element selector with its leading combinators if present.
• Removes empty CSS rules.

It includes the PHP changes.

Reference:

• PHP changes from ​Gutenberg PR 63980.

Follow-up to [58241], [56812], [55216].

Reviewed by andrewserong.
Merges [58896] to the 6.6 branch.

Props aaronrobertshaw, wongjn, harlet7, dballari, ramonopoly, andrewserong, aristath, hellofromTonya.
Fixes #61769.

Location:

branches/6.6

Files:

• . (modified) (1 prop)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (5 diffs)

branches/6.6/tests/phpunit/tests/theme/wpThemeJson.php

@@ -5154 +5154 @@
         /**
          * @ticket 61165
+         * @ticket 61769
          *
          * @dataProvider data_process_blocks_custom_css
@@ -5181 +5182 @@
                 return array(
                         // Simple CSS without any nested selectors.
+                        'empty css'                    => array(
+                                'input'    => array(
+                                        'selector' => '.foo',
+                                        'css'      => '',
+                                ),
+                                'expected' => '',
+                        ),
                         'no nested selectors'          => array(
                                 'input'    => array(
@@ -5196 +5204 @@
                                 'expected' => ':root :where(.foo){color: red; margin: auto;}:root :where(.foo.one){color: blue;}:root :where(.foo .two){color: green;}',
                         ),
+                        'no root styles'               => array(
+                                'input'    => array(
+                                        'selector' => '.foo',
+                                        'css'      => '&::before{color: red;}',
+                                ),
+                                'expected' => ':root :where(.foo)::before{color: red;}',
+                        ),
                         // CSS with pseudo elements.
                         'with pseudo elements'         => array(
@@ -5202 +5217 @@
                                         'css'      => 'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;}  &.one::before{color: yellow;} & .two::before{color: purple;}',
                                 ),
-                                'expected' => ':root :where(.foo){color: red; margin: auto;}:root :where(.foo::before){color: blue;}:root :where(.foo ::before){color: green;}:root :where(.foo.one::before){color: yellow;}:root :where(.foo .two::before){color: purple;}',
+                                'expected' => ':root :where(.foo){color: red; margin: auto;}:root :where(.foo)::before{color: blue;}:root :where(.foo) ::before{color: green;}:root :where(.foo.one)::before{color: yellow;}:root :where(.foo .two)::before{color: purple;}',
                         ),
                         // CSS with multiple root selectors.
@@ -5210 +5225 @@
                                         'css'      => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;}  &.three::before{color: orange;} & .four::before{color: skyblue;}',
                                 ),
-                                'expected' => ':root :where(.foo, .bar){color: red; margin: auto;}:root :where(.foo.one, .bar.one){color: blue;}:root :where(.foo .two, .bar .two){color: green;}:root :where(.foo::before, .bar::before){color: yellow;}:root :where(.foo ::before, .bar ::before){color: purple;}:root :where(.foo.three::before, .bar.three::before){color: orange;}:root :where(.foo .four::before, .bar .four::before){color: skyblue;}',
+                                'expected' => ':root :where(.foo, .bar){color: red; margin: auto;}:root :where(.foo.one, .bar.one){color: blue;}:root :where(.foo .two, .bar .two){color: green;}:root :where(.foo, .bar)::before{color: yellow;}:root :where(.foo, .bar) ::before{color: purple;}:root :where(.foo.three, .bar.three)::before{color: orange;}:root :where(.foo .four, .bar .four)::before{color: skyblue;}',
                         ),
                 );