Skip to content

Elements: Align class name parsing with custom CSS implementation#79023

Merged
westonruter merged 2 commits into
trunkfrom
fix/elements-classname-token-parsing
Jun 9, 2026
Merged

Elements: Align class name parsing with custom CSS implementation#79023
westonruter merged 2 commits into
trunkfrom
fix/elements-classname-token-parsing

Conversation

@westonruter

Copy link
Copy Markdown
Member

What?

Follow-up to #78841 and its core companion WordPress/wordpress-develop#12028 (committed in r62475), bringing the additional hardening developed during the core review back to Gutenberg so the two stay in sync.

During the core review of #78841, wp_render_elements_class_name() was aligned with wp_render_custom_css_class_name() (#78217 / r62359). This PR applies the same alignment here.

Why?

gutenberg_render_elements_class_name() matched the wp-elements-* class with \bwp-elements-\S+\b. Because a hyphen is a \b word boundary in regex, a class such as my-wp-elements-foo was erroneously matched. Parsing the className attribute into tokens per the HTML spec and checking each with str_starts_with() fixes this, and avoids the regex engine entirely for the common case via an upfront str_contains() short-circuit.

How?

  • gutenberg_render_elements_class_name(): replaced the regex with a str_contains() guard followed by a strtok() walk over the class tokens; added an @phpstan-param array shape for $block.
  • gutenberg_render_custom_css_class_name(): refactored to use a shared $class_name_prefix variable and $matched_class_name so both functions remain structurally identical.
  • Added a regression test for the my-wp-elements-foo substring-prefix case (the non-string className test already existed).

These match the corresponding core changes in r62475 byte-for-byte (modulo the gutenberg_/wp_ prefixes).

Testing Instructions

  • Run the elements block support PHP tests: npm run test:unit:php -- --filter WP_Block_Supports_Elements_Test
  • Verify test_elements_block_support_class_with_invalid_elements_prefix and test_elements_block_support_class_with_non_string_class_name pass, and existing tests continue to pass.

🤖 Generated with Claude Code

Mirror in `gutenberg_render_elements_class_name()` the hardening already applied to `gutenberg_render_custom_css_class_name()`: replace the regular expression with a `str_contains()` short-circuit followed by an HTML-spec-compliant `strtok()` walk over the class tokens. This also corrects a latent matching bug, since the previous `\bwp-elements-\S+\b` pattern treated the hyphen as a word boundary, so a class such as `my-wp-elements-foo` was erroneously matched. Tokenizing the attribute first ensures only a standalone `wp-elements-*` class is applied.

Refactor `gutenberg_render_custom_css_class_name()` to use a shared `$class_name_prefix` variable and `$matched_class_name` so the two functions stay structurally identical, and add a regression test covering the substring-prefix case.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@westonruter westonruter requested a review from spacedmonkey as a code owner June 9, 2026 00:50
@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@westonruter westonruter added [Type] Bug An existing feature does not function as intended Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Jun 9, 2026
@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown

Flaky tests detected in b4ec983.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27177955117
📝 Reported issues:

@westonruter westonruter added No Core Sync Required Indicates that any changes do not need to be synced to WordPress Core and removed No Core Sync Required Indicates that any changes do not need to be synced to WordPress Core labels Jun 9, 2026

@aaronrobertshaw aaronrobertshaw left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR and the core tweaks @westonruter 🙇

✅ Changes here faithfully match related core commits
✅ Backport changelog looks good
✅ New and existing tests pass

LGTM 🚢

@westonruter westonruter merged commit 6e06fb8 into trunk Jun 9, 2026
41 checks passed
@westonruter westonruter deleted the fix/elements-classname-token-parsing branch June 9, 2026 07:38
@github-actions github-actions Bot added this to the Gutenberg 23.4 milestone Jun 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants