Heading block: Make background padding more specific to block #72837
+1
−7
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +29 B (0%) Total Size: 2.38 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in eda1fa3. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18980730490
|
jeryj
reviewed
Oct 30, 2025
| h4, | ||
| h5, | ||
| h6 { | ||
| &.has-background { |
Contributor
There was a problem hiding this comment.
Will this raise the specificity of all theme authors that are targeting h#.has-background? If so, I could see that breaking a lot of sites.
Member
Author
There was a problem hiding this comment.
Ugh yes, it will raise the specificity and make it so theme authors would need to add .wp-block-heading to any existing selectors targeting h#.has-background.
I wonder if we could use :where here to ensure theme authors don't need to update any existing selectors. Maybe this would work: &:where(.wp-block-heading).has-background? I'll do some testing.
Contributor
From a long-term perspective, it's probably best to standardize the CSS specificity to In short, my idea is as follows: // h1,h2,h3,h4,h5,h6 {
// &.has-background {
// padding: $block-bg-padding--v $block-bg-padding--h;
// }
// }
// Use classname instead of element, and lower
// the CSS specificity from `0-1-1` to `0-1-0`.
:where(.wp-block-heading).has-background {
padding: $block-bg-padding--v $block-bg-padding--h;
}
// The theme may be applying padding to the heading elements globally,
// so reset the padding.
.wp-block-accordion-heading {
padding: 0;
}
// CSS generated from the global styles.
// This should correctly override the padding of the Accordion Heading block.
:root :where(.wp-block-accordion-heading) {
padding-top: var(--wp--preset--spacing--40);
padding-right: var(--wp--preset--spacing--40);
padding-bottom: var(--wp--preset--spacing--40);
padding-left: var(--wp--preset--spacing--40);
}The only concern is whether we can ship this change in WP 6.9. cc @aaronrobertshaw @scruffian - We are trying to achieve the following in the Accordion Heading block with a background applied:
|
Member
Author
|
Thanks @t-hamano.
Wouldn't this also break any existing themes that use |
Contributor
I don't think this will unintentionally overwrite the theme's styles, because the CSS specificity will only decrease from Furthermore, since the Heading block should always have the h1,
h2,
h3,
h4,
h5,
h6 {
&:where(.wp-block-heading).has-background {
padding: $block-bg-padding--v $block-bg-padding--h;
}
}That said, the above approach might be the best solution for the fix in the 6.9 release. This is because the CSS specificity remains unchanged at "0-1-1," minimizing the impact on theme developers. Personally, I think this pull request could be backported to 6.9 as a "bug fix," but what do you think? |
Member
Author
Yeah, I think this is a good candidate for a 6.9 bug fix. |
t-hamano
approved these changes
Nov 3, 2025
Contributor
t-hamano
left a comment
There was a problem hiding this comment.
Okay, let's ship this PR to 6.9.
The only potential concern is if the .has-background class is being used in heading elements, which are not blocks. For example:
<h1 class="page-title has-background">Hello World</h1>However, there are probably very few theme developers who do this.
Just to be safe, I think a dev note is necessary, but what do you think?
Member
Author
I agree, I think a dev note makes sense here. just in case anyone is using the class like this. |
Contributor
|
@mikachan I'd like to merge this pull request in order to ship it in Beta 3. |
gutenbergplugin
pushed a commit
that referenced
this pull request
Nov 4, 2025
* Make padding more specific to heading block * Try adding where Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: mrleemon <leemon@git.wordpress.org>
|
I just cherry-picked this PR to the wp/6.9 branch to get it included in the next release: ed56bac |
Contributor
|
@mikachan, do you have the bandwidth to write a developer note regarding the CSS selector changes? I don't think a separate dev note is necessary; it could probably be included as part of another dev note about blocks or the block library. |
Member
Author
Yes, I can write up a dev note for this 👍 |
Member
Author
|
Below is a dev note for this PR. As @t-hamano mentions above, I don't think this needs to be a separate dev note, and it can be included as part of a larger one. Heading Block CSS Specificity FixWordPress 6.9 fixes a specificity issue with the Heading block's background padding. Previously, padding styles applied to headings with backgrounds were affecting other blocks that use heading elements, such as the Accordion Heading block. This fix ensures that background padding is only applied to actual Heading blocks. The CSS selector for applying padding to headings with backgrounds has been made more specific. The selector now targets Before: h1, h2, h3, h4, h5, h6 {
&.has-background {
padding: ...;
}
}After: h1, h2, h3, h4, h5, h6 {
&:where(.wp-block-heading).has-background {
padding: ...;
}
}The use of If a theme applies the |
Contributor
|
With WP 6.9 RC1 already released, please go ahead and publish the Dev Note on make.wordpress.org/core 🙏 |
8 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Closes #72776
An alternative fix to #72046
This makes the
.has-backgroundpadding more specific to the heading block, rather than to the heading element tags (h1,h2,h3, etc), to prevent it from being applied to other blocks that use heading elements (e.g. the Accordion Heading).Why?
To prevent these specific styles from being applied to other blocks, and allow other blocks to override padding via theme.json.
How?
Adds the
.wp-block-headingclass to the existing.has-backgroundpadding CSS rule. Also removes a previous fix for the Accordion Heading block that should no longer be required.Testing Instructions
Example theme.json snippet:
Screenshots or screencast