Add custom CSS support for individual block instances #73959
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
mtias
added
Customization
|
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: @onetrev. 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. |
github-actions
bot
added
the
First-time Contributor
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @mtias! 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. |
mtias
commented
Dec 12, 2025
| * @return string The new selector. | ||
| */ | ||
| protected static function append_to_selector( $selector, $to_append ) { | ||
| public static function append_to_selector( $selector, $to_append ) { |
Contributor
There was a problem hiding this comment.
We shouldn't need to make this one public as we're not using it anywhere outside the class.
mtias
commented
Dec 12, 2025
| * @return string The processed CSS. | ||
| */ | ||
| protected function process_blocks_custom_css( $css, $selector ) { | ||
| public static function process_blocks_custom_css( $css, $selector ) { |
|
Size Change: +331 B (+0.01%) Total Size: 3.08 MB
ℹ️ View Unchanged
|
t-hamano
removed
the
First-time Contributor
Mamaduka
reviewed
Dec 12, 2025
Member
|
Something for a follow-up. The Advanced panel is getting crammed. Maybe we should refactor using the tools panel components, only show some controls by default and hide the rest until needed. |
Member
Author
Contributor
tellthemachines
left a comment
tellthemachines
left a comment
There was a problem hiding this comment.
Closes #47946
The linked issue is about listing blocks that have per-block custom CSS defined in global styles which is not really related to what this PR solves. Is there another issue we should link here instead? (I couldn't find one from a quick issue search)
| * @return string The new selector. | ||
| */ | ||
| protected static function append_to_selector( $selector, $to_append ) { | ||
| public static function append_to_selector( $selector, $to_append ) { |
Contributor
There was a problem hiding this comment.
We shouldn't need to make this one public as we're not using it anywhere outside the class.
|
|
||
| // Transform the custom CSS using the same logic as global styles. | ||
| const transformedCSS = useMemo( () => { | ||
| return processCSSNesting( customCSS, customCSSSelector ); |
Contributor
There was a problem hiding this comment.
Hmm, I wonder whether we still need this now that nesting has solid browser support. Perhaps we can consider just wrapping the whole thing in the outer selector instead? (Probably not for this PR but something to be done globally wherever we're using this function)
Member
Author
|
@tellthemachines good catch, it should be this one instead #56127. |
glendaviesnz
force-pushed
the
add/custom-css-per-block
branch
from
e335b1e to
846b4c7
Compare
Contributor
|
I have rebased to fix conflict, and made review changes suggested, and it is testing well for me. Is there anything else we need to do to get this change over the line? |
Mamaduka
reviewed
Dec 19, 2025
Member
Mamaduka
left a comment
Mamaduka
left a comment
There was a problem hiding this comment.
Left a couple of notes. A general question regarding the feature.
Do we plan to allow disabling this on a per-block-type basis, similar to other block support features?
lib/block-supports/custom-css.php
Outdated
| } | ||
|
|
||
| // Generate a unique class name for this block instance. | ||
| $class_name = gutenberg_get_custom_css_class_name( $parsed_block ); |
Member
There was a problem hiding this comment.
Suggested change
| $class_name = gutenberg_get_custom_css_class_name( $parsed_block ); | |
| $class_name = wp_unique_id_from_values( $parsed_block 'wp-custom-css-' ); |
We could call the method directly here; there's no need to introduce a new function, mainly when it's used only once.
lib/block-supports/custom-css.php
Outdated
Comment on lines
73
to
81
| function gutenberg_output_block_custom_css() { | ||
| global $gutenberg_block_custom_css; | ||
|
|
||
| if ( empty( $gutenberg_block_custom_css ) ) { | ||
| return; | ||
| } | ||
|
|
||
| echo '<style id="wp-block-custom-css">' . $gutenberg_block_custom_css . '</style>'; | ||
| } |
Member
There was a problem hiding this comment.
The custom styles output seems odd to me. I understand this is meant to ensure that custom CSS loads last, but we could use the existing style-loading system to do that.
@westonruter, you did some similar work in WP 6.9. Do you have any suggestions for improving it?
P.S. Also not a big fan of the new global variable 😅
Contributor
There was a problem hiding this comment.
This commit gets rid of the global and enqueues the custom CSS instead - seems to work and gets loaded after the global custom CSS, so overrides as expected.
Member
Author
|
@Mamaduka yes, this should probably be a block support (customCSS) or tied to the edit html support. |
Member
|
Fantastic. Let’s include that in this PR. I’m sure it will be requested later. |
Contributor
Added a block support for this, |
Contributor
|
@Mamaduka let me know if you are happy with this now and I will sort out the backport. |
glendaviesnz
force-pushed
the
add/custom-css-per-block
branch
from
6ea8e47 to
0b1cee0
Compare
Member
|
Thanks for the follow-ups, @glendaviesnz!
It would be nice to test this with a variety of blocks. For example:
|
glendaviesnz
force-pushed
the
add/custom-css-per-block
branch
from
0b1cee0 to
66b311c
Compare
Contributor
Yeah, good call, it won't work there. I have disabled it on all the blocks that had |
Contributor
|
I added some unit tests |
Contributor
|
@Mamaduka I took a look at potential issues with bleeding, but because the styles are scoped to the |
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.
Closes #56127
Extends the existing block-type-level custom CSS feature from Global Styles to work at the individual block instance level. Users can now add custom CSS to any block via the Advanced panel in the block inspector.
Serialization:
Frontend: