From 1cb0e9ced6d924a46d153c49ccb9856120ebb7ff Mon Sep 17 00:00:00 2001
From: Jb Audras <audrasjb@git.wordpress.org>
Date: Tue, 29 Mar 2022 13:04:24 +0000
Subject: [PATCH] Editor: Use `wp_unique_id()` instead of `uniqid()` to
 generate CSS class names.

Backports changes from https://github.com/WordPress/gutenberg/pull/38891.
See https://github.com/WordPress/gutenberg/issues/38889.

Props westonruter, mamaduka.
See #55474.


git-svn-id: https://develop.svn.wordpress.org/trunk@53012 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/block-supports/duotone.php      | 2 +-
 src/wp-includes/block-supports/elements.php     | 2 +-
 src/wp-includes/block-supports/layout.php       | 8 ++++----
 tests/phpunit/tests/block-supports/elements.php | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/wp-includes/block-supports/duotone.php b/src/wp-includes/block-supports/duotone.php
index 6589f4d150..0911636c43 100644
--- a/src/wp-includes/block-supports/duotone.php
+++ b/src/wp-includes/block-supports/duotone.php
@@ -520,7 +520,7 @@ function wp_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 = wp_get_duotone_filter_property( $filter_preset );
diff --git a/src/wp-includes/block-supports/elements.php b/src/wp-includes/block-supports/elements.php
index 44a22424ae..ccc21860ff 100644
--- a/src/wp-includes/block-supports/elements.php
+++ b/src/wp-includes/block-supports/elements.php
@@ -36,7 +36,7 @@ function wp_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/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php
index e57d56c5dd..ae0e9f184a 100644
--- a/src/wp-includes/block-supports/layout.php
+++ b/src/wp-includes/block-supports/layout.php
@@ -158,18 +158,18 @@ function wp_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     = wp_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support, $gap_value );
+	$style     = wp_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/tests/phpunit/tests/block-supports/elements.php b/tests/phpunit/tests/block-supports/elements.php
index 84e7446f14..ae524ac767 100644
--- a/tests/phpunit/tests/block-supports/elements.php
+++ b/tests/phpunit/tests/block-supports/elements.php
@@ -11,7 +11,7 @@ class Tests_Block_Supports_Elements 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 );
 	}
 
 	/**