Changeset 58987

Timestamp:

09/04/2024 02:22:16 PM (6 weeks 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)
• src/wp-includes/class-wp-theme-json.php (modified) (2 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (5 diffs)

branches/6.6/src/wp-includes/class-wp-theme-json.php

@@ -1440 +1440 @@
         $processed_css = '';
 
+        if ( empty( $css ) ) {
+            return $processed_css;
+        }
+
         // Split CSS nested rules.
         $parts = explode( '&', $css );
         foreach ( $parts as $part ) {
+            if ( empty( $part ) ) {
+                continue;
+            }
             $is_root_css = ( ! str_contains( $part, '{' ) );
             if ( $is_root_css ) {
@@ -1455 +1462 @@
                 $nested_selector = $part[0];
                 $css_value       = $part[1];
-                $part_selector   = str_starts_with( $nested_selector, ' ' )
+
+                /*
+                 * Handle pseudo elements such as ::before, ::after etc. Regex will also
+                 * capture any leading combinator such as >, +, or ~, as well as spaces.
+                 * This allows pseudo elements as descendants e.g. `.parent ::before`.
+                 */
+                $matches            = array();
+                $has_pseudo_element = preg_match( '/([>+~\s]*::[a-zA-Z-]+)/', $nested_selector, $matches );
+                $pseudo_part        = $has_pseudo_element ? $matches[1] : '';
+                $nested_selector    = $has_pseudo_element ? str_replace( $pseudo_part, '', $nested_selector ) : $nested_selector;
+
+                // Finalize selector and re-append pseudo element if required.
+                $part_selector  = str_starts_with( $nested_selector, ' ' )
                     ? static::scope_selector( $selector, $nested_selector )
                     : static::append_to_selector( $selector, $nested_selector );
-                $final_selector  = ":root :where($part_selector)";
-                $processed_css  .= $final_selector . '{' . trim( $css_value ) . '}';}
+                $final_selector = ":root :where($part_selector)$pseudo_part";
+
+                $processed_css .= $final_selector . '{' . trim( $css_value ) . '}';
+            }
         }
         return $processed_css;

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;}',
             ),
         );