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

Navigation block: Allow themes to override block library text-decoration rule #63406

Merged
merged 3 commits into from
Jul 17, 2024

Conversation

talldan
Copy link
Contributor

@talldan talldan commented Jul 11, 2024

What?

In a default install of WordPress 6.5, when hovering over a navigation link an underline is shown.

In 6.6 this doesn't happen. Theme developers are unable to override block library styles for text decoration.

Why?

In 6.5, there's a CSS rule that sets the underline hover with the specificity of 0,2,1 (it comes from the TT4's theme.json):

.wp-block-navigation a:where(:not(.wp-element-button)):hover {
    text-decoration: underline;
}

It overrides some of the block library css (specificity 0,1,1):

.wp-block-navigation:where(:not([class*=has-text-decoration])) a {
    text-decoration: none;
}

In 6.6, the first rule's specificity was reduced to 0,1,0, and now the block library css has a higher specificity it results in that taking precedence and no hover underline styles.

How?

This reduces the specificity of the block library css to 0,1,0, following the general rule that theme.json/global styles should be able to override block css.

Testing Instructions

Simple test of hover styles

  1. View the frontend of a default WordPress install and hover over a navigation link

Expected: the link should be underlined

Active and Focus styles

  1. Activate emptytheme
  2. Add active/focus styles to link elements in the nav block within your theme.json using the snippet below
  3. Add nav block to a page without customizing its styles
  4. Load the page on the frontend

Expected: Navigation block links have line-through styles when focused or active

{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	},
	"styles": {
		"blocks": {
			"core/navigation": {
				"elements": {
					"link": {
						":focus": {
							"typography": {
								"textDecoration": "line-through"
							}
						},
						":active": {
							"typography": {
								"textDecoration": "line-through"
							}
						}
					}
				}
			}
		}
	}
}

Screenshots or screencast

Before

Screenshot 2024-07-11 at 4 33 05 PM

After

Screenshot 2024-07-11 at 4 33 17 PM

@talldan talldan added [Type] Bug An existing feature does not function as intended [Block] Navigation Affects the Navigation Block Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release labels Jul 11, 2024
@talldan talldan self-assigned this Jul 11, 2024
@talldan talldan requested a review from ajitbohra as a code owner July 11, 2024 08:35
Copy link

github-actions bot commented Jul 11, 2024

Size Change: +1.6 kB (+0.09%)

Total Size: 1.75 MB

Filename Size Change
build/block-editor/index.min.js 254 kB +50 B (+0.02%)
build/block-editor/style-rtl.css 16.3 kB -63 B (-0.39%)
build/block-editor/style.css 16.3 kB -60 B (-0.37%)
build/block-library/blocks/categories/editor-rtl.css 132 B +19 B (+16.81%) ⚠️
build/block-library/blocks/categories/editor.css 131 B +19 B (+16.96%) ⚠️
build/block-library/blocks/categories/style-rtl.css 152 B +28 B (+22.58%) 🚨
build/block-library/blocks/categories/style.css 152 B +28 B (+22.58%) 🚨
build/block-library/blocks/image/view.min.js 1.58 kB +52 B (+3.41%)
build/block-library/blocks/list/style-rtl.css 107 B +3 B (+2.88%)
build/block-library/blocks/list/style.css 107 B +3 B (+2.88%)
build/block-library/blocks/navigation/style-rtl.css 2.25 kB -17 B (-0.75%)
build/block-library/blocks/navigation/style.css 2.23 kB -17 B (-0.75%)
build/block-library/blocks/query/editor-rtl.css 452 B -62 B (-12.06%) 👏
build/block-library/blocks/query/editor.css 451 B -62 B (-12.09%) 👏
build/block-library/editor-rtl.css 11.9 kB -36 B (-0.3%)
build/block-library/editor.css 11.8 kB -38 B (-0.32%)
build/block-library/index.min.js 216 kB +434 B (+0.2%)
build/block-library/style-rtl.css 14.6 kB -5 B (-0.03%)
build/block-library/style.css 14.6 kB -6 B (-0.04%)
build/commands/index.min.js 16.1 kB +867 B (+5.7%) 🔍
build/components/index.min.js 221 kB +114 B (+0.05%)
build/core-commands/index.min.js 2.78 kB +9 B (+0.32%)
build/core-data/index.min.js 72.7 kB -40 B (-0.05%)
build/customize-widgets/index.min.js 11 kB +10 B (+0.09%)
build/edit-post/index.min.js 12.6 kB +28 B (+0.22%)
build/edit-site/index.min.js 211 kB -108 B (-0.05%)
build/edit-site/posts-rtl.css 6.64 kB +13 B (+0.2%)
build/edit-site/posts.css 6.64 kB +13 B (+0.2%)
build/edit-site/style-rtl.css 11.7 kB +12 B (+0.1%)
build/edit-site/style.css 11.7 kB +13 B (+0.11%)
build/edit-widgets/index.min.js 17.6 kB +6 B (+0.03%)
build/edit-widgets/style-rtl.css 4.2 kB +15 B (+0.36%)
build/edit-widgets/style.css 4.2 kB +15 B (+0.36%)
build/editor/index.min.js 98.1 kB +263 B (+0.27%)
build/editor/style-rtl.css 9.1 kB +1 B (+0.01%)
build/interactivity/image.min.js 1.72 kB +53 B (+3.19%)
build/patterns/index.min.js 7.36 kB +17 B (+0.23%)
build/reusable-blocks/index.min.js 2.74 kB +11 B (+0.4%)
build/style-engine/index.min.js 2.03 kB +17 B (+0.84%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 951 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.31 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/index.min.js 7.29 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/content-rtl.css 4.58 kB
build/block-editor/content.css 4.58 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
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 149 B
build/block-library/blocks/audio/editor.css 151 B
build/block-library/blocks/audio/style-rtl.css 132 B
build/block-library/blocks/audio/style.css 132 B
build/block-library/blocks/audio/theme-rtl.css 134 B
build/block-library/blocks/audio/theme.css 134 B
build/block-library/blocks/avatar/editor-rtl.css 115 B
build/block-library/blocks/avatar/editor.css 115 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 310 B
build/block-library/blocks/button/editor.css 310 B
build/block-library/blocks/button/style-rtl.css 538 B
build/block-library/blocks/button/style.css 538 B
build/block-library/blocks/buttons/editor-rtl.css 336 B
build/block-library/blocks/buttons/editor.css 336 B
build/block-library/blocks/buttons/style-rtl.css 328 B
build/block-library/blocks/buttons/style.css 328 B
build/block-library/blocks/calendar/style-rtl.css 240 B
build/block-library/blocks/calendar/style.css 240 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 122 B
build/block-library/blocks/code/theme.css 122 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 420 B
build/block-library/blocks/columns/style.css 420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 124 B
build/block-library/blocks/comment-author-avatar/editor.css 124 B
build/block-library/blocks/comment-content/style-rtl.css 90 B
build/block-library/blocks/comment-content/style.css 90 B
build/block-library/blocks/comment-template/style-rtl.css 200 B
build/block-library/blocks/comment-template/style.css 199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 221 B
build/block-library/blocks/comments-pagination/editor.css 211 B
build/block-library/blocks/comments-pagination/style-rtl.css 234 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 832 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 631 B
build/block-library/blocks/cover/editor-rtl.css 668 B
build/block-library/blocks/cover/editor.css 669 B
build/block-library/blocks/cover/style-rtl.css 1.62 kB
build/block-library/blocks/cover/style.css 1.6 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 314 B
build/block-library/blocks/embed/editor.css 314 B
build/block-library/blocks/embed/style-rtl.css 419 B
build/block-library/blocks/embed/style.css 419 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 326 B
build/block-library/blocks/file/style-rtl.css 278 B
build/block-library/blocks/file/style.css 279 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 198 B
build/block-library/blocks/footnotes/style.css 197 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 229 B
build/block-library/blocks/form-input/style-rtl.css 342 B
build/block-library/blocks/form-input/style.css 342 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 344 B
build/block-library/blocks/form-submission-notification/editor.css 341 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 470 B
build/block-library/blocks/freeform/editor-rtl.css 2.6 kB
build/block-library/blocks/freeform/editor.css 2.6 kB
build/block-library/blocks/gallery/editor-rtl.css 958 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.71 kB
build/block-library/blocks/gallery/style.css 1.71 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 402 B
build/block-library/blocks/group/editor.css 402 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 79 B
build/block-library/blocks/group/theme.css 79 B
build/block-library/blocks/heading/style-rtl.css 188 B
build/block-library/blocks/heading/style.css 188 B
build/block-library/blocks/html/editor-rtl.css 346 B
build/block-library/blocks/html/editor.css 347 B
build/block-library/blocks/image/editor-rtl.css 845 B
build/block-library/blocks/image/editor.css 843 B
build/block-library/blocks/image/style-rtl.css 1.54 kB
build/block-library/blocks/image/style.css 1.54 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 355 B
build/block-library/blocks/latest-comments/style.css 354 B
build/block-library/blocks/latest-posts/editor-rtl.css 204 B
build/block-library/blocks/latest-posts/editor.css 204 B
build/block-library/blocks/latest-posts/style-rtl.css 509 B
build/block-library/blocks/latest-posts/style.css 510 B
build/block-library/blocks/media-text/editor-rtl.css 304 B
build/block-library/blocks/media-text/editor.css 303 B
build/block-library/blocks/media-text/style-rtl.css 516 B
build/block-library/blocks/media-text/style.css 515 B
build/block-library/blocks/more/editor-rtl.css 427 B
build/block-library/blocks/more/editor.css 427 B
build/block-library/blocks/navigation-link/editor-rtl.css 663 B
build/block-library/blocks/navigation-link/editor.css 664 B
build/block-library/blocks/navigation-link/style-rtl.css 192 B
build/block-library/blocks/navigation-link/style.css 191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 295 B
build/block-library/blocks/navigation-submenu/editor.css 294 B
build/block-library/blocks/navigation/editor-rtl.css 2.2 kB
build/block-library/blocks/navigation/editor.css 2.21 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 392 B
build/block-library/blocks/nextpage/editor.css 392 B
build/block-library/blocks/page-list/editor-rtl.css 378 B
build/block-library/blocks/page-list/editor.css 378 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 236 B
build/block-library/blocks/paragraph/editor.css 236 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 340 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 522 B
build/block-library/blocks/post-comments-form/style.css 522 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 62 B
build/block-library/blocks/post-date/style.css 62 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 729 B
build/block-library/blocks/post-featured-image/editor.css 726 B
build/block-library/blocks/post-featured-image/style-rtl.css 341 B
build/block-library/blocks/post-featured-image/style.css 341 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 399 B
build/block-library/blocks/post-template/style.css 398 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 70 B
build/block-library/blocks/post-time-to-read/style.css 70 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 134 B
build/block-library/blocks/pullquote/editor.css 134 B
build/block-library/blocks/pullquote/style-rtl.css 342 B
build/block-library/blocks/pullquote/style.css 342 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 121 B
build/block-library/blocks/query-pagination-numbers/editor.css 118 B
build/block-library/blocks/query-pagination/editor-rtl.css 220 B
build/block-library/blocks/query-pagination/editor.css 208 B
build/block-library/blocks/query-pagination/style-rtl.css 287 B
build/block-library/blocks/query-pagination/style.css 283 B
build/block-library/blocks/query-title/style-rtl.css 64 B
build/block-library/blocks/query-title/style.css 64 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 238 B
build/block-library/blocks/quote/style.css 238 B
build/block-library/blocks/quote/theme-rtl.css 221 B
build/block-library/blocks/quote/theme.css 225 B
build/block-library/blocks/read-more/style-rtl.css 138 B
build/block-library/blocks/read-more/style.css 138 B
build/block-library/blocks/rss/editor-rtl.css 101 B
build/block-library/blocks/rss/editor.css 101 B
build/block-library/blocks/rss/style-rtl.css 288 B
build/block-library/blocks/rss/style.css 287 B
build/block-library/blocks/search/editor-rtl.css 183 B
build/block-library/blocks/search/editor.css 183 B
build/block-library/blocks/search/style-rtl.css 672 B
build/block-library/blocks/search/style.css 671 B
build/block-library/blocks/search/theme-rtl.css 113 B
build/block-library/blocks/search/theme.css 113 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 100 B
build/block-library/blocks/separator/editor.css 100 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 195 B
build/block-library/blocks/separator/theme.css 195 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 806 B
build/block-library/blocks/site-logo/editor.css 803 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-title/editor-rtl.css 123 B
build/block-library/blocks/site-title/editor.css 123 B
build/block-library/blocks/site-title/style-rtl.css 71 B
build/block-library/blocks/site-title/style.css 71 B
build/block-library/blocks/social-link/editor-rtl.css 338 B
build/block-library/blocks/social-link/editor.css 338 B
build/block-library/blocks/social-links/editor-rtl.css 676 B
build/block-library/blocks/social-links/editor.css 675 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.5 kB
build/block-library/blocks/spacer/editor-rtl.css 346 B
build/block-library/blocks/spacer/editor.css 346 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 394 B
build/block-library/blocks/table/editor.css 394 B
build/block-library/blocks/table/style-rtl.css 640 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/tag-cloud/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 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 113 B
build/block-library/blocks/template-part/theme.css 113 B
build/block-library/blocks/term-description/style-rtl.css 108 B
build/block-library/blocks/term-description/style.css 108 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 165 B
build/block-library/blocks/text-columns/style.css 165 B
build/block-library/blocks/verse/style-rtl.css 98 B
build/block-library/blocks/verse/style.css 98 B
build/block-library/blocks/video/editor-rtl.css 553 B
build/block-library/blocks/video/editor.css 554 B
build/block-library/blocks/video/style-rtl.css 192 B
build/block-library/blocks/video/style.css 192 B
build/block-library/blocks/video/theme-rtl.css 134 B
build/block-library/blocks/video/theme.css 134 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 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/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/theme-rtl.css 702 B
build/block-library/theme.css 707 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 52.3 kB
build/commands/style-rtl.css 955 B
build/commands/style.css 952 B
build/components/style-rtl.css 12 kB
build/components/style.css 12 kB
build/compose/index.min.js 12.9 kB
build/customize-widgets/style-rtl.css 1.35 kB
build/customize-widgets/style.css 1.35 kB
build/data-controls/index.min.js 641 B
build/data/index.min.js 8.98 kB
build/date/index.min.js 18 kB
build/deprecated/index.min.js 458 B
build/dom-ready/index.min.js 325 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-post/style-rtl.css 2.34 kB
build/edit-post/style.css 2.33 kB
build/editor/style.css 9.1 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 506 B
build/format-library/style.css 505 B
build/hooks/index.min.js 1.54 kB
build/html-entities/index.min.js 445 B
build/i18n/index.min.js 3.58 kB
build/interactivity/debug.min.js 16.5 kB
build/interactivity/file.min.js 447 B
build/interactivity/index.min.js 13.4 kB
build/interactivity/navigation.min.js 1.16 kB
build/interactivity/query.min.js 742 B
build/interactivity/router.min.js 2.8 kB
build/interactivity/search.min.js 615 B
build/is-shallow-equal/index.min.js 526 B
build/keyboard-shortcuts/index.min.js 1.31 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.16 kB
build/list-reusable-blocks/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.3 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.58 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/style-rtl.css 687 B
build/patterns/style.css 685 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/preferences/style-rtl.css 578 B
build/preferences/style.css 578 B
build/primitives/index.min.js 829 B
build/priority-queue/index.min.js 1.54 kB
build/private-apis/index.min.js 1.01 kB
build/react-i18n/index.min.js 630 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.76 kB
build/redux-routine/index.min.js 2.69 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.96 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.4 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.85 kB
build/vendors/react-dom.min.js 42.8 kB
build/vendors/react-jsx-runtime.min.js 560 B
build/vendors/react.min.js 2.65 kB
build/viewport/index.min.js 965 B
build/warning/index.min.js 250 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@talldan talldan changed the title Reduce specificity of navigation text decoration rule Navigation block: Allow themes to override block library text-decoration rule Jul 11, 2024
&:where(:not([class*="has-text-decoration"])) {
a {
text-decoration: none;
&:where(:not([class*="has-text-decoration"])) :where(a) {
Copy link
Member

Choose a reason for hiding this comment

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

Could these be combined into a single where?

Copy link
Member

Choose a reason for hiding this comment

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

Another question: do we still need the :not([class*="has-text-decoration"]) if the specificity is lowered? Ideally if it has that class, it should just override this rule and the exception should no longer be needed.

Copy link
Contributor Author

@talldan talldan Jul 12, 2024

Choose a reason for hiding this comment

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

Could these be combined into a single where?

I had already tried this:

&:where(:not([class*="has-text-decoration"]) a)

But that selector doesn't work. Is there another way?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Another question: do we still need the :not([class*="has-text-decoration"]) if the specificity is lowered? Ideally if it has that class, it should just override this rule and the exception should no longer be needed.

It does seem needed, it overrides a general rule for links that are not buttons which gives them underlines:
Screenshot 2024-07-12 at 3 24 33 PM

That should be a bit more obvious when testing now that I've rebased to include the fix from #63403.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've applied Aaron's suggestion now so it looks a little different - #63406 (comment)

Copy link
Contributor

Choose a reason for hiding this comment

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

It does seem needed, it overrides a general rule for links that are not buttons which gives them underlines:

Removing the :where(:not([class*=has-text-decoration])) won't change the specificity. So the selector would remain 0-1-0 specificity and continue to override a:where(:not(.wp-element-button)) which is only 0-0-1.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh, I misunderstood what was meant in the original comment. I've gone ahead and removed that. 👍

Copy link

github-actions bot commented Jul 11, 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: talldan <talldanwp@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>

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

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Thanks for putting this together @talldan 👍

This tests as advertised for me regarding the :hover styles set on link elements in the nav block like TT4 does.

The :focus and :active pseudo classes still bump the specificity and override anything set for those link pseudo selectors in theme.json.

For the most part it appears that setting the text decoration at the block level (not elements) still works due to the way browsers render text decoration differently.

I primarily tested using both emptytheme and TT4. To replicate the issue with :focus and :active:

  1. Activate emptytheme
  2. Add active/focus styles to link elements in the nav block within your theme.json using the snippet below
  3. Add nav block to a page without customizing its styles
  4. Load the page on the frontend and confirm the text-decoration: none rule still overrides the global styles.
{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	},
	"styles": {
		"blocks": {
			"core/navigation": {
				"elements": {
					"link": {
						":focus": {
							"typography": {
								"textDecoration": "line-through"
							}
						},
						":active": {
							"typography": {
								"textDecoration": "line-through"
							}
						}
					}
				}
			}
		}
	}
}
This PR With Suggested Tweak
Screen.Recording.2024-07-12.at.5.18.20.PM.mp4
Screen.Recording.2024-07-12.at.5.17.41.PM.mp4

Comment on lines 82 to 83
&:focus,
&:active {
Copy link
Contributor

Choose a reason for hiding this comment

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

These pseudo styles get appended so the resulting specificity is 0-2-0 which is still higher than global styles.

To my knowledge there isn't an easy way in SCSS to insert the inner :focus/:active into a CSS function in the parent selector i.e. :where(). So I think they need to be written out in full.

	&:where(a),
	&:where(a:focus),
	&:where(a:active) {
		text-decoration: none;
	}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good point, updated in 0f9669a

@talldan talldan force-pushed the fix/navigation-link-hover-style branch from 1586d54 to be5ae55 Compare July 12, 2024 07:24
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

I've retested this and can confirm the :focus and :active styles have been fixed via 0f9669a.

Also, I believe the wrapping &:where(:not([class*="has-text-decoration"])) is not required. I should have been clearer in my review and provided a full diff.

Updated suggestion after `0f9669a`
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 734e3bd04c..3d7a8810ae 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -76,12 +76,10 @@ $navigation-icon-size: 24px;
 		}
 	}
 
-	&:where(:not([class*="has-text-decoration"])) {
-		& :where(a),
-		& :where(a:focus),
-		& :where(a:active) {
-			text-decoration: none;
-		}
+	& :where(a),
+	& :where(a:focus),
+	& :where(a:active) {
+		text-decoration: none;
 	}
 
 	// Submenu indicator.

Using that suggested change, here's what I get using emptytheme and no theme.json block type element styles

Note: Core element styles are correctly overridden by the block library's link styles.

Screen.Recording.2024-07-14.at.4.27.47.PM.mp4

When defining link element styles for the navigation block type in theme.json, this is what I get.

Note: Global Styles for navigation block type link element are applied, overriding the block library styles.

Screen.Recording.2024-07-14.at.4.29.25.PM.mp4
Example theme.json styles
{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	},
	"styles": {
		"blocks": {
			"core/navigation": {
				"elements": {
					"link": {
						"typography": {
							"textDecoration": "none"
						},
						":hover": {
							"typography": {
								"textDecoration": "underline"
							}
						},
						":focus": {
							"typography": {
								"textDecoration": "line-through"
							}
						},
						":active": {
							"typography": {
								"textDecoration": "none"
							}
						}
					}
				}
			}
		}
	}
}

Applying block instance styles for text decoration continue to take precedence over the block library and global styles due to their compound class selector e.g. .wp-block-navigation.has-text-decoration-line-through

packages/block-library/src/navigation/style.scss Outdated Show resolved Hide resolved
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Thanks for the continued iteration here 👍

This is testing well for me now.

The default theme.json element styles are overridden by block library styles, which are in turn correctly overridden by block type element global styles. Applying text decoration on the block instance then takes precedence over all the others.

Given the chance this might need to be included in a WP 6.6.1 point release, it would be good to update the PR test instructions with more detail for others coming to this in the near future.

Screenshot 2024-07-17 at 12 59 34 PM

@talldan talldan merged commit 75b44e7 into trunk Jul 17, 2024
63 checks passed
@talldan talldan deleted the fix/navigation-link-hover-style branch July 17, 2024 03:17
@github-actions github-actions bot added this to the Gutenberg 18.9 milestone Jul 17, 2024
@andrewserong andrewserong added the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label Jul 17, 2024
@andrewserong
Copy link
Contributor

I've added the Backport to Gutenberg RC label and will cherry pick this in for GB 18.8.

Is it worth adding the Backport to WP Beta 6.6/RC label, too, to get it into the wp/6.6 branch?

andrewserong pushed a commit that referenced this pull request Jul 17, 2024
…ion rule (#63406)

* Reduce specificity of navigation text decoration rule

* Apply Aaron suggestion to also lower specificity for focus/active

* Remove `:not([class*="has-text-decoration"])` from selector

----

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
@andrewserong
Copy link
Contributor

I just cherry-picked this PR to the release/18.8 branch to get it included in the next release: 976df1e

@andrewserong andrewserong removed the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label Jul 17, 2024
@talldan
Copy link
Contributor Author

talldan commented Jul 17, 2024

Is it worth adding the Backport to WP Beta 6.6/RC label, too, to get it into the wp/6.6 branch?

I think usually it'd be cherry-picked to that branch as part of the Backport to WP Minor Release process.

I saw there's a slack thread discussing this issue - https://wordpress.slack.com/archives/C02QB2JS7/p1721166077452989, though I'm not sure you need to actually merge into the 6.6 branch to test, you can possibly make a PR that merges into the branch that includes the fix, and a PR usually has a job that builds the plugin zip.

andrewserong pushed a commit that referenced this pull request Jul 17, 2024
…ion rule (#63406)

* Reduce specificity of navigation text decoration rule

* Apply Aaron suggestion to also lower specificity for focus/active

* Remove `:not([class*="has-text-decoration"])` from selector

----

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
@andrewserong
Copy link
Contributor

A separate PR to be on the safe side sounds good, that way folks can grab a zip file from that build if they need to. I've opened up a PR targeting the wp/6.6 branch over in #63641 if you'd like to take a look / confirm it's working as expected in that branch.

I figure that at least gives folks working on a point release enough options to help ensure this fix gets included 🙂

@WordPress WordPress deleted a comment Jul 17, 2024
@andrewserong
Copy link
Contributor

Just giving this PR an explicit 👍 and ✅ from me as resolving the bug and for inclusion in a WP 6.6 point release.

@ellatrix feel free to either land #63641 as the merge into wp/6.6 or cherry pick this PR. Both now have multiple 👍 / approving reviews from folks. Thanks!

@ellatrix ellatrix added Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta and removed Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release labels Jul 18, 2024
@github-actions github-actions bot removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 18, 2024
gutenbergplugin pushed a commit that referenced this pull request Jul 18, 2024
…ion rule (#63406)

* Reduce specificity of navigation text decoration rule

* Apply Aaron suggestion to also lower specificity for focus/active

* Remove `:not([class*="has-text-decoration"])` from selector

----

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
@github-actions github-actions bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Jul 18, 2024
Copy link

I just cherry-picked this PR to the wp/6.6 branch to get it included in the next release: bca5381

pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Jul 18, 2024
Bugfixes included:

* [WordPress/gutenberg#63637 Elements: Avoid specificity bump for top-level element-only selectors].
* [WordPress/gutenberg#63406 Navigation block: Allow themes to override block library text-decoration rule].
* [WordPress/gutenberg#63436 Fix invalid css for nested fullwidth layouts with zero padding applied].
* [WordPress/gutenberg#63397 Prevent empty void at the bottom of editor when block directory results are present].
* [WordPress/gutenberg#63291 Pattern overrides: Ensure "Reset" button always shows as last item and with border].
* [WordPress/gutenberg#63562 Global Styles: Disable "Reset styles" button when there are no changes].
* [WordPress/gutenberg#63093 Fix: Removed shuffle button when only 1 pattern is present].
* [WordPress/gutenberg#62675 fix: wp icon focus issue].
* [WordPress/gutenberg#63565 useBlockElement: return null until ref callback has time to clean up the old element].

Props ellatrix.
Fixes #61692.
See #61660, #61630, #61656.

git-svn-id: https://develop.svn.wordpress.org/trunk@58757 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Jul 18, 2024
Bugfixes included:

* [WordPress/gutenberg#63637 Elements: Avoid specificity bump for top-level element-only selectors].
* [WordPress/gutenberg#63406 Navigation block: Allow themes to override block library text-decoration rule].
* [WordPress/gutenberg#63436 Fix invalid css for nested fullwidth layouts with zero padding applied].
* [WordPress/gutenberg#63397 Prevent empty void at the bottom of editor when block directory results are present].
* [WordPress/gutenberg#63291 Pattern overrides: Ensure "Reset" button always shows as last item and with border].
* [WordPress/gutenberg#63562 Global Styles: Disable "Reset styles" button when there are no changes].
* [WordPress/gutenberg#63093 Fix: Removed shuffle button when only 1 pattern is present].
* [WordPress/gutenberg#62675 fix: wp icon focus issue].
* [WordPress/gutenberg#63565 useBlockElement: return null until ref callback has time to clean up the old element].

Props ellatrix.
Fixes #61692.
See #61660, #61630, #61656.
Built from https://develop.svn.wordpress.org/trunk@58757


git-svn-id: http://core.svn.wordpress.org/trunk@58159 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to gilzow/wordpress-performance that referenced this pull request Jul 18, 2024
Bugfixes included:

* [WordPress/gutenberg#63637 Elements: Avoid specificity bump for top-level element-only selectors].
* [WordPress/gutenberg#63406 Navigation block: Allow themes to override block library text-decoration rule].
* [WordPress/gutenberg#63436 Fix invalid css for nested fullwidth layouts with zero padding applied].
* [WordPress/gutenberg#63397 Prevent empty void at the bottom of editor when block directory results are present].
* [WordPress/gutenberg#63291 Pattern overrides: Ensure "Reset" button always shows as last item and with border].
* [WordPress/gutenberg#63562 Global Styles: Disable "Reset styles" button when there are no changes].
* [WordPress/gutenberg#63093 Fix: Removed shuffle button when only 1 pattern is present].
* [WordPress/gutenberg#62675 fix: wp icon focus issue].
* [WordPress/gutenberg#63565 useBlockElement: return null until ref callback has time to clean up the old element].

Props ellatrix.
Fixes #61692.
See #61660, #61630, #61656.
Built from https://develop.svn.wordpress.org/trunk@58757


git-svn-id: https://core.svn.wordpress.org/trunk@58159 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Jul 18, 2024
Bugfixes included:

* [WordPress/gutenberg#63637 Elements: Avoid specificity bump for top-level element-only selectors].
* [WordPress/gutenberg#63406 Navigation block: Allow themes to override block library text-decoration rule].
* [WordPress/gutenberg#63436 Fix invalid css for nested fullwidth layouts with zero padding applied].
* [WordPress/gutenberg#63397 Prevent empty void at the bottom of editor when block directory results are present].
* [WordPress/gutenberg#63291 Pattern overrides: Ensure "Reset" button always shows as last item and with border].
* [WordPress/gutenberg#63562 Global Styles: Disable "Reset styles" button when there are no changes].
* [WordPress/gutenberg#63093 Fix: Removed shuffle button when only 1 pattern is present].
* [WordPress/gutenberg#62675 fix: wp icon focus issue].
* [WordPress/gutenberg#63565 useBlockElement: return null until ref callback has time to clean up the old element].

Reviewed by spacedmonkey.
Merges [58757] to the 6.6 branch.

Props ellatrix.
Fixes #61692.
See #61660, #61630, #61656.

git-svn-id: https://develop.svn.wordpress.org/branches/6.6@58760 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Jul 18, 2024
Bugfixes included:

* [WordPress/gutenberg#63637 Elements: Avoid specificity bump for top-level element-only selectors].
* [WordPress/gutenberg#63406 Navigation block: Allow themes to override block library text-decoration rule].
* [WordPress/gutenberg#63436 Fix invalid css for nested fullwidth layouts with zero padding applied].
* [WordPress/gutenberg#63397 Prevent empty void at the bottom of editor when block directory results are present].
* [WordPress/gutenberg#63291 Pattern overrides: Ensure "Reset" button always shows as last item and with border].
* [WordPress/gutenberg#63562 Global Styles: Disable "Reset styles" button when there are no changes].
* [WordPress/gutenberg#63093 Fix: Removed shuffle button when only 1 pattern is present].
* [WordPress/gutenberg#62675 fix: wp icon focus issue].
* [WordPress/gutenberg#63565 useBlockElement: return null until ref callback has time to clean up the old element].

Reviewed by spacedmonkey.
Merges [58757] to the 6.6 branch.

Props ellatrix.
Fixes #61692.
See #61660, #61630, #61656.
Built from https://develop.svn.wordpress.org/branches/6.6@58760


git-svn-id: http://core.svn.wordpress.org/branches/6.6@58162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jul 18, 2024
…ion rule (WordPress#63406)

* Reduce specificity of navigation text decoration rule

* Apply Aaron suggestion to also lower specificity for focus/active

* Remove `:not([class*="has-text-decoration"])` from selector

----

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Backported to WP Core Pull request that has been successfully merged into WP Core [Block] Navigation Affects the Navigation Block [Type] Bug An existing feature does not function as intended
Projects
Status: ✅ Done 6.6.1
Development

Successfully merging this pull request may close these issues.

4 participants