From f59138dcb81feb53567c74402e230439539cd272 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 4 Jul 2023 17:18:00 +0400
Subject: [PATCH 01/15] Fix flaky Site Editor pages e2e test (#52283)

---
 test/e2e/specs/site-editor/pages.spec.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js
index 8358c5f4941dd5..8c63036a60ebb1 100644
--- a/test/e2e/specs/site-editor/pages.spec.js
+++ b/test/e2e/specs/site-editor/pages.spec.js
@@ -78,7 +78,7 @@ test.describe( 'Pages', () => {
 		).toBeVisible();
 
 		// Switch to template editing focus.
-		await page.getByRole( 'button', { name: 'Settings' } ).click();
+		await editor.openDocumentSettingsSidebar();
 		await page
 			.getByRole( 'region', { name: 'Editor settings' } )
 			.getByRole( 'button', { name: 'Edit template' } )
@@ -102,7 +102,10 @@ test.describe( 'Pages', () => {
 			.fill( 'New Site Title' );
 
 		// Go back to page editing focus.
-		await page.getByRole( 'button', { name: 'Back', exact: true } ).click();
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Back' } )
+			.click();
 
 		// Site Title and Page entities should have been modified.
 		await page.getByRole( 'button', { name: 'Save', exact: true } ).click();

From 926ba1741053e89763856e3c79512de4ee9dd8f6 Mon Sep 17 00:00:00 2001
From: Ryan Welcher <me@ryanwelcher.com>
Date: Tue, 4 Jul 2023 16:52:45 +0300
Subject: [PATCH 02/15] Export store for the customize-widgets package.
 (#52189)

---
 packages/customize-widgets/src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js
index 6a564f1560cc55..10ca00ff783090 100644
--- a/packages/customize-widgets/src/index.js
+++ b/packages/customize-widgets/src/index.js
@@ -100,3 +100,4 @@ export function initialize( editorName, blockEditorSettings ) {
 		);
 	} );
 }
+export { store } from './store';

From eb8209ec7c356a63454c789b061a3141c71cca4b Mon Sep 17 00:00:00 2001
From: Ryan Welcher <me@ryanwelcher.com>
Date: Tue, 4 Jul 2023 17:32:57 +0300
Subject: [PATCH 03/15] Add @example tags to the customize-widgets package
 (#52141)

* Add example for setIsInserterOpen.

* Add example for isInserterOpened selector.

* Update examples to use store export based on #52189
---
 .../data/data-core-customize-widgets.md       | 45 +++++++++++++++++++
 .../customize-widgets/src/store/actions.js    | 25 +++++++++++
 .../customize-widgets/src/store/selectors.js  | 18 ++++++++
 3 files changed, 88 insertions(+)

diff --git a/docs/reference-guides/data/data-core-customize-widgets.md b/docs/reference-guides/data/data-core-customize-widgets.md
index 13476f94fdb398..78433e8991a81c 100644
--- a/docs/reference-guides/data/data-core-customize-widgets.md
+++ b/docs/reference-guides/data/data-core-customize-widgets.md
@@ -10,6 +10,25 @@ Namespace: `core/customize-widgets`.
 
 Returns true if the inserter is opened.
 
+_Usage_
+
+```js
+import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+
+const ExampleComponent = () => {
+	const { isInserterOpened } = useSelect(
+		( select ) => select( customizeWidgetsStore ),
+		[]
+	);
+
+	return isInserterOpened()
+		? __( 'Inserter is open' )
+		: __( 'Inserter is closed.' );
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global application state.
@@ -28,6 +47,32 @@ _Returns_
 
 Returns an action object used to open/close the inserter.
 
+_Usage_
+
+```js
+import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+const ExampleComponent = () => {
+	const { setIsInserterOpened } = useDispatch( customizeWidgetsStore );
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	return (
+		<Button
+			onClick={ () => {
+				setIsInserterOpened( ! isOpen );
+				setIsOpen( ! isOpen );
+			} }
+		>
+			{ __( 'Open/close inserter' ) }
+		</Button>
+	);
+};
+```
+
 _Parameters_
 
 -   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
diff --git a/packages/customize-widgets/src/store/actions.js b/packages/customize-widgets/src/store/actions.js
index 30926701e1f26f..844617b4142aa0 100644
--- a/packages/customize-widgets/src/store/actions.js
+++ b/packages/customize-widgets/src/store/actions.js
@@ -8,6 +8,31 @@
  * @param {string}         value.rootClientId   The root client ID to insert at.
  * @param {number}         value.insertionIndex The index to insert at.
  *
+ * @example
+ * ```js
+ * import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
+ * import { __ } from '@wordpress/i18n';
+ * import { useDispatch } from '@wordpress/data';
+ * import { Button } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const ExampleComponent = () => {
+ *   const { setIsInserterOpened } = useDispatch( customizeWidgetsStore );
+ *   const [ isOpen, setIsOpen ] = useState( false );
+ *
+ *    return (
+ *        <Button
+ *            onClick={ () => {
+ *                setIsInserterOpened( ! isOpen );
+ *                setIsOpen( ! isOpen );
+ *            } }
+ *        >
+ *            { __( 'Open/close inserter' ) }
+ *        </Button>
+ *    );
+ * };
+ * ```
+ *
  * @return {Object} Action object.
  */
 export function setIsInserterOpened( value ) {
diff --git a/packages/customize-widgets/src/store/selectors.js b/packages/customize-widgets/src/store/selectors.js
index 63962af151d15d..abe2cb89c9f6ab 100644
--- a/packages/customize-widgets/src/store/selectors.js
+++ b/packages/customize-widgets/src/store/selectors.js
@@ -3,6 +3,24 @@
  *
  * @param {Object} state Global application state.
  *
+ * @example
+ * ```js
+ * import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
+ * import { __ } from '@wordpress/i18n';
+ * import { useSelect } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ *    const { isInserterOpened } = useSelect(
+ *        ( select ) => select( customizeWidgetsStore ),
+ *        []
+ *    );
+ *
+ *    return isInserterOpened()
+ *        ? __( 'Inserter is open' )
+ *        : __( 'Inserter is closed.' );
+ * };
+ * ```
+ *
  * @return {boolean} Whether the inserter is opened.
  */
 export function isInserterOpened( state ) {

From b1579dd8d3bc745a1f25da2872f2df3cc16afc28 Mon Sep 17 00:00:00 2001
From: Ryan Welcher <me@ryanwelcher.com>
Date: Tue, 4 Jul 2023 17:36:03 +0300
Subject: [PATCH 04/15] Export the store. (#52190)

---
 packages/edit-widgets/src/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js
index bae80786b64140..aa8d97d6289923 100644
--- a/packages/edit-widgets/src/index.js
+++ b/packages/edit-widgets/src/index.js
@@ -124,3 +124,5 @@ const registerBlock = ( block ) => {
 	}
 	registerBlockType( name, settings );
 };
+
+export { store } from './store';

From ea6b5a12aa7424c2cd9c10e4a4476d9dad10295d Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 4 Jul 2023 16:57:11 +0100
Subject: [PATCH 05/15] Navigation: Fix sidebar title (#52167)

The tests are also broken on trunk
---
 .../template-part-navigation-menu.js                            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
index f451c17e00adb7..4837ad99beaddb 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
@@ -22,7 +22,7 @@ export default function TemplatePartNavigationMenu( { id } ) {
 				size="12"
 				upperCase={ true }
 			>
-				{ title?.rendered || __( 'Navigation' ) }
+				{ title || __( 'Navigation' ) }
 			</Heading>
 			<NavigationMenuEditor navigationMenuId={ id } />
 		</>

From 7de4d65a848383abe6d21020e90ef54cda6951c9 Mon Sep 17 00:00:00 2001
From: Glen Davies <glendaviesnz@users.noreply.github.com>
Date: Wed, 5 Jul 2023 12:21:16 +1200
Subject: [PATCH 06/15] Patterns: rename sync_status and move to top level
 field on rest return instead of a meta field (#52146)

---
 lib/blocks.php                                | 28 +++++++++++
 lib/compat/wordpress-6.3/blocks.php           | 29 +++---------
 ...class-gutenberg-rest-blocks-controller.php | 47 +++++++++++++++++++
 lib/load.php                                  |  1 +
 packages/block-editor/src/store/selectors.js  | 15 +++---
 .../components/create-pattern-modal/index.js  |  2 +-
 .../components/page-patterns/use-patterns.js  |  2 +-
 .../use-pattern-details.js                    |  2 +-
 .../src/components/post-sync-status/index.js  |  6 +--
 packages/reusable-blocks/src/store/actions.js |  2 +-
 10 files changed, 98 insertions(+), 36 deletions(-)
 create mode 100644 lib/compat/wordpress-6.3/class-gutenberg-rest-blocks-controller.php

diff --git a/lib/blocks.php b/lib/blocks.php
index 8185567db1b804..e98f711b5c85a5 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -372,3 +372,31 @@ function gutenberg_register_legacy_social_link_blocks() {
 }
 
 add_action( 'init', 'gutenberg_register_legacy_social_link_blocks' );
+
+/**
+ * Migrate the legacy `sync_status` meta key (added 16.1) to the new `wp_pattern_sync_status` meta key (16.1.1).
+ *
+ * This filter is INTENTIONALLY left out of core as the meta key was fist introduced to core in 6.3 as `wp_pattern_sync_status`.
+ * see https://github.com/WordPress/gutenberg/pull/52232
+ *
+ * @param mixed  $value     The value to return, either a single metadata value or an array of values depending on the value of $single.
+ * @param int    $object_id ID of the object metadata is for.
+ * @param string $meta_key  Metadata key.
+ * @param bool   $single    Whether to return only the first value of the specified $meta_key.
+ */
+function gutenberg_legacy_wp_block_post_meta( $value, $object_id, $meta_key, $single ) {
+	if ( 'wp_pattern_sync_status' !== $meta_key ) {
+		return $value;
+	}
+
+	$sync_status = get_post_meta( $object_id, 'sync_status', $single );
+
+	if ( $single && 'unsynced' === $sync_status ) {
+		return $sync_status;
+	} elseif ( isset( $sync_status[0] ) && 'unsynced' === $sync_status[0] ) {
+		return $sync_status;
+	}
+
+	return $value;
+}
+add_filter( 'default_post_metadata', 'gutenberg_legacy_wp_block_post_meta', 10, 4 );
diff --git a/lib/compat/wordpress-6.3/blocks.php b/lib/compat/wordpress-6.3/blocks.php
index b338d0a2467096..ccc68786dc6adb 100644
--- a/lib/compat/wordpress-6.3/blocks.php
+++ b/lib/compat/wordpress-6.3/blocks.php
@@ -60,6 +60,7 @@ function gutenberg_rename_reusable_block_cpt_to_pattern( $args, $post_type ) {
 		$args['labels']['item_reverted_to_draft']   = __( 'Pattern reverted to draft.' );
 		$args['labels']['item_scheduled']           = __( 'Pattern scheduled.' );
 		$args['labels']['item_updated']             = __( 'Pattern updated.' );
+		$args['rest_controller_class']              = 'Gutenberg_REST_Blocks_Controller';
 	}
 
 	return $args;
@@ -89,7 +90,7 @@ function gutenberg_add_custom_fields_to_wp_block( $args, $post_type ) {
 add_filter( 'register_post_type_args', 'gutenberg_add_custom_fields_to_wp_block', 10, 2 );
 
 /**
- * Adds sync_status meta fields to the wp_block post type so an unsynced option can be added.
+ * Adds wp_pattern_sync_status meta fields to the wp_block post type so an unsynced option can be added.
  *
  * Note: This should be removed when the minimum required WP version is >= 6.3.
  *
@@ -101,39 +102,21 @@ function gutenberg_wp_block_register_post_meta() {
 	$post_type = 'wp_block';
 	register_post_meta(
 		$post_type,
-		'sync_status',
+		'wp_pattern_sync_status',
 		array(
 			'auth_callback'     => function() {
 				return current_user_can( 'edit_posts' );
 			},
-			'sanitize_callback' => 'gutenberg_wp_block_sanitize_post_meta',
+			'sanitize_callback' => 'sanitize_text_field',
 			'single'            => true,
 			'type'              => 'string',
 			'show_in_rest'      => array(
 				'schema' => array(
-					'type'       => 'string',
-					'properties' => array(
-						'sync_status' => array(
-							'type' => 'string',
-						),
-					),
+					'type' => 'string',
+					'enum' => array( 'partial', 'unsynced' ),
 				),
 			),
 		)
 	);
 }
-/**
- * Sanitizes the array of wp_block post meta sync_status string.
- *
- * Note: This should be removed when the minimum required WP version is >= 6.3.
- *
- * @see https://github.com/WordPress/gutenberg/pull/51144
- *
- * @param array $meta_value String to sanitize.
- *
- * @return array Sanitized string.
- */
-function gutenberg_wp_block_sanitize_post_meta( $meta_value ) {
-	return sanitize_text_field( $meta_value );
-}
 add_action( 'init', 'gutenberg_wp_block_register_post_meta' );
diff --git a/lib/compat/wordpress-6.3/class-gutenberg-rest-blocks-controller.php b/lib/compat/wordpress-6.3/class-gutenberg-rest-blocks-controller.php
new file mode 100644
index 00000000000000..08108e1638334c
--- /dev/null
+++ b/lib/compat/wordpress-6.3/class-gutenberg-rest-blocks-controller.php
@@ -0,0 +1,47 @@
+<?php
+/**
+ * Reusable blocks REST API: WP_REST_Blocks_Controller class
+ *
+ * @package WordPress
+ * @subpackage REST_API
+ * @since 5.0.0
+ */
+
+/**
+ * Controller which provides a REST endpoint for the editor to read, create,
+ * edit and delete reusable blocks. Blocks are stored as posts with the wp_block
+ * post type.
+ *
+ * @since 5.0.0
+ *
+ * @see WP_REST_Posts_Controller
+ * @see WP_REST_Controller
+ */
+class Gutenberg_REST_Blocks_Controller extends WP_REST_Blocks_Controller {
+	/**
+	 * Filters a response based on the context defined in the schema.
+	 *
+	 * @since 5.0.0
+	 * @since 6.3 Adds the `wp_pattern_sync_status` property to the response.
+	 *
+	 * @param array  $data    Response data to filter.
+	 * @param string $context Context defined in the schema.
+	 * @return array Filtered response.
+	 */
+	public function filter_response_by_context( $data, $context ) {
+		$data = parent::filter_response_by_context( $data, $context );
+
+		/*
+		 * Remove `title.rendered` and `content.rendered` from the response. It
+		 * doesn't make sense for a reusable block to have rendered content on its
+		 * own, since rendering a block requires it to be inside a post or a page.
+		 */
+		unset( $data['title']['rendered'] );
+		unset( $data['content']['rendered'] );
+
+		// Add the core wp_pattern_sync_status meta as top level property to the response.
+		$data['wp_pattern_sync_status'] = isset( $data['meta']['wp_pattern_sync_status'] ) ? $data['meta']['wp_pattern_sync_status'] : '';
+		unset( $data['meta']['wp_pattern_sync_status'] );
+		return $data;
+	}
+}
diff --git a/lib/load.php b/lib/load.php
index 6d3638bf969134..3421bcc70d0b32 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -56,6 +56,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require_once __DIR__ . '/compat/wordpress-6.3/navigation-block-preloading.php';
 	require_once __DIR__ . '/compat/wordpress-6.3/link-template.php';
 	require_once __DIR__ . '/compat/wordpress-6.3/block-patterns.php';
+	require_once __DIR__ . '/compat/wordpress-6.3/class-gutenberg-rest-blocks-controller.php';
 
 	// Experimental.
 	if ( ! class_exists( 'WP_Rest_Customizer_Nonces' ) ) {
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index fc314636d11951..4cca99535a8e50 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2034,11 +2034,13 @@ export const getInserterItems = createSelector(
 			? getReusableBlocks( state )
 					.filter(
 						( reusableBlock ) =>
-							// Filter to either fully synced patterns (sync_status === 'fully'),
-							// or old school reusable blocks (sync_status === '').
-							reusableBlock.meta?.sync_status === 'fully' ||
-							reusableBlock.meta?.sync_status === '' ||
-							! reusableBlock.meta?.sync_status
+							// Reusable blocks that are fully synced should have no sync status set
+							// for backwards compat between patterns and old reusable blocks, but
+							// some in release 16.1 may have had sync status inadvertantly set to
+							// 'fully' if created in the site editor.
+							reusableBlock.wp_pattern_sync_status === 'fully' ||
+							reusableBlock.wp_pattern_sync_status === '' ||
+							! reusableBlock.wp_pattern_sync_status
 					)
 					.map( buildReusableBlockInserterItem )
 			: [];
@@ -2313,7 +2315,8 @@ function getUnsyncedPatterns( state ) {
 
 	return reusableBlocks
 		.filter(
-			( reusableBlock ) => reusableBlock.meta?.sync_status === 'unsynced'
+			( reusableBlock ) =>
+				reusableBlock.wp_pattern_sync_status === 'unsynced'
 		)
 		.map( ( reusableBlock ) => {
 			return {
diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
index 7906cb2352c7b7..46d734b86fdd19 100644
--- a/packages/edit-site/src/components/create-pattern-modal/index.js
+++ b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -56,7 +56,7 @@ export default function CreatePatternModal( {
 					status: 'publish',
 					meta:
 						syncType === SYNC_TYPES.unsynced
-							? { sync_status: syncType }
+							? { wp_pattern_sync_status: syncType }
 							: undefined,
 				},
 				{ throwOnError: true }
diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
index a8d76b58cb45d5..cef7b4721193f4 100644
--- a/packages/edit-site/src/components/page-patterns/use-patterns.js
+++ b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -154,7 +154,7 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 	categories: reusableBlock.wp_pattern,
 	id: reusableBlock.id,
 	name: reusableBlock.slug,
-	syncStatus: reusableBlock.meta?.sync_status || SYNC_TYPES.full,
+	syncStatus: reusableBlock.wp_pattern_sync_status || SYNC_TYPES.full,
 	title: reusableBlock.title.raw,
 	type: reusableBlock.type,
 	reusableBlock,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
index dfc367ea0b97dc..9853e2e6de23bc 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
@@ -95,7 +95,7 @@ export default function usePatternDetails( postType, postId ) {
 		details.push( {
 			label: __( 'Syncing' ),
 			value:
-				record.meta?.sync_status === 'unsynced'
+				record.wp_pattern_sync_status === 'unsynced'
 					? __( 'Not synced' )
 					: __( 'Fully synced' ),
 		} );
diff --git a/packages/editor/src/components/post-sync-status/index.js b/packages/editor/src/components/post-sync-status/index.js
index c384fd234c7a34..22de1396d06790 100644
--- a/packages/editor/src/components/post-sync-status/index.js
+++ b/packages/editor/src/components/post-sync-status/index.js
@@ -11,17 +11,17 @@ import { PanelRow } from '@wordpress/components';
 import { store as editorStore } from '../../store';
 
 export default function PostSyncStatus() {
-	const { meta, postType } = useSelect( ( select ) => {
+	const { syncStatus, postType } = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );
 		return {
-			meta: getEditedPostAttribute( 'meta' ),
+			syncStatus: getEditedPostAttribute( 'wp_pattern_sync_status' ),
 			postType: getEditedPostAttribute( 'type' ),
 		};
 	}, [] );
 	if ( postType !== 'wp_block' ) {
 		return null;
 	}
-	const syncStatus = meta?.sync_status;
+
 	const isFullySynced = ! syncStatus;
 
 	return (
diff --git a/packages/reusable-blocks/src/store/actions.js b/packages/reusable-blocks/src/store/actions.js
index aae706adfab36a..17a2e83d5e776a 100644
--- a/packages/reusable-blocks/src/store/actions.js
+++ b/packages/reusable-blocks/src/store/actions.js
@@ -52,7 +52,7 @@ export const __experimentalConvertBlocksToReusable =
 		const meta =
 			syncType === 'unsynced'
 				? {
-						sync_status: syncType,
+						wp_pattern_sync_status: syncType,
 				  }
 				: undefined;
 

From e085f159ce0290b995e7dc598afb6e43624ffbd8 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 5 Jul 2023 11:24:05 +1000
Subject: [PATCH 07/15] Patterns: Update section heading levels (#52273)

---
 .../edit-site/src/components/page-patterns/grid-item.js   | 8 +-------
 .../src/components/page-patterns/patterns-list.js         | 8 ++++++--
 .../edit-site/src/components/page-patterns/style.scss     | 2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js
index 377a04aca1c16e..30db5cdedfeff3 100644
--- a/packages/edit-site/src/components/page-patterns/grid-item.js
+++ b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -12,7 +12,6 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
-	__experimentalHeading as Heading,
 	__experimentalHStack as HStack,
 	__unstableCompositeItem as CompositeItem,
 	Tooltip,
@@ -155,12 +154,7 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 								icon={ itemIcon }
 							/>
 						) }
-						<Flex
-							as={ Heading }
-							level={ 5 }
-							gap={ 0 }
-							justify="left"
-						>
+						<Flex as="span" gap={ 0 } justify="left">
 							{ item.title }
 							{ item.type === PATTERNS && (
 								<Tooltip
diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js
index 2dfe197c379638..81d383ea7bdd50 100644
--- a/packages/edit-site/src/components/page-patterns/patterns-list.js
+++ b/packages/edit-site/src/components/page-patterns/patterns-list.js
@@ -76,7 +76,9 @@ export default function PatternsList( { categoryId, type } ) {
 			{ ! isResolving && !! syncedPatterns.length && (
 				<>
 					<VStack className="edit-site-patterns__section-header">
-						<Heading level={ 4 }>{ __( 'Synced' ) }</Heading>
+						<Heading as="h2" level={ 4 }>
+							{ __( 'Synced' ) }
+						</Heading>
 						<Text variant="muted" as="p">
 							{ __(
 								'Patterns that are kept in sync across your site'
@@ -94,7 +96,9 @@ export default function PatternsList( { categoryId, type } ) {
 			{ ! isResolving && !! unsyncedPatterns.length && (
 				<>
 					<VStack className="edit-site-patterns__section-header">
-						<Heading level={ 4 }>{ __( 'Standard' ) }</Heading>
+						<Heading as="h2" level={ 4 }>
+							{ __( 'Standard' ) }
+						</Heading>
 						<Text variant="muted" as="p">
 							{ __(
 								'Patterns that can be changed freely without affecting your site'
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index fdf0aea3431f69..9326a966123198 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -91,7 +91,7 @@
 }
 
 .edit-site-patterns__pattern-title {
-	color: $gray-600;
+	color: $gray-200;
 
 	.edit-site-patterns__pattern-icon {
 		border-radius: $grid-unit-05;

From 095d64a7fd92c3d5fa26e836fc40cd8fe5dc77cd Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Wed, 5 Jul 2023 09:25:48 +0800
Subject: [PATCH 08/15] Fix incorrect aria-describedby attributes for theme
 patterns (#52263)

---
 .../edit-site/src/components/page-patterns/grid-item.js    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js
index 30db5cdedfeff3..8795e41eedd4f3 100644
--- a/packages/edit-site/src/components/page-patterns/grid-item.js
+++ b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -121,7 +121,12 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 					aria-label={ item.title }
 					aria-describedby={
 						ariaDescriptions.length
-							? ariaDescriptions.join( ' ' )
+							? ariaDescriptions
+									.map(
+										( _, index ) =>
+											`${ descriptionId }-${ index }`
+									)
+									.join( ' ' )
 							: undefined
 					}
 				>

From c629b5da345739cbc0ad17361f40c4add8f6728f Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 5 Jul 2023 14:40:16 +1000
Subject: [PATCH 09/15] Hide parent selector when parent is 'disabled' or
 'contentOnly' (#52264)

---
 .../components/block-parent-selector/index.js | 21 ++++++++++++-------
 .../block-tools/block-contextual-toolbar.js   |  1 +
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js
index e338a10f170695..e47c6da6063a2a 100644
--- a/packages/block-editor/src/components/block-parent-selector/index.js
+++ b/packages/block-editor/src/components/block-parent-selector/index.js
@@ -14,6 +14,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block parent selector component, displaying the hierarchy of the
@@ -24,14 +25,15 @@ import { store as blockEditorStore } from '../../store';
 export default function BlockParentSelector() {
 	const { selectBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );
-	const { firstParentClientId, shouldHide, isDistractionFree } = useSelect(
+	const { firstParentClientId, isVisible, isDistractionFree } = useSelect(
 		( select ) => {
 			const {
 				getBlockName,
 				getBlockParents,
 				getSelectedBlockClientId,
 				getSettings,
-			} = select( blockEditorStore );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
 			const { hasBlockSupport } = select( blocksStore );
 			const selectedBlockClientId = getSelectedBlockClientId();
 			const parents = getBlockParents( selectedBlockClientId );
@@ -41,11 +43,14 @@ export default function BlockParentSelector() {
 			const settings = getSettings();
 			return {
 				firstParentClientId: _firstParentClientId,
-				shouldHide: ! hasBlockSupport(
-					_parentBlockType,
-					'__experimentalParentSelector',
-					true
-				),
+				isVisible:
+					_firstParentClientId &&
+					getBlockEditingMode( _firstParentClientId ) === 'default' &&
+					hasBlockSupport(
+						_parentBlockType,
+						'__experimentalParentSelector',
+						true
+					),
 				isDistractionFree: settings.isDistractionFree,
 			};
 		},
@@ -66,7 +71,7 @@ export default function BlockParentSelector() {
 		},
 	} );
 
-	if ( shouldHide || firstParentClientId === undefined ) {
+	if ( ! isVisible ) {
 		return null;
 	}
 
diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
index d9c06f0324701c..743a07b4bb8818 100644
--- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
@@ -57,6 +57,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 				hasParents: parents.length,
 				showParentSelector:
 					parentBlockType &&
+					getBlockEditingMode( firstParentClientId ) === 'default' &&
 					hasBlockSupport(
 						parentBlockType,
 						'__experimentalParentSelector',

From b73b1d23d5c83edb57cb3957eae2eb7f3c2e3bbc Mon Sep 17 00:00:00 2001
From: Glen Davies <glendaviesnz@users.noreply.github.com>
Date: Wed, 5 Jul 2023 17:34:26 +1200
Subject: [PATCH 10/15] Navigation: Fix e2e test failures caused by sidebar
 title change (#52308)

---
 .../template-part-navigation-menu.js                            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
index 4837ad99beaddb..b410b2cf8a9b68 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
@@ -22,7 +22,7 @@ export default function TemplatePartNavigationMenu( { id } ) {
 				size="12"
 				upperCase={ true }
 			>
-				{ title || __( 'Navigation' ) }
+				{ title?.rendered || title || __( 'Navigation' ) }
 			</Heading>
 			<NavigationMenuEditor navigationMenuId={ id } />
 		</>

From a42a0b2c65c672c8aeefbd8e1d389a0136b776f4 Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Wed, 5 Jul 2023 15:35:26 +1000
Subject: [PATCH 11/15] Check randomizer experiment is enabled before rendering
 button (#52306)

---
 packages/edit-site/src/components/global-styles/palette.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 6e9757415524cb..32d92469068bab 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -91,7 +91,7 @@ function Palette( { name } ) {
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
-			{ themeColors?.length > 0 && (
+			{ randomizeThemeColors && themeColors?.length > 0 && (
 				<Button
 					variant="secondary"
 					icon={ shuffle }

From 7859c562573ad784954978a1f0c2947004c917d5 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Wed, 5 Jul 2023 15:55:58 +1000
Subject: [PATCH 12/15] Site Editor: update headings hierarchy in the 'Manage
 all' screens (#52271)

* This commit:
- updates heading levels on the template and template part pages
- passes a `level` prop to Header from Page

* update h2 size

* Rolling back custom sizes

* Rolling back unnecessary classNames
There was a rogue space in trunk. Let's let it live
---
 packages/edit-site/src/components/page-template-parts/index.js | 2 +-
 packages/edit-site/src/components/page-templates/index.js      | 2 +-
 packages/edit-site/src/components/page/header.js               | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/page-template-parts/index.js b/packages/edit-site/src/components/page-template-parts/index.js
index 0a50f839279793..7e9c8cb6dd6e16 100644
--- a/packages/edit-site/src/components/page-template-parts/index.js
+++ b/packages/edit-site/src/components/page-template-parts/index.js
@@ -45,7 +45,7 @@ export default function PageTemplateParts() {
 			header: __( 'Template Part' ),
 			cell: ( templatePart ) => (
 				<VStack>
-					<Heading level={ 5 }>
+					<Heading as="h3" level={ 5 }>
 						<Link
 							params={ {
 								postId: templatePart.id,
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
index a66070fa394159..3246d0fe884b76 100644
--- a/packages/edit-site/src/components/page-templates/index.js
+++ b/packages/edit-site/src/components/page-templates/index.js
@@ -46,7 +46,7 @@ export default function PageTemplates() {
 			header: __( 'Template' ),
 			cell: ( template ) => (
 				<VStack>
-					<Heading level={ 5 }>
+					<Heading as="h3" level={ 5 }>
 						<Link
 							params={ {
 								postId: template.id,
diff --git a/packages/edit-site/src/components/page/header.js b/packages/edit-site/src/components/page/header.js
index f617e8e4a4d9f5..06de80c25685bd 100644
--- a/packages/edit-site/src/components/page/header.js
+++ b/packages/edit-site/src/components/page/header.js
@@ -18,7 +18,7 @@ export default function Header( { title, subTitle, actions } ) {
 		<HStack as="header" alignment="left" className="edit-site-page-header">
 			<FlexBlock className="edit-site-page-header__page-title">
 				<Heading
-					as="h1"
+					as="h2"
 					level={ 4 }
 					className="edit-site-page-header__title"
 				>

From 7d7617a573a224c419fa87c1e06e14e84e9f3c28 Mon Sep 17 00:00:00 2001
From: Glen Davies <glendaviesnz@users.noreply.github.com>
Date: Wed, 5 Jul 2023 18:10:07 +1200
Subject: [PATCH 13/15] Patterns: add a hint about the rename of reusable
 blocks to menu and inserter  (#51771)

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
---
 packages/block-editor/README.md               |  4 ++
 packages/block-editor/src/components/index.js |  5 ++
 .../inserter/reusable-block-rename-hint.js    | 52 +++++++++++++++++++
 .../inserter/reusable-blocks-tab.js           |  4 ++
 .../src/components/inserter/style.scss        | 28 ++++++++++
 .../src/create-reusable-block.js              |  2 +-
 .../block-editor-keyboard-shortcuts.test.js   |  2 +-
 .../editor/various/reusable-blocks.test.js    |  4 +-
 .../components/page-patterns/patterns-list.js |  2 +-
 .../reusable-block-convert-button.js          | 10 ++--
 10 files changed, 103 insertions(+), 10 deletions(-)
 create mode 100644 packages/block-editor/src/components/inserter/reusable-block-rename-hint.js

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 2c42b42afc4424..937bfea2f49656 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -680,6 +680,10 @@ _Related_
 
 Private @wordpress/block-editor APIs.
 
+### ReusableBlocksRenameHint
+
+Undocumented declaration.
+
 ### RichText
 
 _Related_
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 5876eb4ec01e9e..db93f112a366d3 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -165,3 +165,8 @@ export { default as __experimentalInspectorPopoverHeader } from './inspector-pop
 
 export { default as BlockEditorProvider } from './provider';
 export { default as useSetting } from './use-setting';
+
+/*
+ * The following rename hint component can be removed in 6.4.
+ */
+export { default as ReusableBlocksRenameHint } from './inserter/reusable-block-rename-hint';
diff --git a/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js b/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js
new file mode 100644
index 00000000000000..09861d9b97f1c9
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
+import { useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+const PREFERENCE_NAME = 'isResuableBlocksrRenameHintVisible';
+
+export default function ReusableBlocksRenameHint() {
+	const isReusableBlocksRenameHint = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+
+	const ref = useRef();
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	if ( ! isReusableBlocksRenameHint ) {
+		return null;
+	}
+
+	return (
+		<div ref={ ref } className="reusable-blocks-menu-items__rename-hint">
+			<div className="reusable-blocks-menu-items__rename-hint-content">
+				{ __(
+					'Reusable blocks are now called patterns. A synced pattern will behave in exactly the same way as a reusable block.'
+				) }
+			</div>
+			<Button
+				className="reusable-blocks-menu-items__rename-hint-dismiss"
+				icon={ close }
+				iconSize="16"
+				label={ __( 'Dismiss hint' ) }
+				onClick={ () => {
+					// Retain focus when dismissing the element.
+					const previousElement = focus.tabbable.findPrevious(
+						ref.current
+					);
+					previousElement?.focus();
+					setPreference( 'core', PREFERENCE_NAME, false );
+				} }
+				showTooltip={ false }
+			/>
+		</div>
+	);
+}
diff --git a/packages/block-editor/src/components/inserter/reusable-blocks-tab.js b/packages/block-editor/src/components/inserter/reusable-blocks-tab.js
index c16d5f1a78e543..08cd8d57ba0d0e 100644
--- a/packages/block-editor/src/components/inserter/reusable-blocks-tab.js
+++ b/packages/block-editor/src/components/inserter/reusable-blocks-tab.js
@@ -13,6 +13,7 @@ import BlockTypesList from '../block-types-list';
 import InserterPanel from './panel';
 import InserterNoResults from './no-results';
 import useBlockTypesState from './hooks/use-block-types-state';
+import ReusableBlocksRenameHint from './reusable-block-rename-hint';
 
 function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 	const [ items, , , onSelectItem ] = useBlockTypesState(
@@ -54,6 +55,9 @@ function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 	return (
 		<>
+			<div className="block-editor-inserter__hint">
+				<ReusableBlocksRenameHint />
+			</div>
 			<ReusableBlocksList
 				onHover={ onHover }
 				onInsert={ onInsert }
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index d6cf14872462e4..e3546e29f5dc9d 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -711,3 +711,31 @@ $block-inserter-tabs-height: 44px;
 		margin: 0;
 	}
 }
+
+.block-editor-inserter__hint {
+	margin: $grid-unit-20 $grid-unit-20 0;
+}
+
+.reusable-blocks-menu-items__rename-hint {
+	align-items: top;
+	background: $gray-100;
+	border-radius: $radius-block-ui;
+	color: $gray-900;
+	display: flex;
+	flex-direction: row;
+	max-width: 380px;
+}
+
+.reusable-blocks-menu-items__rename-hint-content {
+	margin: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
+}
+
+.reusable-blocks-menu-items__rename-hint-dismiss {
+	// The dismiss button has a lot of empty space through its padding.
+	// Apply margin to visually align the icon with the top of the text to its left.
+	margin: $grid-unit-05 $grid-unit-05 $grid-unit-05 0;
+}
+
+.components-menu-group .reusable-blocks-menu-items__rename-hint {
+	margin: 0;
+}
diff --git a/packages/e2e-test-utils/src/create-reusable-block.js b/packages/e2e-test-utils/src/create-reusable-block.js
index 7193db49a83efb..4559d3b435fd15 100644
--- a/packages/e2e-test-utils/src/create-reusable-block.js
+++ b/packages/e2e-test-utils/src/create-reusable-block.js
@@ -24,7 +24,7 @@ export const createReusableBlock = async ( content, title ) => {
 	await page.keyboard.type( content );
 
 	await clickBlockToolbarButton( 'Options' );
-	await clickMenuItem( 'Create pattern' );
+	await clickMenuItem( 'Create pattern/reusable block' );
 	const nameInput = await page.waitForSelector(
 		reusableBlockNameInputSelector
 	);
diff --git a/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js b/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js
index 24e8e3104aaaa2..3be73830a42991 100644
--- a/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js
@@ -90,7 +90,7 @@ describe( 'block editor keyboard shortcuts', () => {
 		} );
 		it( 'should prevent deleting multiple selected blocks from inputs', async () => {
 			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Create pattern' );
+			await clickMenuItem( 'Create pattern/reusable block' );
 			const reusableBlockNameInputSelector =
 				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
 			const nameInput = await page.waitForSelector(
diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
index 1ffd4e24143362..ec2fc8e535550c 100644
--- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
@@ -197,7 +197,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert block to a reusable block.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create pattern' );
+		await clickMenuItem( 'Create pattern/reusable block' );
 
 		// Set title.
 		const nameInput = await page.waitForSelector(
@@ -383,7 +383,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert to reusable.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create pattern' );
+		await clickMenuItem( 'Create pattern/reusable block' );
 		const nameInput = await page.waitForSelector(
 			reusableBlockNameInputSelector
 		);
diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js
index 81d383ea7bdd50..87b830c6180cca 100644
--- a/packages/edit-site/src/components/page-patterns/patterns-list.js
+++ b/packages/edit-site/src/components/page-patterns/patterns-list.js
@@ -88,7 +88,7 @@ export default function PatternsList( { categoryId, type } ) {
 					<Grid
 						icon={ symbol }
 						categoryId={ categoryId }
-						label={ __( 'Synced patterns' ) }
+						label={ __( 'Synced' ) }
 						items={ syncedPatterns }
 					/>
 				</>
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index d051e366412817..875adb8fc16e3a 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -5,6 +5,7 @@ import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
 import {
 	BlockSettingsMenuControls,
 	store as blockEditorStore,
+	ReusableBlocksRenameHint,
 } from '@wordpress/block-editor';
 import { useCallback, useState } from '@wordpress/element';
 import {
@@ -130,7 +131,7 @@ export default function ReusableBlockConvertButton( {
 						icon={ symbol }
 						onClick={ () => setIsModalOpen( true ) }
 					>
-						{ __( 'Create pattern' ) }
+						{ __( 'Create pattern/reusable block' ) }
 					</MenuItem>
 					{ isModalOpen && (
 						<Modal
@@ -151,6 +152,7 @@ export default function ReusableBlockConvertButton( {
 								} }
 							>
 								<VStack spacing="5">
+									<ReusableBlocksRenameHint />
 									<TextControl
 										__nextHasNoMarginBottom
 										label={ __( 'Name' ) }
@@ -160,11 +162,9 @@ export default function ReusableBlockConvertButton( {
 									/>
 
 									<ToggleControl
-										label={ __(
-											'Keep all pattern instances in sync'
-										) }
+										label={ __( 'Synced' ) }
 										help={ __(
-											'Editing the original pattern will also update anywhere the pattern is used.'
+											'Editing the pattern will update it anywhere it is used.'
 										) }
 										checked={ syncType === 'fully' }
 										onChange={ () => {

From 58ba018f0f9f4ae48f0f75c4ce1bf7072999a217 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 5 Jul 2023 16:15:43 +1000
Subject: [PATCH 14/15] Guide: Place focus on the guide's container instead of
 its first tabbable (#52300)

* Guide: Place focus on the guide's container instead of its first tabbable

* Update CHANGELOG
---
 packages/components/CHANGELOG.md        |  1 +
 packages/components/src/guide/index.tsx | 23 ++++++++++-------------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c690c15bce3e95..c83fe7fc5ea82a 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -17,6 +17,7 @@
 -   `Modal`: Add small top padding to the content so that avoid cutting off the visible outline when hovering items ([#51829](https://github.com/WordPress/gutenberg/pull/51829)).
 -   `DropdownMenu`: fix icon style when dashicon is used ([#43574](https://github.com/WordPress/gutenberg/pull/43574)).
 -   `UnitControl`: Fix crash when certain units are used ([#52211](https://github.com/WordPress/gutenberg/pull/52211)).
+-   `Guide`: Place focus on the guide's container instead of its first tabbable ([#52300](https://github.com/WordPress/gutenberg/pull/52300)).
 
 ## 25.2.0 (2023-06-23)
 
diff --git a/packages/components/src/guide/index.tsx b/packages/components/src/guide/index.tsx
index e6a2d4c1252eb8..c5655847d99e5e 100644
--- a/packages/components/src/guide/index.tsx
+++ b/packages/components/src/guide/index.tsx
@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import { useState, useEffect, Children, useRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
-import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -59,9 +58,17 @@ function Guide( {
 	onFinish,
 	pages = [],
 }: GuideProps ) {
-	const guideContainer = useRef< HTMLDivElement >( null );
+	const ref = useRef< HTMLDivElement >( null );
 	const [ currentPage, setCurrentPage ] = useState( 0 );
 
+	useEffect( () => {
+		// Place focus at the top of the guide on mount and when the page changes.
+		const frame = ref.current?.querySelector( '.components-guide' );
+		if ( frame instanceof HTMLElement ) {
+			frame.focus();
+		}
+	}, [ currentPage ] );
+
 	useEffect( () => {
 		if ( Children.count( children ) ) {
 			deprecated( 'Passing children to <Guide>', {
@@ -71,16 +78,6 @@ function Guide( {
 		}
 	}, [ children ] );
 
-	useEffect( () => {
-		// Each time we change the current page, start from the first element of the page.
-		// This also solves any focus loss that can happen.
-		if ( guideContainer.current ) {
-			(
-				focus.tabbable.find( guideContainer.current ) as HTMLElement[]
-			 )[ 0 ]?.focus();
-		}
-	}, [ currentPage ] );
-
 	if ( Children.count( children ) ) {
 		pages =
 			Children.map( children, ( child ) => ( {
@@ -124,7 +121,7 @@ function Guide( {
 					event.preventDefault();
 				}
 			} }
-			ref={ guideContainer }
+			ref={ ref }
 		>
 			<div className="components-guide__container">
 				<div className="components-guide__page">

From 48473a78dfa825d3d674801c3a4a5d87b4db44f1 Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Wed, 5 Jul 2023 16:21:45 +1000
Subject: [PATCH 15/15] Check if experiment enabled fr this time (#52315)

---
 .../src/components/global-styles/palette.js   | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 32d92469068bab..dc73f54a1701a8 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -91,15 +91,16 @@ function Palette( { name } ) {
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
-			{ randomizeThemeColors && themeColors?.length > 0 && (
-				<Button
-					variant="secondary"
-					icon={ shuffle }
-					onClick={ randomizeThemeColors }
-				>
-					{ __( 'Randomize colors' ) }
-				</Button>
-			) }
+			{ window.__experimentalEnableColorRandomizer &&
+				themeColors?.length > 0 && (
+					<Button
+						variant="secondary"
+						icon={ shuffle }
+						onClick={ randomizeThemeColors }
+					>
+						{ __( 'Randomize colors' ) }
+					</Button>
+				) }
 		</VStack>
 	);
 }