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

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

Closed
wants to merge 12 commits into from

Conversation

aaronrobertshaw
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw commented Apr 24, 2024

Fixes: #61268

Related:

Note: The changes in this PR are being split out from #57908 to make that more manageable

What?

Reduces the specificity of block style variation selectors.

This is a continuation of #57659 and the overall reduction of global styles specificity in #57841.

Why?

To nest extended block style variations, as proposed in #57908, we need to reduce the specificity of related selectors to 0-0-0. This allows the load order of styles to determine the final cascade.

This enables the ability for a block style variation to define inner block type styles without preventing an inner block from applying its own desired block style variation.

What happens if specificity isn't reduced?

Imagine a group block style variation that adds a border to inner image blocks. In this case, we'd end up with a selector such as .wp-block-group.is-style-bordered-images .wp-block-image img and a specificity of 0-3-1.

If we wanted to apply a rounded non-bordered image block style variation to a single inner image block, it would get a selector like .wp-block-image.is-style-rounded-without-border img with 0-2-1 specificity.

The result is the outer variation's img styles incorrectly take precedence.

Alternatives

Explorations were made into tweaking style variation selectors with :not clauses to try and exclude inner blocks that have variations applied. The results here were brittle, incredibly complex, and only really worked for one level of nesting, leading back to the approach proposed in this PR.

Testing Instructions

  1. Check core block styles are still applied correctly in the editor and frontend e.g. button outline, image rounded etc.
  2. npm run test:unit packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
  3. npm run test:unit:php:base -- --filter WP_Theme_JSON_Gutenberg_Test

@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. [Feature] Block Style Variations Issues or PRs that are related to the style variations for blocks labels Apr 24, 2024
@aaronrobertshaw aaronrobertshaw self-assigned this Apr 24, 2024
Copy link

github-actions bot commented Apr 24, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: MaggieCabrera <[email protected]>
Co-authored-by: talldan <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: colorful-tones <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copy link

github-actions bot commented Apr 24, 2024

Size Change: +31 B (0%)

Total Size: 1.75 MB

Filename Size Change
build/block-editor/index.min.js 259 kB -3 B (0%)
build/block-library/blocks/button/style-rtl.css 599 B -28 B (-4.47%)
build/block-library/blocks/button/style.css 599 B -27 B (-4.31%)
build/block-library/blocks/image/style-rtl.css 1.61 kB +8 B (+0.5%)
build/block-library/blocks/image/style.css 1.6 kB +8 B (+0.5%)
build/block-library/blocks/separator/editor-rtl.css 99 B -47 B (-32.19%) 🎉
build/block-library/blocks/separator/editor.css 99 B -47 B (-32.19%) 🎉
build/block-library/blocks/site-logo/style-rtl.css 212 B +8 B (+3.92%)
build/block-library/blocks/site-logo/style.css 212 B +8 B (+3.92%)
build/block-library/blocks/social-link/editor-rtl.css 331 B +7 B (+2.16%)
build/block-library/blocks/social-link/editor.css 331 B +7 B (+2.16%)
build/block-library/blocks/social-links/editor-rtl.css 679 B +3 B (+0.44%)
build/block-library/blocks/social-links/editor.css 678 B +3 B (+0.44%)
build/block-library/blocks/social-links/style-rtl.css 1.5 kB +16 B (+1.08%)
build/block-library/blocks/social-links/style.css 1.49 kB +16 B (+1.08%)
build/block-library/blocks/tag-cloud/style-rtl.css 262 B +11 B (+4.38%)
build/block-library/blocks/tag-cloud/style.css 263 B +10 B (+3.95%)
build/block-library/editor-rtl.css 12.3 kB -5 B (-0.04%)
build/block-library/editor.css 12.2 kB -7 B (-0.06%)
build/block-library/reset-rtl.css 505 B +33 B (+6.99%) 🔍
build/block-library/reset.css 505 B +33 B (+6.99%) 🔍
build/block-library/style-rtl.css 14.8 kB +9 B (+0.06%)
build/block-library/style.css 14.8 kB +15 B (+0.1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.27 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.26 kB
build/block-directory/style-rtl.css 1.03 kB
build/block-directory/style.css 1.03 kB
build/block-editor/content-rtl.css 4.57 kB
build/block-editor/content.css 4.57 kB
build/block-editor/default-editor-styles-rtl.css 395 B
build/block-editor/default-editor-styles.css 395 B
build/block-editor/style-rtl.css 15.5 kB
build/block-editor/style.css 15.5 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 133 B
build/block-library/blocks/audio/theme.css 133 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 277 B
build/block-library/blocks/block/editor.css 277 B
build/block-library/blocks/button/editor-rtl.css 415 B
build/block-library/blocks/button/editor.css 414 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 671 B
build/block-library/blocks/cover/editor.css 674 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 312 B
build/block-library/blocks/embed/editor.css 312 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 327 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 471 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 956 B
build/block-library/blocks/gallery/editor.css 960 B
build/block-library/blocks/gallery/style-rtl.css 1.72 kB
build/block-library/blocks/gallery/style.css 1.72 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 394 B
build/block-library/blocks/group/editor.css 394 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 891 B
build/block-library/blocks/image/editor.css 891 B
build/block-library/blocks/image/theme-rtl.css 133 B
build/block-library/blocks/image/theme.css 133 B
build/block-library/blocks/image/view.min.js 1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 306 B
build/block-library/blocks/media-text/editor.css 305 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 193 B
build/block-library/blocks/navigation-link/style.css 192 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 734 B
build/block-library/blocks/post-featured-image/editor.css 732 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 397 B
build/block-library/blocks/post-template/style.css 396 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 354 B
build/block-library/blocks/pullquote/style.css 353 B
build/block-library/blocks/pullquote/theme-rtl.css 174 B
build/block-library/blocks/pullquote/theme.css 174 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 B
build/block-library/blocks/quote/theme-rtl.css 233 B
build/block-library/blocks/quote/theme.css 235 B
build/block-library/blocks/read-more/style-rtl.css 140 B
build/block-library/blocks/read-more/style.css 140 B
build/block-library/blocks/rss/editor-rtl.css 156 B
build/block-library/blocks/rss/editor.css 157 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 690 B
build/block-library/blocks/search/style.css 689 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 478 B
build/block-library/blocks/separator/style-rtl.css 239 B
build/block-library/blocks/separator/style.css 239 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 805 B
build/block-library/blocks/site-logo/editor.css 805 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/spacer/editor-rtl.css 350 B
build/block-library/blocks/spacer/editor.css 350 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/template-part/editor-rtl.css 393 B
build/block-library/blocks/template-part/editor.css 393 B
build/block-library/blocks/template-part/theme-rtl.css 107 B
build/block-library/blocks/template-part/theme.css 107 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 133 B
build/block-library/blocks/video/theme.css 133 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 218 kB
build/block-library/theme-rtl.css 707 B
build/block-library/theme.css 713 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.7 kB
build/commands/index.min.js 15.1 kB
build/commands/style-rtl.css 953 B
build/commands/style.css 951 B
build/components/index.min.js 222 kB
build/components/style-rtl.css 11.9 kB
build/components/style.css 11.9 kB
build/compose/index.min.js 12.8 kB
build/core-commands/index.min.js 2.81 kB
build/core-data/index.min.js 72.5 kB
build/customize-widgets/index.min.js 10.9 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 9 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 578 B
build/edit-post/index.min.js 14.4 kB
build/edit-post/style-rtl.css 2.68 kB
build/edit-post/style.css 2.68 kB
build/edit-site/index.min.js 222 kB
build/edit-site/style-rtl.css 12.9 kB
build/edit-site/style.css 12.9 kB
build/edit-widgets/index.min.js 17.5 kB
build/edit-widgets/style-rtl.css 4.18 kB
build/edit-widgets/style.css 4.18 kB
build/editor/index.min.js 84.7 kB
build/editor/style-rtl.css 8.3 kB
build/editor/style.css 8.31 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.07 kB
build/format-library/style-rtl.css 493 B
build/format-library/style.css 492 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/debug.min.js 16.2 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/index.min.js 13 kB
build/interactivity/navigation.min.js 1.17 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 2.79 kB
build/interactivity/search.min.js 618 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.3 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 851 B
build/list-reusable-blocks/style.css 851 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.57 kB
build/nux/style-rtl.css 748 B
build/nux/style.css 744 B
build/patterns/index.min.js 6.45 kB
build/patterns/style-rtl.css 595 B
build/patterns/style.css 595 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.85 kB
build/preferences/style-rtl.css 710 B
build/preferences/style.css 712 B
build/primitives/index.min.js 809 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 623 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.7 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.93 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.02 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.74 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react.min.js 4.03 kB
build/viewport/index.min.js 957 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.11 kB
build/widgets/style-rtl.css 1.17 kB
build/widgets/style.css 1.17 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@talldan
Copy link
Contributor

talldan commented Apr 26, 2024

The rounded style for the image block looks a little different in this PR compared to trunk.

This PR:
Screenshot 2024-04-26 at 4 15 22 pm

Trunk:
Screenshot 2024-04-26 at 4 15 01 pm

In this PR, this style rule seems to be taking precedence:

.wp-block-image .is-style-rounded img, .wp-block-image.is-style-circle-mask img, .wp-block-image.is-style-rounded img {
    border-radius: 9999px;
}

While in trunk it's this one:

.wp-block-image.is-style-rounded img, .wp-block-image.is-style-rounded .wp-block-image__crop-area, .wp-block-image.is-style-rounded .components-placeholder {
    border-radius: var(--wp--preset--spacing--20);
}

I'm not sure why there are two different 'rounded' styles 🤔

@aaronrobertshaw
Copy link
Contributor Author

Thanks for flagging that @talldan 👍

I'm not sure why there are two different 'rounded' styles 🤔

TwentyTwentyFour customizes the core image block's rounded style via theme.json.

I'll need to drop the specificity of the style within the Image block's stylesheet. I mistakenly thought this had already been done in other recent specificity related PRs and so never brought that tweak into the primary section styling PR.

Before the section styling work, only core blocks' style variations could be customized through theme.json or global styles. My thinking is that if a theme or custom block adopts the enhanced block style variations, they might need to tweak their selectors to ensure they play nice with the reduced specificity needed to nest variations.

It might be possible to leave variation styles at the current specificity but I believe long term we'll be best served keeping it to the minimum from the start if possible.

@aaronrobertshaw
Copy link
Contributor Author

I've updated the Image block's rounded style variation but there are a few other core blocks that need further attention. I'll work through those and update again when this is ready for review again.

@tellthemachines
Copy link
Contributor

I've updated the Image block's rounded style variation but there are a few other core blocks that need further attention. I'll work through those and update again when this is ready for review again.

Yeah I'm afraid there hasn't been a concerted effort to lower specificity of all block library styles that might conflict with global ones; we've been doing it piecemeal as we find conflicts. We should probably lower specificity on all styles related to margin, padding, color and typography on all blocks (except ones like Gallery that have custom layout logic). Are you thinking of doing all that as part of this PR, or would it be better handled separately?

@aaronrobertshaw
Copy link
Contributor Author

We should probably lower specificity on all styles related to margin, padding, color and typography on all blocks

A dedicated sweep sounds like a good option to avoid discovering conflicts in bit by bit kind of way.

Are you thinking of doing all that as part of this PR, or would it be better handled separately?

I'm a little torn on this.

The best situation for the extended block style variations is the reduced specificity for their styles. This makes them dependent on this PR, so it would be great not to block it. On the other hand, we don't want to break anything.

My current thinking/hope was that we could only update styles that impact block style variations as part of this PR's scope. That way we limit any breakage there but somewhat keep the block style variations stuff moving.

In other words, not every margin, padding, color, and typography, style on core blocks will be in the scope of this PR. Only those that disrupt a block style variation for now. What do you think?

@tellthemachines
Copy link
Contributor

My current thinking/hope was that we could only update styles that impact block style variations as part of this PR's scope. That way we limit any breakage there but somewhat keep the block style variations stuff moving.

That sounds good! We can do the rest later. Agree this PR shouldn't be blocked by that work.

@aaronrobertshaw
Copy link
Contributor Author

aaronrobertshaw commented May 1, 2024

Quick Update

While working through a few of the block style variation default styles enqueued by core blocks, some edge cases have arisen that may postpone being able to land this reduction in block style variation specificity.

Button Block

The button block's stylesheet adds a default style for the Outline style variation, making the background transparent.

If this selector's specificity is reduced to zero that default transparent background is lost to any global styles for the Button block or button element as these block library styles are loaded before the global styles.

To fix this, we'd need a means of moving the default background style for the outline style variation to after the main global styles and before the block style variation styles. Some options here might be to introduce a new type of stylesheet for blocks, similar to theme.scss e.g. variation-defaults.scss. Another possibility could be to extend the block.json styles property to contain style data and implement the feature so these styles are generated and enqueued for both classic and block themes.

Social Links

The social links block uses the Button component in the editor. This component sets padding styles that would override the default styles for some block style variations if they are reduced to zero specificity.

One option is that we could add an "unstyled" variant to the button component that doesn't include any styling at all.

Table and Separator blocks

I'm still working through the default variation styles for the Table and Separator blocks so there may still be some additional edge cases to add to this list.

@aaronrobertshaw
Copy link
Contributor Author

I've worked through the block library's styles that touch on block style variations. It needs some further testing before it will be ready for a final review though.

There have also been some inline comments added to stylesheets where the reduction of specificity doesn't make sense. I'm happy to revert these if people don't think they add value. At the least, while reviewing they should flag that the selectors in question have been considered.

The blocks in the library containing block styles include:

  • Button
  • Image
  • Pullquote
  • Separator
  • Site Logo
  • Social Link/s
  • Table
  • Tag Cloud

The Social Links styles have been updated to be compatible with the zero specificity of global block style variations. This includes fixing a regression introduced by #60106.

Important: Reducing the Social Links block's selectors to zero allows bleed from the List block's styles due to it's element based selector ul,ol. There is currently an open PR to add a classname to the List block (#56469) which would resolve the issue here.

@tellthemachines
Copy link
Contributor

Important: Reducing the Social Links block's selectors to zero allows bleed from the List block's styles due to it's element based selector ul,ol

This should now be fixed with #56469 merged!


// This is also set in style.scss, but needs a higher specificity in editor
// due to the way that color block supports adds additional background color styles.
&.wp-block-separator.is-style-dots {
Copy link
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.

this is already in the frontend css so this is just clean up 👍

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

Choose a reason for hiding this comment

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

Love ❤️

@aaronrobertshaw
Copy link
Contributor Author

aaronrobertshaw commented May 10, 2024

There appears to be one remaining issue with this PR. The Gutenberg reset CSS generates 0-0-1 specificity styles that currently override the zero specificity styles for block types.

The selectors for these resets are only matched when the editor is iframed e.g. for classic themes or with old block versions.

@aaronrobertshaw aaronrobertshaw added the Needs Dev Note Requires a developer note for a major WordPress release cycle label May 13, 2024
@aaronrobertshaw
Copy link
Contributor Author

I've put together a GitHub discussion to help settle on CSS Specificity for WP 6.6.

@aaronrobertshaw
Copy link
Contributor Author

After some discussion, and taking into account the limited time before the 6.6 beta, the option to use a :root prefix seems the safest bet and appears to have majority support.

I'll update this PR accordingly.

@aaronrobertshaw
Copy link
Contributor Author

The changes from this PR are being rolled into #61638. Closing in favour of that PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block Style Variations Issues or PRs that are related to the style variations for blocks Needs Dev Note Requires a developer note for a major WordPress release cycle [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Block Styles: Reducing specificity of default block style variation styles
4 participants