Skip to content

Commit

Permalink
Editor: Fix block custom CSS pseudo element selectors in global styles.
Browse files Browse the repository at this point in the history
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 [WordPress/gutenberg#63980 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.
Built from https://develop.svn.wordpress.org/branches/6.6@58987


git-svn-id: http://core.svn.wordpress.org/branches/6.6@58383 1a063a9b-81f0-0310-95a4-ce76da25c4cd
  • Loading branch information
hellofromtonya committed Sep 4, 2024
1 parent 4092379 commit 63a2a7d
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 4 deletions.
27 changes: 24 additions & 3 deletions wp-includes/class-wp-theme-json.php
Original file line number Diff line number Diff line change
Expand Up @@ -1439,9 +1439,16 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
protected function process_blocks_custom_css( $css, $selector ) {
$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 ) {
// If the part doesn't contain braces, it applies to the root level.
Expand All @@ -1454,11 +1461,25 @@ protected function process_blocks_custom_css( $css, $selector ) {
}
$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;
}
Expand Down
2 changes: 1 addition & 1 deletion wp-includes/version.php
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.6.2-alpha-58986';
$wp_version = '6.6.2-alpha-58987';

/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
Expand Down

0 comments on commit 63a2a7d

Please sign in to comment.