Skip to content

Paragraph: scope Global Styles selector to .wp-block-paragraph#77475

Open
Kgupta62 wants to merge 1 commit intoWordPress:trunkfrom
Kgupta62:fix/77466-paragraph-selector-specificity
Open

Paragraph: scope Global Styles selector to .wp-block-paragraph#77475
Kgupta62 wants to merge 1 commit intoWordPress:trunkfrom
Kgupta62:fix/77466-paragraph-selector-specificity

Conversation

@Kgupta62
Copy link
Copy Markdown

What?

Changes the Paragraph block's root CSS selector from p to p.wp-block-paragraph.

Why?

Fixes #77466.

The paragraph block's root selector was a bare p tag, which matched every <p> element on the page — including those inside Post Excerpt, Quote, and other blocks that render <p> children.

Because directly-applied CSS properties always beat inherited ones regardless of specificity, paragraph Global Styles would override block-specific styling. For example, setting a font-size on the Paragraph block via Global Styles would bleed into Post Excerpt, even if the excerpt had its own font-size set.

How?

Updated selectors.root and __experimentalSelector in packages/block-library/src/paragraph/block.json from "p" to "p.wp-block-paragraph".

The wp-block-paragraph class is always present:

  • Editor: added by useBlockProps via defaultClassName (apiVersion > 1)
  • Frontend: added by the render_block_core/paragraph filter in index.php

Updated three PHP test expectations that use get_stylesheet() (reads from registered blocks) to reflect the new selector.

Testing Instructions

  1. Activate a block theme (e.g. Twenty Twenty-Five)
  2. Go to Appearance → Editor → Styles → Typography → Text
  3. Set a custom font size (e.g. 24px)
  4. Add a Post Excerpt block to a template
  5. Set a different font size on the excerpt block via Global Styles
  6. Before: Excerpt inherits paragraph font size, ignoring its own styling
  7. After: Excerpt respects its own Global Styles, paragraph styles only affect actual Paragraph blocks

The paragraph block's root CSS selector was `p`, which matched every
`<p>` on the page — including those inside Post Excerpt, Quote, and
other blocks. Because directly-applied styles always beat inherited
ones in CSS, paragraph block Global Styles would override block-
specific styling regardless of cascade order.

Change the selector to `p.wp-block-paragraph` so Global Styles for
the Paragraph block only target actual paragraph blocks. The class
is always present: added by `useBlockProps` in the editor and by the
`render_block_core/paragraph` filter on the frontend.

Fixes WordPress#77466.
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 19, 2026

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: [Status] Blocked, [Package] Block library, [Block] Paragraph, First-time Contributor, Global Styles.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions
Copy link
Copy Markdown

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Apr 19, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 19, 2026

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 props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @Kgupta62, @apeatling, @andrewkathart.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: Kgupta62, apeatling, andrewkathart.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: juanfra <juanfra@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: shimotmk <shimotomoki@git.wordpress.org>
Co-authored-by: karthikeya-io <karthikeya01@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions github-actions Bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Apr 19, 2026
@github-actions
Copy link
Copy Markdown

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Kgupta62! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@t-hamano t-hamano added [Block] Paragraph Affects the Paragraph Block Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] Blocked Used to indicate that a current effort isn't able to move forward labels Apr 20, 2026
@t-hamano
Copy link
Copy Markdown
Contributor

Thanks for the PR. However, this change has significant backward compatibility implications, and it's worth noting that similar initiatives have been closed in the past. Perhaps we should first review the discussion in 47282 to clarify the best approach and the problems that need to be addressed. See #47282 for more details.

@t-hamano t-hamano linked an issue Apr 20, 2026 that may be closed by this pull request
@Kgupta62
Copy link
Copy Markdown
Author

@t-hamano Thanks for flagging this — I've gone through #47282 and the discussion there.

I understand the backward compatibility concerns with changing the paragraph selector. My PR is narrower than #47282 (just the selectors.root change, not className support), but the compat implications are similar.

The motivation here is a real bug: with selectors.root: "p", Global Styles for paragraphs generate :root :where(p) which matches every <p> on the page — including inner <p> elements in Post Excerpt, Quote, and other blocks. Since directly-applied styles beat inherited styles regardless of specificity, these paragraph styles override the parent block's styles.

Given the discussion in #47282, would an alternative approach work better here? For example:

  • Only scoping the selector for specific style properties that cause the bleed
  • Adding the fix on the affected blocks' side instead (making their inner <p> selectors more specific)

Happy to adjust the approach based on what the team prefers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Paragraph Affects the Paragraph Block First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Package] Block library /packages/block-library [Status] Blocked Used to indicate that a current effort isn't able to move forward

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Styles: Paragraph styling impacts Site Title & Site Tagline Styling paragraphs through theme.json or the full site editor overwrites everything else

2 participants