Changeset 62376 for branches/7.0/src/wp-includes/block-supports/custom-css.php

Timestamp:

05/19/2026 09:05:27 AM (3 months ago)

Author:

ellatrix

Message:

Block Supports: Improve performance and hardening of block-level custom 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 ​https://github.com/WordPress/wordpress-develop/pull/11686 and ​https://github.com/WordPress/gutenberg/pull/78217

Follow-up to r61678.

Reviewed by ellatrix.
Merges [62359] to the 7.0 branch.
Props mukesh27, westonruter, ramonopoly, jonsurrell.
See #64544, #64238.

Location:

branches/7.0

Files:

• . (modified) (1 prop)
• src/wp-includes/block-supports/custom-css.php (modified) (5 diffs)

branches/7.0/src/wp-includes/block-supports/custom-css.php

@@ -13 +13 @@
  * @param array $parsed_block The parsed block.
  * @return array The same parsed block with custom CSS class name added if appropriate.
+ *
+ * @phpstan-param array{
+ *     blockName: string|null,
+ *     attrs: array{
+ *         className?: string,
+ *         style?: array{
+ *             css?: string,
+ *             ...
+ *         },
+ *         ...
+ *     },
+ *     ...
+ * } $parsed_block
  */
 function wp_render_custom_css_support_styles( $parsed_block ) {
+        $custom_css = $parsed_block['attrs']['style']['css'] ?? null;
+        if ( ! is_string( $custom_css ) || '' === trim( $custom_css ) ) {
+                return $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;
         }
@@ -33 +44 @@
 
         // 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_unique_id_from_values( $parsed_block, 'wp-custom-css-' );
+        $existing_class_name = $parsed_block['attrs']['className'] ?? null;
+        $updated_class_name  = is_string( $existing_class_name )
+                ? "$existing_class_name $class_name"
                 : $class_name;
 
@@ -69 +81 @@
  * Applies the custom CSS class name to the block's rendered HTML.
  *
- * The class name is generated in `wp_render_custom_css_support_styles`
+ * The class name is generated in {@see wp_render_custom_css_support_styles()}
  * and stored in block attributes. This filter adds it to the actual markup.
  *
@@ -77 +89 @@
  * @param array  $block         Block object.
  * @return string               Filtered block content.
+ *
+ * @phpstan-param array{
+ *     attrs: array{
+ *         className?: string,
+ *         ...
+ *     },
+ *     ...
+ * } $block
  */
 function wp_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 ) ) {
+        $class_name_attr = $block['attrs']['className'] ?? null;
+
+        if ( ! is_string( $class_name_attr ) || ! str_contains( $class_name_attr, 'wp-custom-css-' ) ) {
+                return $block_content;
+        }
+
+        // Parse out the 'wp-custom-css-*' class name added by wp_render_custom_css_support_styles().
+        $custom_class_name = null;
+        $token_delimiter   = " \t\f\r\n";
+        $class_token       = strtok( $class_name_attr, $token_delimiter );
+        while ( false !== $class_token ) {
+                if ( str_starts_with( $class_token, 'wp-custom-css-' ) ) {
+                        $custom_class_name = $class_token;
+                        break;
+                }
+                $class_token = strtok( $token_delimiter );
+        }
+        if ( null === $custom_class_name ) {
                 return $block_content;
         }
@@ -90 +124 @@
         if ( $tags->next_tag() ) {
                 $tags->add_class( 'has-custom-css' );
-                $tags->add_class( $matches[0] );
+                $tags->add_class( $custom_class_name );
         }