Changeset 58896 for trunk/src/wp-includes/class-wp-theme-json.php

Timestamp:

08/14/2024 06:55:26 PM (11 months 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].

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

File:

• trunk/src/wp-includes/class-wp-theme-json.php (modified) (2 diffs)

trunk/src/wp-includes/class-wp-theme-json.php

@@ -1449 +1449 @@
         $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 ) {
@@ -1464 +1471 @@
                 $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;