Skip to content

Tabs: Add classic theme styles to reset button defaults #77607

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

Merged
t-hamano merged 3 commits into from
Apr 28, 2026
Merged

Tabs: Add classic theme styles to reset button defaults #77607

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c94fd7
Tabs: Add classic theme styles to reset button defaults
t-hamano Apr 23, 2026
1d752fd
Tabs: Fix misleading comment copied from accordion styles
t-hamano Apr 23, 2026
6585d3f
Tabs: Preserve user-defined colors against classic theme reset
t-hamano Apr 25, 2026
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
21 changes: 21 additions & 0 deletions packages/block-library/src/classic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

@mirka mirka Apr 24, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

In a case with user-defined custom colors, do you know if we can be sure that the custom colors styles will always be loaded after classic.css? 😅 Looks a bit precarious at the moment, but maybe fine if the order is guaranteed.

Tabs with custom text/background colors

(I'm not familiar with these block library features, so I might be missing things.)

@t-hamano t-hamano Apr 25, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Nice catch! We can prioritize user-defined colors by checking for the CSS classes has-text-color or has-background.

Fixed in 6585d3f


&:hover,
&:focus {
// Sometimes styles are applied when the button element is
// hovered over or focused. This isn't expected for tab
// buttons, so reset those styles here.
text-decoration: none;
}

&:focus-visible {
outline-offset: 0;
outline: auto;
}
}
Loading