From 5c94fd707621165ee16ddcf39e3288fe9311fdf5 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Thu, 23 Apr 2026 20:24:50 +0900 Subject: [PATCH 1/3] Tabs: Add classic theme styles to reset button defaults Classic themes apply colors and focus/hover styles to button elements with high specificity, which leaks into the Tab block's toggle button. Mirror the Accordion Heading toggle approach so tabs inherit the surrounding colors and present a predictable focus outline. Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/block-library/src/classic.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/block-library/src/classic.scss b/packages/block-library/src/classic.scss index 7b9ac61e6cbba8..85a624fc964b0c 100644 --- a/packages/block-library/src/classic.scss +++ b/packages/block-library/src/classic.scss @@ -58,3 +58,24 @@ outline: auto; } } + +.wp-block-tab { + // Button elements can have colors applied with high CSS specificity, + // and since this specificity is impossible to predict, we use + // `!important` to reset the color. + background-color: inherit !important; + color: inherit !important; + + &:hover, + &:focus { + // Sometimes styles are applied when the button element is + // hovered over or focused. This isn't expected for accordion + // toggle buttons, so reset those styles here. + text-decoration: none; + } + + &:focus-visible { + outline-offset: 0; + outline: auto; + } +} From 1d752fd6fb0151e2fdb3a224a4319ec22e61304d Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Thu, 23 Apr 2026 20:40:29 +0900 Subject: [PATCH 2/3] Tabs: Fix misleading comment copied from accordion styles The reset styles for .wp-block-tab were adapted from the accordion heading toggle, and the inline comment still referenced "accordion toggle buttons". Update it to describe tab buttons so the rationale matches the selector. Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/block-library/src/classic.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/classic.scss b/packages/block-library/src/classic.scss index 85a624fc964b0c..ae4007aa2b5f42 100644 --- a/packages/block-library/src/classic.scss +++ b/packages/block-library/src/classic.scss @@ -69,8 +69,8 @@ &:hover, &:focus { // Sometimes styles are applied when the button element is - // hovered over or focused. This isn't expected for accordion - // toggle buttons, so reset those styles here. + // hovered over or focused. This isn't expected for tab + // buttons, so reset those styles here. text-decoration: none; } From 6585d3f87a3a83248f025746896040ec1da03ff0 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Sat, 25 Apr 2026 10:26:09 +0900 Subject: [PATCH 3/3] Tabs: Preserve user-defined colors against classic theme reset Scope the inherit !important resets so they apply only when the tab does not carry has-text-color or has-background classes, allowing explicitly chosen colors to take effect under classic themes. --- packages/block-library/src/classic.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/classic.scss b/packages/block-library/src/classic.scss index ae4007aa2b5f42..0ef178762f28c2 100644 --- a/packages/block-library/src/classic.scss +++ b/packages/block-library/src/classic.scss @@ -63,8 +63,12 @@ // Button elements can have colors applied with high CSS specificity, // and since this specificity is impossible to predict, we use // `!important` to reset the color. - background-color: inherit !important; - color: inherit !important; + &:not(.has-text-color) { + color: inherit !important; + } + &:not(.has-background) { + background-color: inherit !important; + } &:hover, &:focus {