Paragraph: scope Global Styles selector to .wp-block-paragraph#77475
Paragraph: scope Global Styles selector to .wp-block-paragraph#77475Kgupta62 wants to merge 1 commit intoWordPress:trunkfrom
Conversation
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.
|
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.
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. |
|
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.
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. |
|
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 Unlinked AccountsThe 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. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
👋 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. |
|
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 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 The motivation here is a real bug: with Given the discussion in #47282, would an alternative approach work better here? For example:
Happy to adjust the approach based on what the team prefers. |
What?
Changes the Paragraph block's root CSS selector from
ptop.wp-block-paragraph.Why?
Fixes #77466.
The paragraph block's root selector was a bare
ptag, 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.rootand__experimentalSelectorinpackages/block-library/src/paragraph/block.jsonfrom"p"to"p.wp-block-paragraph".The
wp-block-paragraphclass is always present:useBlockPropsviadefaultClassName(apiVersion > 1)render_block_core/paragraphfilter inindex.phpUpdated three PHP test expectations that use
get_stylesheet()(reads from registered blocks) to reflect the new selector.Testing Instructions