From ea9140db3f0a2258cfb61d98a503bbf02636e2bc Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Thu, 17 Feb 2022 11:09:51 -0800
Subject: [PATCH 1/2] Use wp_unique_id() instead of uniqid() to generate CSS
 class names

---
 lib/block-supports/duotone.php                  | 2 +-
 lib/block-supports/elements.php                 | 2 +-
 lib/block-supports/layout.php                   | 8 ++++----
 packages/block-library/src/archives/index.php   | 2 +-
 packages/block-library/src/navigation/index.php | 8 ++++----
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php
index e5373e6560086..561ed12615867 100644
--- a/lib/block-supports/duotone.php
+++ b/lib/block-supports/duotone.php
@@ -434,7 +434,7 @@ function gutenberg_render_duotone_support( $block_content, $block ) {
 	}
 
 	$filter_preset   = array(
-		'slug'   => uniqid(),
+		'slug'   => wp_unique_id( sanitize_key( implode( '-', $block['attrs']['style']['color']['duotone'] ) . '-' ) ),
 		'colors' => $block['attrs']['style']['color']['duotone'],
 	);
 	$filter_property = gutenberg_get_duotone_filter_property( $filter_preset );
diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php
index 1c8b507c49495..a0087fb040b35 100644
--- a/lib/block-supports/elements.php
+++ b/lib/block-supports/elements.php
@@ -33,7 +33,7 @@ function gutenberg_render_elements_support( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$class_name = 'wp-elements-' . uniqid();
+	$class_name = wp_unique_id( 'wp-elements-' );
 
 	if ( strpos( $link_color, 'var:preset|color|' ) !== false ) {
 		// Get the name from the string and add proper styles.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 8413627207996..950f350fada01 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -150,18 +150,18 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		$used_layout = $default_layout;
 	}
 
-	$id        = uniqid();
-	$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
+	$class_name = wp_unique_id( 'wp-container-' );
+	$gap_value  = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
 	// Skip if gap value contains unsupported characters.
 	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
 	// because we only want to match against the value, not the CSS attribute.
 	$gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
-	$style     = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support, $gap_value );
+	$style     = gutenberg_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value );
 	// This assumes the hook only applies to blocks with a single wrapper.
 	// I think this is a reasonable limitation for that particular hook.
 	$content = preg_replace(
 		'/' . preg_quote( 'class="', '/' ) . '/',
-		'class="wp-container-' . $id . ' ',
+		'class="' . esc_attr( $class_name ) . ' ',
 		$block_content,
 		1
 	);
diff --git a/packages/block-library/src/archives/index.php b/packages/block-library/src/archives/index.php
index 1dcb6783850ae..763e6b5408e0d 100644
--- a/packages/block-library/src/archives/index.php
+++ b/packages/block-library/src/archives/index.php
@@ -23,7 +23,7 @@ function render_block_core_archives( $attributes ) {
 
 		$class .= ' wp-block-archives-dropdown';
 
-		$dropdown_id = uniqid( 'wp-block-archives-' );
+		$dropdown_id = wp_unique_id( 'wp-block-archives-' );
 		$title       = __( 'Archives' );
 
 		/** This filter is documented in wp-includes/widgets/class-wp-widget-archives.php */
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 40982551475d8..4e79f48b2ff27 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -515,7 +515,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		)
 	);
 
-	$modal_unique_id = uniqid();
+	$modal_unique_id = wp_unique_id( 'modal-' );
 
 	// Determine whether or not navigation elements should be wrapped in the markup required to make it responsive,
 	// return early if they don't.
@@ -544,12 +544,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$toggle_button_content     = $should_display_icon_label ? $toggle_button_icon : 'Menu';
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s">%9$s</button>
-			<div class="%5$s" style="%7$s" id="modal-%1$s">
+		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="%1$s">%9$s</button>
+			<div class="%5$s" style="%7$s" id="%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
-						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
+						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>
 					</div>

From 14110024f62d6f840ba42c30f6544a6a858ee486 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Thu, 17 Feb 2022 11:31:00 -0800
Subject: [PATCH 2/2] Fix elements test by upadting pattern in
 make_unique_id_one

---
 phpunit/class-elements-test.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/phpunit/class-elements-test.php b/phpunit/class-elements-test.php
index 349b632855711..556eaeec79bcc 100644
--- a/phpunit/class-elements-test.php
+++ b/phpunit/class-elements-test.php
@@ -13,7 +13,7 @@ class Gutenberg_Elements_Test extends WP_UnitTestCase {
 	 * @return string                String where the unique id classes were replaced with "wp-elements-1".
 	 */
 	private static function make_unique_id_one( $string ) {
-		return preg_replace( '/wp-elements-.{13}/', 'wp-elements-1', $string );
+		return preg_replace( '/wp-elements-\d+/', 'wp-elements-1', $string );
 	}
 
 	/**