Heading Block CSS Specificity Fix in WordPress 6.9

WordPress 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 blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. This fix ensures that background padding is only applied to actual Heading blocks.

What’s changed?

The CSSCSS Cascading Style Sheets. selector for applying padding to headings with backgrounds has been made more specific. The selector now targets .wp-block-heading.has-background instead of just heading element tags (h1, h2, etc) with the .has-background class.

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 :where() ensures the CSS specificity remains at 0-1-1, minimizing impact on existing theme styles. As the CSS specificity remains unchanged, existing theme styles targeting heading elements should continue to work as expected.

What does this mean for themes?

If a theme applies the .has-background class to heading elements that are not Heading blocks (e.g., <h1 class="page-title has-background">Hello World</h1>), these elements will no longer receive the default block background padding. If a theme relies on this behavior, it will need to be updated to include explicit padding styles for these elements.

Props to @priethor for reviewing.

#6-9, #css, #dev-notes, #dev-notes-6-9