Skip to content

Block Styles: Reduce specificity of block style variation selectors #61032

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
aaronrobertshaw wants to merge 12 commits into from
Closed

Block Styles: Reduce specificity of block style variation selectors #61032

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
dc9a738
Reduce specificity of block style variation selectors
aaronrobertshaw Apr 9, 2024
7630e4d
Reduce specificity of image rounded default style
aaronrobertshaw Apr 29, 2024
93af71d
Add explanatory comment for not scoping deprecated selector
aaronrobertshaw Apr 30, 2024
022f5c9
Add extra comment explaining deprecated button selectors
aaronrobertshaw Apr 30, 2024
bf0c17a
Add comment explaining deprecated pullquote selector
aaronrobertshaw Apr 30, 2024
840a0f4
Make button block outline styles compatible with zero specificity
aaronrobertshaw May 3, 2024
5d0f1b3
Try reducing specificity for social links block
aaronrobertshaw May 2, 2024
7f73ecc
Add comment to table styles for lack of zero specificity
aaronrobertshaw May 2, 2024
c6a16c3
Drop specificity for site logo rounded style
aaronrobertshaw May 2, 2024
d34c4b0
Remove unneeded separator style
aaronrobertshaw May 2, 2024
2296fc5
Lower specificity of tag cloud variation selectors
aaronrobertshaw May 3, 2024
38dbc1a
Ignore social links block in reset style selectors
aaronrobertshaw May 13, 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
Next Next commit
Reduce specificity of block style variation selectors
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed May 13, 2024
commit dc9a7382f80e41af4691e87642fee83c39d1a245
2 changes: 1 addition & 1 deletion lib/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2767,7 +2767,7 @@ static function ( $pseudo_selector ) use ( $selector ) {

// 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( ":where($style_variation_selector)", $individual_style_variation_declarations );
}

return $block_rules;
Expand Down
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -566,7 +566,9 @@ describe( 'global styles renderer', () => {
};

expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }.is-style-foo.wp-image.wp-image-spacing{padding-top: 2px;}.is-style-foo.wp-image.wp-image-border-color{border-color: blue;}.is-style-foo.wp-image{color: blue;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }' +
':where(.is-style-foo.wp-image.wp-image-spacing){padding-top: 2px;}:where(.is-style-foo.wp-image.wp-image-border-color){border-color: blue;}:where(.is-style-foo.wp-image){color: blue;}' +
'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
);
} );

Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/global-styles/use-global-styles-output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -893,7 +893,7 @@ export const toStyles = (
);
const rules =
declarations.join( ';' );
ruleset += `${ cssSelector }{${ rules };}`;
ruleset += `:where(${ cssSelector }){${ rules };}`;
}
}
);
Expand All @@ -908,7 +908,7 @@ export const toStyles = (
tree
);
if ( styleVariationDeclarations.length ) {
ruleset += `${ styleVariationSelector }{${ styleVariationDeclarations.join(
ruleset += `:where(${ styleVariationSelector }){${ styleVariationDeclarations.join(
';'
) };}`;
}
Expand Down
4 changes: 2 additions & 2 deletions phpunit/class-wp-theme-json-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4146,9 +4146,9 @@ public function data_get_styles_for_block_with_style_variations() {
$plain = array(
'metadata' => array(
'path' => array( 'styles', 'blocks', 'core/quote', 'variations', 'plain' ),
'selector' => '.is-style-plain.is-style-plain.wp-block-quote',
'selector' => '.is-style-plain.wp-block-quote',
),
'styles' => '.is-style-plain.is-style-plain.wp-block-quote{background-color: hotpink;}',
Copy link
Copy Markdown
Contributor

@MaggieCabrera MaggieCabrera May 10, 2024

Choose a reason for hiding this comment

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

Love ❤️

'styles' => ':where(.is-style-plain.wp-block-quote){background-color: hotpink;}',
);

return array(
Expand Down