Block supports: Optimize custom CSS class rendering and parsing#78217
Conversation
Backport the custom CSS block-support refinements from WordPress core:
- gutenberg_render_custom_css_support_styles(): run the cheap style.css
string check (with is_string() + empty-trim guard) before the
WP_Block_Type_Registry lookup, and tidy the className concatenation.
- gutenberg_render_custom_css_class_name(): replace the regex with a
str_contains() fast path plus a WP_HTML_Tag_Processor-based lookup of
the generated wp-custom-css-* class, so token matching matches how the
class was added and how add_class() reads it.
- Add @phpstan-param array shapes and a {@see} reference.
Co-Authored-By: Mukesh Panchal <mukesh27@git.wordpress.org>
Co-Authored-By: Weston Ruter <westonruter@git.wordpress.org>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
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. |
|
Flaky tests detected in 0969c94. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25820284360
|
There was a problem hiding this comment.
Thanks a lot for getting the backport up 🙇🏻
Tentative approval from me pending feedback on the use of WP_HTML_Tag_Processor
WP_HTML_Tag_Processor-based lookup of the generated wp-custom-css-* class, so token matching matches how the class was added and how add_class() reads it.
Just so I understand the intention here, is idea that class_list() is the canonical tokenizer for HTML class attributes, and add_class() uses that same tokenization internally to avoid duplicates? In other words, same input/output for all operations?
For custom CSS the class gets written to $block['attrs']['className'] in gutenberg_render_custom_css_support_styles() via plain string concatenation.
I guess the WP_HTML_Tag_Processor approach does future-proof things if write side changes later.
Note: Cross-posted at WordPress/wordpress-develop#11686 (comment)
|
|
||
| if ( empty( $matches ) ) { | ||
| // Parse out the 'wp-custom-css-*' class name added by gutenberg_render_custom_css_support_styles(). | ||
| $tag = new WP_HTML_Tag_Processor( '<div>' ); |
There was a problem hiding this comment.
|
This PR does not affect the WordPress core, but for consistency, let's backport it to |
Mirror the latest core PR change: replace the WP_HTML_Tag_Processor class-attribute parsing with strtok() using HTMLs ASCII whitespace delimiter set, and add tests for tab-separated whitespace and for a class that only contains wp-custom-css- as a hyphenated prefix. Co-Authored-By: Jon Surrell <jonsurrell@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…om CSS rendering. Short-circuits the custom CSS support filter before the more expensive lookups so blocks without custom CSS return faster. Replaces the regex class name parsing in `wp_render_custom_css_class_name()` with a cheap `str_contains()` guard followed by an HTML spec-compliant `strtok()` walk over the className tokens. This avoids the regex engine for the common case where no `wp-custom-css-` class is present, and correctly handles tab/form-feed/CR/LF separators as well as classes such as `my-wp-custom-css-*` that merely contain the prefix as a substring after a hyphen. Also hardens both functions against malformed parsed blocks (non-string `className`, missing keys), tightens `@phpstan-param` array shapes, and corrects the `block_has_support()` `@param` to allow `WP_Block_Type|null`. Lastly, a `@return Generator<int, non-empty-string>` phpdoc tag is added to `WP_HTML_Tag_Processor::class_list()`. Developed in #11686 and WordPress/gutenberg#78217 Follow-up to r61678. Props mukesh27, westonruter, ramonopoly, jonsurrell. See #64544, #64238. git-svn-id: https://develop.svn.wordpress.org/trunk@62359 602fd350-edb4-49c9-b593-d223f7449a82
|
Core PR committed: WordPress/wordpress-develop@20b5d10 |
…om CSS rendering. Short-circuits the custom CSS support filter before the more expensive lookups so blocks without custom CSS return faster. Replaces the regex class name parsing in `wp_render_custom_css_class_name()` with a cheap `str_contains()` guard followed by an HTML spec-compliant `strtok()` walk over the className tokens. This avoids the regex engine for the common case where no `wp-custom-css-` class is present, and correctly handles tab/form-feed/CR/LF separators as well as classes such as `my-wp-custom-css-*` that merely contain the prefix as a substring after a hyphen. Also hardens both functions against malformed parsed blocks (non-string `className`, missing keys), tightens `@phpstan-param` array shapes, and corrects the `block_has_support()` `@param` to allow `WP_Block_Type|null`. Lastly, a `@return Generator<int, non-empty-string>` phpdoc tag is added to `WP_HTML_Tag_Processor::class_list()`. Developed in WordPress/wordpress-develop#11686 and WordPress/gutenberg#78217 Follow-up to r61678. Props mukesh27, westonruter, ramonopoly, jonsurrell. See #64544, #64238. Built from https://develop.svn.wordpress.org/trunk@62359 git-svn-id: http://core.svn.wordpress.org/trunk@61640 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Block supports: Optimize custom CSS class rendering and parsing
Backport the custom CSS block-support refinements from WordPress core:
- gutenberg_render_custom_css_support_styles(): run the cheap style.css
string check (with is_string() + empty-trim guard) before the
WP_Block_Type_Registry lookup, and tidy the className concatenation.
- gutenberg_render_custom_css_class_name(): replace the regex with a
str_contains() fast path plus a WP_HTML_Tag_Processor-based lookup of
the generated wp-custom-css-* class, so token matching matches how the
class was added and how add_class() reads it.
- Add @phpstan-param array shapes and a {@see} reference.
Co-Authored-By: Mukesh Panchal <mukesh27@git.wordpress.org>
Co-Authored-By: Weston Ruter <westonruter@git.wordpress.org>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Add backport changelog entry
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Use strtok() instead of HTML Tag Processor
Mirror the latest core PR change: replace the WP_HTML_Tag_Processor
class-attribute parsing with strtok() using HTMLs ASCII whitespace
delimiter set, and add tests for tab-separated whitespace and for a
class that only contains wp-custom-css- as a hyphenated prefix.
Co-Authored-By: Jon Surrell <jonsurrell@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Mukesh Panchal <mukesh27@git.wordpress.org>
Co-authored-by: Jon Surrell <jonsurrell@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
|
I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: 0314cfa |
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/branches/7.0@62360 602fd350-edb4-49c9-b593-d223f7449a82
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/branches/7.0@62360 git-svn-id: http://core.svn.wordpress.org/branches/7.0@61641 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: `git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy` Reviewed by desrosj. Merges [62360] to `trunk`. See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@62361 602fd350-edb4-49c9-b593-d223f7449a82
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: `git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy` Reviewed by desrosj. Merges [62360] to `trunk`. See #64595. Built from https://develop.svn.wordpress.org/trunk@62361 git-svn-id: http://core.svn.wordpress.org/trunk@61642 1a063a9b-81f0-0310-95a4-ce76da25c4cd
…om CSS rendering. Short-circuits the custom CSS support filter before the more expensive lookups so blocks without custom CSS return faster. Replaces the regex class name parsing in `wp_render_custom_css_class_name()` with a cheap `str_contains()` guard followed by an HTML spec-compliant `strtok()` walk over the className tokens. This avoids the regex engine for the common case where no `wp-custom-css-` class is present, and correctly handles tab/form-feed/CR/LF separators as well as classes such as `my-wp-custom-css-*` that merely contain the prefix as a substring after a hyphen. Also hardens both functions against malformed parsed blocks (non-string `className`, missing keys), tightens `@phpstan-param` array shapes, and corrects the `block_has_support()` `@param` to allow `WP_Block_Type|null`. Lastly, a `@return Generator<int, non-empty-string>` phpdoc tag is added to `WP_HTML_Tag_Processor::class_list()`. Developed in #11686 and WordPress/gutenberg#78217 Follow-up to r61678. Reviewed by ellatrix. Merges [62359] to the 7.0 branch. Props mukesh27, westonruter, ramonopoly, jonsurrell. See #64544, #64238. git-svn-id: https://develop.svn.wordpress.org/branches/7.0@62376 602fd350-edb4-49c9-b593-d223f7449a82
…om CSS rendering. Short-circuits the custom CSS support filter before the more expensive lookups so blocks without custom CSS return faster. Replaces the regex class name parsing in `wp_render_custom_css_class_name()` with a cheap `str_contains()` guard followed by an HTML spec-compliant `strtok()` walk over the className tokens. This avoids the regex engine for the common case where no `wp-custom-css-` class is present, and correctly handles tab/form-feed/CR/LF separators as well as classes such as `my-wp-custom-css-*` that merely contain the prefix as a substring after a hyphen. Also hardens both functions against malformed parsed blocks (non-string `className`, missing keys), tightens `@phpstan-param` array shapes, and corrects the `block_has_support()` `@param` to allow `WP_Block_Type|null`. Lastly, a `@return Generator<int, non-empty-string>` phpdoc tag is added to `WP_HTML_Tag_Processor::class_list()`. Developed in WordPress/wordpress-develop#11686 and WordPress/gutenberg#78217 Follow-up to r61678. Reviewed by ellatrix. Merges [62359] to the 7.0 branch. Props mukesh27, westonruter, ramonopoly, jonsurrell. See #64544, #64238. Built from https://develop.svn.wordpress.org/branches/7.0@62376 git-svn-id: http://core.svn.wordpress.org/branches/7.0@61657 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Note
Please review the core PR as canonical. Any changes will then get synchronized here.
This synchronizes the CSS block-support refinements changes from WordPress/wordpress-develop#11686 over to Gutenberg:
gutenberg_render_custom_css_support_styles(): run the cheap style.css string check (withis_string()+ empty-trim guard) before theWP_Block_Type_Registrylookup, and tidy theclassNameconcatenation.gutenberg_render_custom_css_class_name(): replace the regex with astr_contains()fast path plus aWP_HTML_Tag_Processor-based lookup of the generatedwp-custom-css-*class, so token matching matches how the class was added and how add_class() reads it.@phpstan-paramarray shapes and a@seereference.This is a follow-up to #73959.
Use of AI Tools
Claude Code was used in the development of the core PR and was used to port the changes over to Gutenberg.