From 9c568adaf34b3a57e9c6811fda0d548b0254c9fc Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Fri, 20 Dec 2024 13:28:58 +0100
Subject: [PATCH] Replace incremental IDs with hashes

---
 lib/block-supports/layout.php | 47 +++++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index ddbd1917c3054..78a84722063e4 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -582,6 +582,24 @@ function gutenberg_incremental_id_per_prefix( $prefix = '' ) {
 	return $prefix . (string) ++$id_counters[ $prefix ];
 }
 
+/**
+ * Generates a unique ID based on the structure and values of a given array.
+ *
+ * This function serializes the array into a JSON string and generates a hash
+ * that serves as a unique identifier. Optionally, a prefix can be added to
+ * the generated ID for context or categorization.
+ *
+ * @param array  $data   The input array to generate an ID from.
+ * @param string $prefix Optional. A prefix to prepend to the generated ID. Default ''.
+ *
+ * @return string The generated unique ID for the array.
+ */
+function gutenberg_unique_prefixed_id_from_array( array $data, string $prefix = '' ): string {
+	$serialized = wp_json_encode( $data );
+	$hash       = substr( md5( $serialized ), 0, 8 );
+	return $prefix . $hash;
+}
+
 /**
  * Renders the layout config to the block wrapper.
  *
@@ -755,16 +773,6 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	$class_names        = array();
 	$layout_definitions = gutenberg_get_layout_definitions();
 
-	/*
-	* We use 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. We need this to make the CSS class names stable across paginations
-	* for features like the enhanced pagination of the Query block.
-	*/
-	$container_class = gutenberg_incremental_id_per_prefix(
-		'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'] ) {
 		$used_layout['type'] = 'constrained';
@@ -838,6 +846,25 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		$block_gap             = $global_settings['spacing']['blockGap'] ?? null;
 		$has_block_gap_support = isset( $block_gap );
 
+		/*
+		 * We generate a unique ID based on all the data required to obtain the
+		 * corresponding layout style. This way, the CSS class names keep the same
+		 * even for different blocks with the same layout definition. We need this to
+		 * make the CSS class names stable across paginations for features like the
+		 * enhanced pagination of the Query block.
+		 */
+		$container_class = gutenberg_unique_prefixed_id_from_array(
+			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 = gutenberg_get_layout_style(
 			".$container_class",
 			$used_layout,