Dynamically add CSS class to Paragraph block #71207
Merged
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
|
Size Change: 0 B Total Size: 2.6 MB ℹ️ View Unchanged
|
t-hamano
added
[Type] Enhancement
t-hamano
force-pushed
the
dynamically-add-css-class-to-paragraph
branch
from
3e56a26 to
f85fb8c
Compare
t-hamano
changed the title
t-hamano
requested review from
ajitbohra,
fabiankaegy and
spacedmonkey
as code owners
|
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. |
dmsnell
reviewed
Aug 14, 2025
| array( | ||
| 'render_callback' => 'block_core_paragraph_render', | ||
| ) | ||
| ); |
Member
There was a problem hiding this comment.
by setting this as a render_callback we’re taking exclusive control over block rendering when all we’re doing is adding a class.
it may be more cooperative to implement the render_block_core/paragraph filter. that render_block interface will ruin us all 😄.
you can do the same thing using the filter but you won’t take an exclusive lock
Contributor
Author
There was a problem hiding this comment.
Thanks for the review! Sorry, there is still some disagreement on whether paragraph blocks need CSS classes or not. I would like to move this PR to draft until we reach a consensus 😅
Member
There was a problem hiding this comment.
Just to leave a note to say I tested using the filter:
function block_core_paragraph_add_class( $block_content, $block ) {
if ( ! $block_content ) {
return $block_content;
}
$processor = new WP_HTML_Tag_Processor( $block_content );
if ( $processor->next_tag( 'p' ) ) {
$processor->add_class( 'wp-block-paragraph' );
}
return $processor->get_updated_html();
}
add_filter( 'render_block_core/paragraph', 'block_core_paragraph_add_class', 10, 2 );And it has the same effect.
Contributor
Author
There was a problem hiding this comment.
I don't have a strong opinion on whether or not to use a filter, but it might be worth addressing in a follow-up. The Heading block has a similar callback function.
Member
There was a problem hiding this comment.
The Heading block has a similar callback function.
Unfortunately we find new code all the time re-introducing fairly limiting code patterns.
I think we should have high justification before we use the render_callback instead of a filter. For one, it’s not necessary because what we want to do can be done with a filter, and filters were normatively designed for this exact kind of augmentation. For two, it obstructs extensibility and cooperation with other developers and plugins.
it might be worth addressing in a follow-up.
It would be great if we could avoid unwanted code patterns while being discussed rather than introducing things and creating work for ourselves to go remove them later, especially since people will look at these examples and create even more copies of it.
Apparently I myself overlooked this in #42122 as did everyone else; the focus for me was parsing and not interoperability with the ecosystem. I would propose it a more valuable follow-up to go back to the work @adamziel started there and rewrite the Heading Block to use a filter.
Contributor
There was a problem hiding this comment.
Just to leave a note to say I tested using the filter:
Yep, this works well.
+1 to using the filter and following up to adopt the same approach for the Heading block.
Contributor
Author
|
Let's freeze this PR until the discussion in #47282 decides on a direction. |
t-hamano
force-pushed
the
dynamically-add-css-class-to-paragraph
branch
from
f85fb8c to
2330b2e
Compare
t-hamano
added
the
No Core Sync Required
t-hamano
changed the title
Contributor
aaronrobertshaw
left a comment
aaronrobertshaw
left a comment
There was a problem hiding this comment.
Thanks for continuing to push this along @t-hamano 🙇
This tests well for me:
✅ Paragraph blocks within code editor do not contain wp-block-paragraph class
✅ Paragraph blocks in the visual editor and frontend contain the class
✅ Tests pass
✅ Approach is consistent with other blocks e.g. Heading
I left a minor tweak below however this is looking pretty close to me if the concerns around the render_callback use aren't a blocker.
ramonjd
reviewed
Dec 31, 2025
Member
ramonjd
left a comment
ramonjd
left a comment
There was a problem hiding this comment.
Working well for me. Only affects paragraph blocks and adds the class on the frontend.
Is there any more specific testing required do you think?
| array( | ||
| 'render_callback' => 'block_core_paragraph_render', | ||
| ) | ||
| ); |
Member
There was a problem hiding this comment.
Just to leave a note to say I tested using the filter:
function block_core_paragraph_add_class( $block_content, $block ) {
if ( ! $block_content ) {
return $block_content;
}
$processor = new WP_HTML_Tag_Processor( $block_content );
if ( $processor->next_tag( 'p' ) ) {
$processor->add_class( 'wp-block-paragraph' );
}
return $processor->get_updated_html();
}
add_filter( 'render_block_core/paragraph', 'block_core_paragraph_add_class', 10, 2 );And it has the same effect.
Co-authored-by: Aaron Robertshaw <[email protected]>
|
Flaky tests detected in 9b8d796. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20658400314
|
SirLouen
approved these changes
Jan 2, 2026
Member
SirLouen
left a comment
SirLouen
left a comment
There was a problem hiding this comment.
✅ Looking good overall
Just two minor edits to the tests
SirLouen
approved these changes
Jan 3, 2026
t-hamano
commented
Jan 5, 2026
ciampo
pushed a commit
that referenced
this pull request
Jan 7, 2026
* Dynamically add CSS classe to Paragraph block * Fix unit test * Fix e2e tests * Update PHPDoc Co-authored-by: Aaron Robertshaw <[email protected]> * Simplify HTML Tag Processor logic * Use render_block hook * Register block on server side * Fix unit test * Add data_prefix to dataprovider function name * Add param PHPDoc * Removed unnecessary @cover PHPDoc * Remove unnecessary file * Remove redundant blank lines --------- Co-authored-by: t-hamano <[email protected]> Co-authored-by: dmsnell <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: SirLouen <[email protected]>
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.
Alternatives to #47282
What?
This PR adds a block CSS class to the Paragraph block dynamically only.
Why?
We've been experimenting with adding a block CSS class to the Paragraph block, as we do to many other blocks. #47282 adds a CSS class to the saved block HTML itself, making it an irreversible change. This PR takes a more restrictive and reversible approach, with backward compatibility in mind.
How?
Note that this PR adds a block CSS class to the Paragraph block, but does not use it as a selector for the global styles. This is because it could cause problems with themes that expect styles to be applied to all
pelements (see #47282 (comment)). The CSS class for the Paragraph block could potentially be used for text indentation support (see #74200 (comment)).Testing Instructions
pelements don't havewp-block-paragraphCSS class.pelements havewp-block-paragraphCSS class.Update the emptytheme's theme.json with the following content:
{ "version": 3, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" } }, "styles": { "blocks": { "core/paragraph": { "color": { "text": "#f00" }, "typography": { "fontSize": "20px" } } } } }The generated style should look like this: