Changeset 60038 for trunk/src/wp-includes/block-supports/layout.php

Timestamp:

03/18/2025 12:41:31 PM (8 weeks ago)

Author:

joemcgill

Message:

Editor: Fix layout support classes to be generated with a stable ID.

This fixes a bug reported in ​https://github.com/WordPress/gutenberg/issues/67308 related to the Interactivity API's client-side navigation feature by replacing the incrementally generated IDs with stable hashes derived from the block's layout style definition.

Fixes #62985.
Props darerodz.

File:

• trunk/src/wp-includes/block-supports/layout.php (modified) (3 diffs)

trunk/src/wp-includes/block-supports/layout.php

@@ -581 +581 @@
     // Child layout specific logic.
     if ( $child_layout ) {
-        $container_content_class   = wp_unique_prefixed_id( 'wp-container-content-' );
+        /*
+         * Generates a unique class for child block layout styles.
+         *
+         * To ensure consistent class generation across different page renders,
+         * only properties that affect layout styling are used. These properties
+         * come from `$block['attrs']['style']['layout']` and `$block['parentLayout']`.
+         *
+         * As long as these properties coincide, the generated class will be the same.
+         */
+        $container_content_class = wp_unique_id_from_values(
+            array(
+                'layout'       => array_intersect_key(
+                    $block['attrs']['style']['layout'] ?? array(),
+                    array_flip(
+                        array( 'selfStretch', 'flexSize', 'columnStart', 'columnSpan', 'rowStart', 'rowSpan' )
+                    )
+                ),
+                'parentLayout' => array_intersect_key(
+                    $block['parentLayout'] ?? array(),
+                    array_flip(
+                        array( 'minimumColumnWidth', 'columnCount' )
+                    )
+                ),
+            ),
+            'wp-container-content-'
+        );
+
         $child_layout_declarations = array();
         $child_layout_styles       = array();
@@ -707 +733 @@
     $layout_definitions = wp_get_layout_definitions();
 
-    /*
-     * Uses an incremental ID that is independent per prefix to make sure that
-     * rendering different numbers of blocks doesn't affect the IDs of other
-     * blocks. Makes the CSS class names stable across paginations
-     * for features like the enhanced pagination of the Query block.
-     */
-    $container_class = wp_unique_prefixed_id(
-        'wp-container-' . sanitize_title( $block['blockName'] ) . '-is-layout-'
-    );
-
     // Set the correct layout type for blocks using legacy content width.
     if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) {
@@ -806 +822 @@
             : null;
         $has_block_gap_support = isset( $block_gap );
+
+        /*
+         * Generates a unique ID based on all the data required to obtain the
+         * corresponding layout style. Keeps the CSS class names the same
+         * even for different blocks on different places, as long as they have
+         * the same layout definition. Makes the CSS class names stable across
+         * paginations for features like the enhanced pagination of the Query block.
+         */
+        $container_class = wp_unique_id_from_values(
+            array(
+                $used_layout,
+                $has_block_gap_support,
+                $gap_value,
+                $should_skip_gap_serialization,
+                $fallback_gap_value,
+                $block_spacing,
+            ),
+            'wp-container-' . sanitize_title( $block['blockName'] ) . '-is-layout-'
+        );
 
         $style = wp_get_layout_style(