Repository navigation
Add custom CSS support for individual block instances #73959
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
21 commits
Select commit
Hold shift + click to select a range
b47ea62
Add custom CSS support for individual block instances
glendaviesnz 75fdc6f
Fixes from review
glendaviesnz bfa879c
remove redundant method definition
glendaviesnz 5b58d33
Add block support so customCSS can be disabled by blocks
glendaviesnz d4aa543
Enqueue the custom css and remove global
glendaviesnz f4a67ab
Disable on custom html block
glendaviesnz ade3aaa
Disable on RawHTML blocks
glendaviesnz 84dafba
Add unit tests
glendaviesnz 2f0256b
Update docs
glendaviesnz 218155f
Fix static analysis issues
glendaviesnz 06712df
Fix e2e
glendaviesnz 6fa349b
Add same sanitization as global customCSS and also limit to users wit…
glendaviesnz 82884e4
Revert package-lock.json change
glendaviesnz c9e5cbe
Switch to textarea control to better match other panel styling
glendaviesnz f14260c
Revert "Switch to textarea control to better match other panel styling"
glendaviesnz 82dde70
Fixes from PR review
glendaviesnz ad1730a
Don't add invalid CSS to the editor and show error to user on change
glendaviesnz ac76315
disable customCSS on archive block
glendaviesnz af22573
don't save white space only css strings
glendaviesnz 24cab8d
enable again on archive block, it does work
glendaviesnz 139af04
add backport changelog
glendaviesnz File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| https://github.com/WordPress/wordpress-develop/pull/10777 | ||
|
|
||
| * https://github.com/WordPress/gutenberg/pull/73959 |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <?php | ||
| /** | ||
| * Custom CSS block support. | ||
| * | ||
| * @package gutenberg | ||
| */ | ||
|
|
||
| /** | ||
| * Render the custom CSS stylesheet and add class name to block as required. | ||
| * | ||
| * @since 7.0.0 | ||
| * | ||
| * @param array $parsed_block The parsed block. | ||
| * @return array The same parsed block with custom CSS class name added if appropriate. | ||
| */ | ||
| function gutenberg_render_custom_css_support_styles( $parsed_block ) { | ||
| $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $parsed_block['blockName'] ); | ||
|
|
||
| if ( ! block_has_support( $block_type, 'customCSS', true ) ) { | ||
| return $parsed_block; | ||
| } | ||
|
|
||
| $custom_css = trim( $parsed_block['attrs']['style']['css'] ?? '' ); | ||
|
|
||
| if ( empty( $custom_css ) ) { | ||
| return $parsed_block; | ||
| } | ||
|
|
||
| // Validate CSS doesn't contain HTML markup (same validation as global styles REST API). | ||
| if ( preg_match( '#</?\w+#', $custom_css ) ) { | ||
| return $parsed_block; | ||
| } | ||
|
|
||
| // Generate a unique class name for this block instance. | ||
| $class_name = wp_unique_id_from_values( $parsed_block, 'wp-custom-css-' ); | ||
| $updated_class_name = isset( $parsed_block['attrs']['className'] ) | ||
| ? $parsed_block['attrs']['className'] . " $class_name" | ||
| : $class_name; | ||
|
|
||
| _wp_array_set( $parsed_block, array( 'attrs', 'className' ), $updated_class_name ); | ||
|
|
||
| // Process the custom CSS using the same method as global styles. | ||
| $selector = '.' . $class_name; | ||
| $processed_css = WP_Theme_JSON_Gutenberg::process_blocks_custom_css( $custom_css, $selector ); | ||
|
|
||
| if ( ! empty( $processed_css ) ) { | ||
| /* | ||
| * Register and add inline style for block custom CSS. | ||
| * The style depends on global-styles to ensure custom CSS loads after | ||
| * and can override global styles. | ||
| */ | ||
| wp_register_style( 'wp-block-custom-css', false, array( 'global-styles' ) ); | ||
| wp_add_inline_style( 'wp-block-custom-css', $processed_css ); | ||
| } | ||
|
|
||
| return $parsed_block; | ||
| } | ||
|
|
||
| /** | ||
| * Enqueues the block custom CSS styles. | ||
| * | ||
| * @since 7.0.0 | ||
| */ | ||
| function gutenberg_enqueue_block_custom_css() { | ||
| wp_enqueue_style( 'wp-block-custom-css' ); | ||
| } | ||
|
|
||
| /** | ||
| * Applies the custom CSS class name to the block's rendered HTML. | ||
| * | ||
| * The class name is generated in `gutenberg_render_custom_css_support_styles` | ||
| * and stored in block attributes. This filter adds it to the actual markup. | ||
| * | ||
| * @since 7.0.0 | ||
| * | ||
| * @param string $block_content Rendered block content. | ||
| * @param array $block Block object. | ||
| * @return string Filtered block content. | ||
| */ | ||
| function gutenberg_render_custom_css_class_name( $block_content, $block ) { | ||
| $class_string = $block['attrs']['className'] ?? ''; | ||
| preg_match( '/\bwp-custom-css-\S+\b/', $class_string, $matches ); | ||
|
|
||
| if ( empty( $matches ) ) { | ||
| return $block_content; | ||
| } | ||
|
|
||
| $tags = new WP_HTML_Tag_Processor( $block_content ); | ||
|
|
||
| if ( $tags->next_tag() ) { | ||
| $tags->add_class( $matches[0] ); | ||
| } | ||
|
|
||
| return $tags->get_updated_html(); | ||
| } | ||
|
|
||
| add_filter( 'render_block', 'gutenberg_render_custom_css_class_name', 10, 2 ); | ||
| add_filter( 'render_block_data', 'gutenberg_render_custom_css_support_styles', 10, 1 ); | ||
| add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_block_custom_css', 1 ); |
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
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
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
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
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Likewise
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this one need to be public because its used in lib/block-supports/custom-css.php
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, correct.