Skip to content

Ensure root selector (body) is not wrapped in :root :where() #7061

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
talldan wants to merge 6 commits into from
Closed

Ensure root selector (body) is not wrapped in :root :where() #7061

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4dbfe80
Ensure root/body selector is not wrapped in :root :where() to keep sp…
talldan Jul 19, 2024
06bedb5
Update unit tests
talldan Jul 19, 2024
3484355
Add @since
talldan Jul 19, 2024
2560810
Add @ticket to jsdoc
talldan Jul 19, 2024
9c70cfc
Update @since tag
talldan Jul 24, 2024
97b197a
Update unit tests after rebase
talldan Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions src/wp-includes/class-wp-theme-json.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2738,6 +2738,8 @@ private static function get_block_nodes( $theme_json, $selectors = array(), $opt
* @since 6.6.0 Setting a min-height of HTML when root styles have a background gradient or image.
* Updated general global styles specificity to 0-1-0.
* Fixed custom CSS output in block style variations.
* @since 6.6.1 Avoid applying `:root :where()` wrapper to top-level element-only selectors.
* @since 6.6.2 Avoid applying `:root :where()` wrapper to root selectors.
Comment on lines +2741 to +2742
Copy link
Contributor

@hellofromtonya hellofromtonya Jul 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 2 @since shouldn't be necessary, as they are both bugfixes. @since is added for changes in functionality, function parameter(s), return types, filters, etc.

The commit history will provide the context of the bugfix changes.

Suggested change
* @since 6.6.1 Avoid applying `:root :where()` wrapper to top-level element-only selectors.
* @since 6.6.2 Avoid applying `:root :where()` wrapper to root selectors.

*
* @param array $block_metadata Metadata about the block to get styles for.
*
Expand Down Expand Up @@ -2892,18 +2894,23 @@ static function ( $pseudo_selector ) use ( $selector ) {
}

/*
* Root selector (body) styles should not be wrapped in `:root where()` to keep
* specificity at (0,0,1) and maintain backwards compatibility.
*
* Top-level element styles using element-only specificity selectors should
* not get wrapped in `:root :where()` to maintain backwards compatibility.
*
* Pseudo classes, e.g. :hover, :focus etc., are a class-level selector so
* still need to be wrapped in `:root :where` to cap specificity for nested
* variations etc. Pseudo selectors won't match the ELEMENTS selector exactly.
*/
$element_only_selector = $current_element &&
$element_only_selector = $is_root_selector || (
$current_element &&
isset( static::ELEMENTS[ $current_element ] ) &&
// buttons, captions etc. still need `:root :where()` as they are class based selectors.
! isset( static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $current_element ] ) &&
static::ELEMENTS[ $current_element ] === $selector;
static::ELEMENTS[ $current_element ] === $selector
);

// 2. Generate and append the rules that use the general selector.
$general_selector = $element_only_selector ? $selector : ":root :where($selector)";
Expand Down
Loading