Excerpt block: inherits color from Paragraph block styles over its own styles

[jp-imagines]

Description

When setting default colors for blocks, the Paragraph block's color takes precedence over any color set for the Excerpt block. This is counter-intuitive, as Excerpts are a specific kind of "paragraph" and I'd expect their styles should have higher priority.

Step-by-step reproduction instructions

1. With a block theme active, open the site editor (Appearance > Editor)
2. Add a Query Loop block to any page or template (e.g. the homepage template) and ensure the Excerpt block is included. The "Start Blank" > Title & Excerpt default layout will work.
3. Open Styles > Blocks.
4. Select the Paragraph block and set the Text color – example below uses an off-white.
5. From Styles > Blocks, search for and select the Excerpt block. Set the Text color to something else – example below uses purple.
6. Save changes and view the site.

Screenshots, screen recording, code snippet

Quick screen recording showing the setup and result:

https://github.com/user-attachments/assets/1fb14ab6-0cbd-4dd1-ba0e-efaed1b86cd3

Global styles inline CSS outputs as the following:

<style id='global-styles-inline-css'>
[...lines removed...]
:root :where(p){color: var(--wp--preset--color--accent-5);}
[...lines removed...]
:root :where(.wp-block-post-excerpt){color: var(--wp--preset--color--accent-3);}
:root :where(.wp-block-post-excerpt a:where(:not(.wp-element-button))){color: var(--wp--preset--color--accent-3);}
</stlyle>

The Excerpt block is rendered as a div with .wp-block-post-excerpt (which has the color style applied), but the excerpt text itself is an inner p block with only .wp-block-post-excerpt__excerpt – this class isn't targeted for the color style, so the Paragraph block/:where(p) style is applied instead.

This persists even if a color is set on a Excerpt block itself in block settings (rather than style settings).

Environment info

• WP 6.8.1
• No active plugins (including Gutenberg, but reproducible with Gutenberg 21.0.0 active)
• Twenty Twenty-Five theme (and reproducible with other block themes)

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

Please confirm which theme type you used for testing.

• [x] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [ ] Not sure

[himanshupathak95]

Hi @jp-imagines, Thank you for the report!

I've analyzed this issue and can confirm the problem. The root cause involves both global styles and individual block settings. As correctly mentioned, styling is applied to the wrapper, but content lives in nested elements; therefore, there is a problem of rules being overridden due to the cascading and specificity issues.

Global Styles Issue: When setting excerpt colors via Styles > Blocks, the generated CSS targets the wrapper:

:root :where(.wp-block-post-excerpt) { color: purple; }

Individual Block Settings Issue: When setting colors on individual excerpt blocks, the style is applied to the wrapper div, but the inner <p> element is still overridden by:

:root :where(p) { color: off-white; }

Neither scenarios don't work because the actual text content in the inner paragraph doesn't inherit properly due to CSS specificity rules. The paragraph-level selector overrides the inherited colors.

After testing various approaches, this is what I needed to resolve this -

• Block Selectors (for Global Styles) - Adding custom CSS selectors to block.json to ensure global styles target the correct elements

diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json
index c0037b0e5b..c272599554 100644
--- a/packages/block-library/src/post-excerpt/block.json
+++ b/packages/block-library/src/post-excerpt/block.json
@@ -71,6 +71,13 @@
 			}
 		}
 	},
+	"selectors": {
+		"root": ".wp-block-post-excerpt",
+		"color": {
+			"text": ".wp-block-post-excerpt .wp-block-post-excerpt__excerpt"
+		},
+		"typography": ".wp-block-post-excerpt .wp-block-post-excerpt__excerpt"
+	},
 	"editorStyle": "wp-block-post-excerpt-editor",
 	"style": "wp-block-post-excerpt"
 }

This ensures global styles generate:

:root :where(.wp-block-post-excerpt .wp-block-post-excerpt__excerpt) { color: purple; }

• SCSS Inheritance Rules (for Individual Block Settings) - Adding inheritance rules to style.scss

.wp-block-post-excerpt .wp-block-post-excerpt__excerpt {
    color: inherit;
}

I am not sure if these are entirely the best approaches but I am all ears.

https://github.com/user-attachments/assets/e828a200-c9ef-450a-a8e2-85aa4aa33561

[carolinan]

Hi This is a known issue and should be solved by https://github.com/WordPress/gutenberg/pull/47282

[t-hamano]

Let's close this issue as a duplicate of #46863.