Skip to content
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.

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

Styles: try wrapping with :root to fix reset styles #61638

Merged
merged 32 commits into from
May 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
15a2337
Styles: try wrapping with :root to fix reset styles
ellatrix May 14, 2024
d92a459
Adjust based on #59457
ellatrix May 14, 2024
6994969
Fix php unit tests
ellatrix May 14, 2024
898ee0e
Fix js tests
ellatrix May 14, 2024
4d0b150
Add a basic test for overriding reset styles
ellatrix May 14, 2024
04cb931
Add test for global styles override
ellatrix May 14, 2024
3f07cf7
Don't add :root :where for single classes, because they are already 0…
ellatrix May 14, 2024
177bd01
Try adding :root to layout stykes
aaronrobertshaw May 22, 2024
4b43232
Reduce block style variation selector specificity to 0-1-0
aaronrobertshaw May 23, 2024
b278d7f
Update block style variation selectors in global styles hook
aaronrobertshaw May 23, 2024
e617223
Try applying :root :where selectors for custom css
aaronrobertshaw May 23, 2024
f14f4c1
Add backport log entry
ellatrix May 23, 2024
92b680c
Move block style variation styles to after block styles
aaronrobertshaw May 24, 2024
23c538a
Update button styles
aaronrobertshaw May 23, 2024
9f6226d
Update image styles
aaronrobertshaw May 23, 2024
3781d7e
Update pullquote styles
aaronrobertshaw May 23, 2024
089a9b4
Update separator styles
aaronrobertshaw May 23, 2024
497ef7d
Fix separator dots style
aaronrobertshaw May 23, 2024
545ead6
Update site logo styles
aaronrobertshaw May 23, 2024
6f12810
Update social link styles
aaronrobertshaw May 23, 2024
f010443
Add comment explaining table selector
aaronrobertshaw May 23, 2024
46a95c3
Update tag cloud styles
aaronrobertshaw May 23, 2024
58daed1
Fix Cover styles blocking global styles
aaronrobertshaw May 24, 2024
5b079e4
Fix image caption styles
aaronrobertshaw May 24, 2024
cff5380
Fix latest posts padding styles
aaronrobertshaw May 24, 2024
66cb8f3
Fix list block's has-background padding
aaronrobertshaw May 24, 2024
362d2ae
Fix paragraph block's has-padding style
aaronrobertshaw May 24, 2024
06f8857
Fix site title link colors
aaronrobertshaw May 24, 2024
da3b222
Revert "Fix paragraph block's has-padding style"
aaronrobertshaw May 27, 2024
b73cffe
Revert "Fix list block's has-background padding"
aaronrobertshaw May 27, 2024
01c33e3
Fix additional issues with latest posts padding
aaronrobertshaw May 28, 2024
df10d13
Fix enforcement of no borders or background for dots separator
aaronrobertshaw May 28, 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
5 changes: 5 additions & 0 deletions backport-changelog/6.6/6522.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
https://github.com/WordPress/wordpress-develop/pull/6522

* https://github.com/WordPress/gutenberg/pull/60106
* https://github.com/WordPress/gutenberg/pull/60228
* https://github.com/WordPress/gutenberg/pull/61638
14 changes: 8 additions & 6 deletions lib/class-wp-theme-json-gutenberg.php
Original file line number Diff line number Diff line change
Expand Up @@ -1293,7 +1293,7 @@ protected function process_blocks_custom_css( $css, $selector ) {
$is_root_css = ( ! str_contains( $part, '{' ) );
if ( $is_root_css ) {
// If the part doesn't contain braces, it applies to the root level.
$processed_css .= trim( $selector ) . '{' . trim( $part ) . '}';
$processed_css .= ':root :where(' . trim( $selector ) . '){' . trim( $part ) . '}';
} else {
// If the part contains braces, it's a nested CSS rule.
$part = explode( '{', str_replace( '}', '', $part ) );
Expand All @@ -1305,7 +1305,8 @@ protected function process_blocks_custom_css( $css, $selector ) {
$part_selector = str_starts_with( $nested_selector, ' ' )
? static::scope_selector( $selector, $nested_selector )
: static::append_to_selector( $selector, $nested_selector );
$processed_css .= $part_selector . '{' . trim( $css_value ) . '}';
$final_selector = ":root :where($part_selector)";
$processed_css .= $final_selector . '{' . trim( $css_value ) . '}';
}
}
return $processed_css;
Expand All @@ -1322,6 +1323,7 @@ public function get_custom_css() {
$block_custom_css = '';
$block_nodes = $this->get_block_custom_css_nodes();
foreach ( $block_nodes as $node ) {
// The node selector will have its specificity set to 0-1-0 within process_blocks_custom_css.
$block_custom_css .= $this->get_block_custom_css( $node['css'], $node['selector'] );
}

Expand Down Expand Up @@ -1564,7 +1566,7 @@ protected function get_layout_styles( $block_metadata, $types = array() ) {
$spacing_rule['selector']
);
} else {
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s) %3$s' : ':where(%1$s-%2$s) %3$s';
$format = static::ROOT_BLOCK_SELECTOR === $selector ? '.%2$s %3$s' : '%1$s-%2$s %3$s';
$layout_selector = sprintf(
$format,
$selector,
Expand Down Expand Up @@ -2745,7 +2747,7 @@ static function ( $pseudo_selector ) use ( $selector ) {
}

// 2. Generate and append the rules that use the general selector.
$block_rules .= static::to_ruleset( ":where($selector)", $declarations );
$block_rules .= static::to_ruleset( ":root :where($selector)", $declarations );

// 3. Generate and append the rules that use the duotone selector.
if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
Expand All @@ -2762,12 +2764,12 @@ static function ( $pseudo_selector ) use ( $selector ) {

// 5. Generate and append the feature level rulesets.
foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
$block_rules .= static::to_ruleset( ":where($feature_selector)", $individual_feature_declarations );
$block_rules .= static::to_ruleset( ":root :where($feature_selector)", $individual_feature_declarations );
}

// 6. Generate and append the style variation rulesets.
foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
$block_rules .= static::to_ruleset( $style_variation_selector, $individual_style_variation_declarations );
$block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations );
}

return $block_rules;
Expand Down
34 changes: 34 additions & 0 deletions lib/theme.json
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,40 @@
"bottom": "0px",
"left": "0px"
}
},
"blocks": {
"core/button": {
"variations": {
"outline": {
"border": {
"width": "2px",
"style": "solid",
"color": "currentColor"
},
"color": {
"text": "currentColor",
"gradient": "transparent none"
},
"spacing": {
"padding": {
"top": "0.667em",
"right": "1.33em",
"bottom": "0.667em",
"left": "1.33em"
}
}
}
}
},
"core/site-logo": {
"variations": {
"rounded": {
"border": {
"radius": "9999px"
}
}
}
}
}
}
}

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -522,10 +522,10 @@ export function getLayoutStyles( {
} else {
combinedSelector =
selector === ROOT_BLOCK_SELECTOR
? `:where(.${ className })${
? `.${ className }${
spacingStyle?.selector || ''
}`
: `:where(${ selector }-${ className })${
: `${ selector }-${ className }${
spacingStyle?.selector || ''
}`;
}
Expand Down Expand Up @@ -860,12 +860,56 @@ export const toStyles = (
( [ cssSelector, declarations ] ) => {
if ( declarations.length ) {
const rules = declarations.join( ';' );
ruleset += `:where(${ cssSelector }){${ rules };}`;
ruleset += `:root :where(${ cssSelector }){${ rules };}`;
}
}
);
}

// Process duotone styles.
if ( duotoneSelector ) {
const duotoneStyles = {};
if ( styles?.filter ) {
duotoneStyles.filter = styles.filter;
delete styles.filter;
}
const duotoneDeclarations =
getStylesDeclarations( duotoneStyles );
if ( duotoneDeclarations.length ) {
ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
';'
) };}`;
}
}

// Process blockGap and layout styles.
if (
! disableLayoutStyles &&
( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
) {
ruleset += getLayoutStyles( {
style: styles,
selector,
hasBlockGapSupport,
hasFallbackGapSupport,
fallbackGapValue,
} );
}

// Process the remaining block styles (they use either normal block class or __experimentalSelector).
const styleDeclarations = getStylesDeclarations(
styles,
selector,
useRootPaddingAlign,
tree,
disableRootPadding
);
if ( styleDeclarations?.length ) {
ruleset += `:root :where(${ selector }){${ styleDeclarations.join(
';'
) };}`;
}

if ( styleVariationSelectors ) {
Object.entries( styleVariationSelectors ).forEach(
( [ styleVariationName, styleVariationSelector ] ) => {
Expand All @@ -892,7 +936,7 @@ export const toStyles = (
);
const rules =
declarations.join( ';' );
ruleset += `${ cssSelector }{${ rules };}`;
ruleset += `:root :where(${ cssSelector }){${ rules };}`;
}
}
);
Expand All @@ -907,7 +951,7 @@ export const toStyles = (
tree
);
if ( styleVariationDeclarations.length ) {
ruleset += `${ styleVariationSelector }{${ styleVariationDeclarations.join(
ruleset += `:root :where(${ styleVariationSelector }){${ styleVariationDeclarations.join(
';'
) };}`;
}
Expand All @@ -916,50 +960,6 @@ export const toStyles = (
);
}

// Process duotone styles.
if ( duotoneSelector ) {
const duotoneStyles = {};
if ( styles?.filter ) {
duotoneStyles.filter = styles.filter;
delete styles.filter;
}
const duotoneDeclarations =
getStylesDeclarations( duotoneStyles );
if ( duotoneDeclarations.length ) {
ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
';'
) };}`;
}
}

// Process blockGap and layout styles.
if (
! disableLayoutStyles &&
( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
) {
ruleset += getLayoutStyles( {
style: styles,
selector,
hasBlockGapSupport,
hasFallbackGapSupport,
fallbackGapValue,
} );
}

// Process the remaining block styles (they use either normal block class or __experimentalSelector).
const declarations = getStylesDeclarations(
styles,
selector,
useRootPaddingAlign,
tree,
disableRootPadding
);
if ( declarations?.length ) {
ruleset += `:where(${ selector }){${ declarations.join(
';'
) };}`;
}

// Check for pseudo selector in `styles` and handle separately.
const pseudoSelectorStyles = Object.entries( styles ).filter(
( [ key ] ) => key.startsWith( ':' )
Expand Down Expand Up @@ -1018,13 +1018,13 @@ export const toStyles = (
getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
ruleset =
ruleset +
`:where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
`:root :where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
ruleset =
ruleset +
':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
':root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
ruleset =
ruleset +
':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
':root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
}

if ( options.presets ) {
Expand Down Expand Up @@ -1185,7 +1185,7 @@ export function processCSSNesting( css, blockSelector ) {
const isRootCss = ! part.includes( '{' );
if ( isRootCss ) {
// If the part doesn't contain braces, it applies to the root level.
processedCSS += `${ blockSelector }{${ part.trim() }}`;
processedCSS += `:root :where(${ blockSelector }){${ part.trim() }}`;
} else {
// If the part contains braces, it's a nested CSS rule.
const splittedPart = part.replace( '}', '' ).split( '{' );
Expand All @@ -1198,7 +1198,7 @@ export function processCSSNesting( css, blockSelector ) {
? scopeSelector( blockSelector, nestedSelector )
: appendToSelector( blockSelector, nestedSelector );

processedCSS += `${ combinedSelector }{${ cssValue.trim() }}`;
processedCSS += `:root :where(${ combinedSelector }){${ cssValue.trim() }}`;
}
} );
return processedCSS;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/audio/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
@include caption-style-theme();
}

:where(.wp-block-audio) {
.wp-block-audio {
margin: 0 0 1em 0;
}
35 changes: 0 additions & 35 deletions packages/block-library/src/button/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -37,38 +37,3 @@ div[data-type="core/button"] {
text-decoration: inherit;
}

.editor-styles-wrapper .wp-block-button .wp-block-button__link {
// The following styles ensure a default border is applied when the user selects only a border color or style in the editor,
// but no width. They override the `border-width: 0;` applied by core's theme.json via the Elements API button.
&:where(.has-border-color) {
border-width: initial;
}
&:where([style*="border-top-color"]) {
border-top-width: initial;
}
&:where([style*="border-right-color"]) {
border-right-width: initial;
}
&:where([style*="border-bottom-color"]) {
border-bottom-width: initial;
}
&:where([style*="border-left-color"]) {
border-left-width: initial;
}

&:where([style*="border-style"]) {
border-width: initial;
}
&:where([style*="border-top-style"]) {
border-top-width: initial;
}
&:where([style*="border-right-style"]) {
border-right-width: initial;
}
&:where([style*="border-bottom-style"]) {
border-bottom-width: initial;
}
&:where([style*="border-left-style"]) {
border-left-width: initial;
}
}
Loading
Loading