Block Style Variations: Simplify block style variation selector regex

[aaronrobertshaw]

What?

Related: #58051
Follow up to: #58051 (comment)

Tidies up the regex used to add a block style variation's class (e.g. .is-style-custom) to a block's selector.

Why?

The regex is hard to follow and its first capture group is effectively dead. It only matches a literal :(...), which isn't valid selector syntax (functional pseudo-classes like :is() and :where() always have a name between the colon and the parenthesis), so $matches[1] is always empty. The second group does all the work, so dropping the dead group gives identical output and is much easier to follow.

How?

• Simplifies the pattern from /((?::\([^)]+\))?\s*)([^\s:]+)/ to /[^\s:]+/ and adds a comment with examples.
• Keeps the replacement callback rather than switching to backreferences, so the variation name is always treated as a literal (no chance of $/\ being interpreted).
• Mirrors the change in the JS equivalent (@wordpress/global-styles-engine) and backfills a missing :is selector-list test case in the PHP suite for parity.

Testing Instructions

This is a behaviour-preserving change, so the output should be identical to trunk.

1. Confirm the PHP tests pass: npm run test:unit:php:base -- --filter test_get_block_style_variation_selector
2. Confirm the JS tests pass: npm run test:unit packages/global-styles-engine/src/test/utils.test.ts
3. Apply a block style variation to a block (e.g. a Quote or a section Group) and confirm the styles still render correctly in the editor and on the front end.

[github-actions]

Size Change: -92 B (0%)

Total Size: 7.67 MB

📦 View Changed

Filename	Size	Change
build/modules/lazy-editor/index.min.js	14.4 kB	-23 B (-0.16%)
build/scripts/block-editor/index.min.js	417 kB	-26 B (-0.01%)
build/scripts/edit-site/index.min.js	299 kB	-26 B (-0.01%)
build/scripts/editor/index.min.js	491 kB	-17 B (0%)

_{compressed-size-action}

[ramonjd]

Confirmed the regex simplification preserves the status quo.

Also that the old regex matched things like :(foo).wp-block

I tested matching behaviour in the console:

const oldRegex = /((?::\([^)]+\))?\s*)([^\s:]+)/;
const newRegex = /[^\s:]+/;
const variationClass = '.is-style-custom';

const cases = [
  '.wp-block',
  '#wp-block',
  'p',
  '[style*="color"]',
  '.wp-block .inner',
  'div:first-child',
  '.wp-block:is(.outer .inner:first-child)',
  '.wp-block:not(.outer .inner:first-child)',
  '.wp-block:has(.outer .inner:first-child)',
  '.wp-block:where(.outer .inner:first-child)',
  '::before',
  ':hover',
  '  .wp-block',
  '.a:b:c',
];

const fails = cases.filter((input) => {
  const oldResult = input.replace(oldRegex, (_m, g1, g2) => g1 + g2 + variationClass);
  const newResult = input.replace(newRegex, (m) => m + variationClass);
  return oldResult !== newResult;
});

console.log(fails.length ? fails : 'All pass');

[github-actions]

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: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

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

[aaronrobertshaw]

Thanks for the speedy review @ramonjd 🚀

I've added a backport changelog now so will hit automerge.

[github-actions]

Flaky tests detected in d399152.
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/28842643639
📝 Reported issues:

• [Flaky Test] activate block theme when live previewing in edit mode #77712 in /test/e2e/specs/site-editor/activate-theme.spec.js