Changeset 62656 for trunk/tests/phpunit/tests/block-supports/wpRenderCustomCssSupportStyles.php

Timestamp:

07/07/2026 12:49:04 PM (2 months ago)

Author:

wildworks

Message:

Block Supports: Fix duplicate custom CSS for identical attributes.

wp_render_custom_css_support_styles() runs on every block render, and wp_unique_id_from_values() derives the class name from the block's attributes. Blocks with identical attributes therefore share the same processed CSS, which wp_add_inline_style() re-enqueued on each render, emitting the same rule once per occurrence.

Before enqueuing, skip the CSS if it is already present in the wp-block-custom-css handle's after inline styles`.

Developed in: ​https://github.com/WordPress/wordpress-develop/pull/11859.

Props masteradhoc, mukesh27, mustafabharmal, westonruter, wildworks.
Fixes #65268.

File:

• trunk/tests/phpunit/tests/block-supports/wpRenderCustomCssSupportStyles.php (modified) (3 diffs)

trunk/tests/phpunit/tests/block-supports/wpRenderCustomCssSupportStyles.php

@@ -15 +15 @@
                 parent::set_up();
                 $this->test_block_name = null;
+
+                global $wp_styles;
+                $wp_styles = null;
         }
 
@@ -22 +25 @@
                 }
                 $this->test_block_name = null;
+
+                global $wp_styles;
+                $wp_styles = null;
+
                 parent::tear_down();
         }
@@ -265 +272 @@
                 );
         }
+
+        /**
+         * Tests that CSS is enqueued only once when the same block is rendered
+         * multiple times, as happens inside a Query Loop.
+         *
+         * @ticket 65268
+         *
+         * @covers ::wp_render_custom_css_support_styles
+         */
+        public function test_css_not_duplicated_on_repeated_renders(): void {
+                $this->test_block_name = 'test/custom-css-query-loop-dedup';
+                register_block_type(
+                        $this->test_block_name,
+                        array(
+                                'api_version' => 3,
+                                'attributes'  => array(
+                                        'style' => array(
+                                                'type' => 'object',
+                                        ),
+                                ),
+                                'supports'    => array( 'customCSS' => true ),
+                        )
+                );
+
+                $parsed_block = array(
+                        'blockName' => 'test/custom-css-query-loop-dedup',
+                        'attrs'     => array(
+                                'style' => array(
+                                        'css' => 'font-size: 2em; /* query-loop-dedup-test */',
+                                ),
+                        ),
+                );
+
+                // Simulate the same block being rendered multiple times inside a Query Loop.
+                $result = wp_render_custom_css_support_styles( $parsed_block );
+                wp_render_custom_css_support_styles( $parsed_block );
+                wp_render_custom_css_support_styles( $parsed_block );
+
+                // Extract the generated class name from the first render's result.
+                $this->assertSame( 1, preg_match( '/(?:^|\s)(wp-custom-css-\S+)/', $result['attrs']['className'] ?? '', $matches ) );
+                $class_name = $matches[1];
+
+                // Count how many times the CSS selector for this block appears in the enqueued inline styles.
+                $inline_styles = (array) wp_styles()->get_data( 'wp-block-custom-css', 'after' );
+                $occurrences   = 0;
+                foreach ( $inline_styles as $style ) {
+                        $this->assertIsString( $style );
+                        $occurrences += substr_count( $style, '.' . $class_name );
+                }
+
+                $this->assertSame(
+                        1,
+                        $occurrences,
+                        'CSS should be enqueued exactly once even when the same block renders multiple times.'
+                );
+        }
 }