From cdae1aff1802727f0c8153b6b184d79a16e126f7 Mon Sep 17 00:00:00 2001 From: softglazee Date: Tue, 1 Sep 2026 07:57:54 +0500 Subject: [PATCH] Style: Stop link colours repainting block button labels. The link rules in wp4.css are more specific than the button colours the block theme emits. Core emits :root :where( .wp-block-button .wp-block-button__link ) which is specificity (0,1,0), because :where() adds nothing. The link rules `a:link`, `a:visited` and `a:hover` are (0,1,1), so they win and repaint button labels with the body link colour while the button keeps its own background. On Planet that renders #21759b on #3858e9, a contrast ratio of 1.09:1, and #d54e21 on #3858e9 on hover, 1.32:1. Guard the three link rules with :where( :not( .wp-element-button ) ), which leaves their specificity unchanged so nothing else in the cascade moves, and is the same idiom core already uses for :root :where( a:where( :not( .wp-element-button ) ):hover ). Excluding buttons from a:hover also removes the only hover feedback Planet had, so add the hover, focus and active states from the button custom properties the wporg parent theme already defines. Pages that load the parent theme's button stylesheet are unaffected: those rules are (0,2,0) and load later. Measured on planet.wordpress.org: rest #ffffff on #3858e9 5.61:1 (was 1.09:1) hover #ffffff on #213fd4 7.70:1 (was 1.32:1) active #ffffff on #1e1e1e 16.67:1 The hover result matches wordpress.org/download/, which does not load wp4.css and gets these states from the parent theme. Ordinary links are untouched: 1,335 non-button links on the Planet front page keep #21759b, and the search icon button is unchanged. See https://meta.trac.wordpress.org/ticket/8418 --- wordpress.org/public_html/style/wp4-rtl.css | 26 ++++++++++++++++--- wordpress.org/public_html/style/wp4.css | 28 ++++++++++++++++++--- 2 files changed, 47 insertions(+), 7 deletions(-) diff --git a/wordpress.org/public_html/style/wp4-rtl.css b/wordpress.org/public_html/style/wp4-rtl.css index a2f4f48da8..043d401009 100644 --- a/wordpress.org/public_html/style/wp4-rtl.css +++ b/wordpress.org/public_html/style/wp4-rtl.css @@ -47,7 +47,7 @@ pre { pre a { font-weight: normal; } -a { +a:where(:not(.wp-element-button)) { color: #21759b; text-decoration: none; font-weight: normal; @@ -57,7 +57,7 @@ strong a { font-weight: bold; } -a:visited { +a:visited:where(:not(.wp-element-button)) { color: #4ca6cf; } @@ -71,7 +71,27 @@ h3 a { font-weight: bold; } p a:hover { border-bottom: 1px solid #d54e21; } -a:hover { color: #d54e21; } +a:hover:where(:not(.wp-element-button)) { color: #d54e21; } + +/* + * Buttons are not body links. The link colours above are more specific than the + * button colours the block theme emits, which is `:root :where( .wp-block-button + * .wp-block-button__link )`, so without the `:not( .wp-element-button )` guards + * they repaint button labels. These rules restore the hover, focus and active + * states from the same button custom properties the wporg parent theme uses, for + * pages that load wp4.css and not the parent theme's button stylesheet. + * See https://meta.trac.wordpress.org/ticket/8418 + */ +.wp-block-button__link:hover, +.wp-block-button__link:focus { + color: var( --wp--custom--button--hover--color--text, #fff ); + background-color: var( --wp--custom--button--hover--color--background, #213fd4 ); +} + +.wp-block-button__link:active { + color: var( --wp--custom--button--active--color--text, #fff ); + background-color: var( --wp--custom--button--active--color--background, #1e1e1e ); +} h2, h1.heading { diff --git a/wordpress.org/public_html/style/wp4.css b/wordpress.org/public_html/style/wp4.css index 69fc1a641a..6195f5f664 100644 --- a/wordpress.org/public_html/style/wp4.css +++ b/wordpress.org/public_html/style/wp4.css @@ -47,8 +47,8 @@ pre { pre a { font-weight: normal; } -a:link, /* https://wordpress.slack.com/archives/C02QB2JS7/p1768980644711199 */ -a { +a:link:where(:not(.wp-element-button)), /* https://wordpress.slack.com/archives/C02QB2JS7/p1768980644711199 */ +a:where(:not(.wp-element-button)) { color: #21759b; text-decoration: none; font-weight: normal; @@ -58,7 +58,7 @@ strong a { font-weight: bold; } -a:visited { +a:visited:where(:not(.wp-element-button)) { color: #4ca6cf; } @@ -72,7 +72,27 @@ h3 a { font-weight: bold; } p a:hover { border-bottom: 1px solid #d54e21; } -a:hover { color: #d54e21; } +a:hover:where(:not(.wp-element-button)) { color: #d54e21; } + +/* + * Buttons are not body links. The link colours above are more specific than the + * button colours the block theme emits, which is `:root :where( .wp-block-button + * .wp-block-button__link )`, so without the `:not( .wp-element-button )` guards + * they repaint button labels. These rules restore the hover, focus and active + * states from the same button custom properties the wporg parent theme uses, for + * pages that load wp4.css and not the parent theme's button stylesheet. + * See https://meta.trac.wordpress.org/ticket/8418 + */ +.wp-block-button__link:hover, +.wp-block-button__link:focus { + color: var( --wp--custom--button--hover--color--text, #fff ); + background-color: var( --wp--custom--button--hover--color--background, #213fd4 ); +} + +.wp-block-button__link:active { + color: var( --wp--custom--button--active--color--text, #fff ); + background-color: var( --wp--custom--button--active--color--background, #1e1e1e ); +} h2, h1.heading {