From 8f9158dfde641b31a0e904cb97a622789d9856dc Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Fri, 23 Jun 2023 15:51:44 +1200
Subject: [PATCH] Add a dismissible hint about the rename instead of changing
 menu labeling

---
 lib/compat/wordpress-6.3/blocks.php           |  2 +-
 packages/block-editor/README.md               |  4 ++
 packages/block-editor/src/components/index.js |  5 ++
 .../inserter/reusable-block-rename-hint.js    | 50 +++++++++++++++++++
 .../inserter/reusable-blocks-tab.js           |  6 ++-
 .../src/components/inserter/style.scss        | 24 +++++++++
 .../src/components/inserter/tabs.js           |  2 +-
 packages/edit-post/src/plugins/index.js       |  2 +-
 .../reusable-block-convert-button.js          |  6 +--
 .../reusable-blocks-manage-button.js          |  2 +-
 10 files changed, 94 insertions(+), 9 deletions(-)
 create mode 100644 packages/block-editor/src/components/inserter/reusable-block-rename-hint.js

diff --git a/lib/compat/wordpress-6.3/blocks.php b/lib/compat/wordpress-6.3/blocks.php
index dc340e84e36e5f..6902a258c5c3d8 100644
--- a/lib/compat/wordpress-6.3/blocks.php
+++ b/lib/compat/wordpress-6.3/blocks.php
@@ -41,7 +41,7 @@ function gutenberg_add_selectors_property_to_block_type_settings( $settings, $me
  */
 function gutenberg_rename_reusable_block_cpt_to_pattern( $args, $post_type ) {
 	if ( 'wp_block' === $post_type ) {
-		$args['labels']['name']                     = _x( 'Patterns/Reusable blocks', 'post type general name' );
+		$args['labels']['name']                     = _x( 'Patterns', 'post type general name' );
 		$args['labels']['singular_name']            = _x( 'Pattern', 'post type singular name' );
 		$args['labels']['add_new_item']             = __( 'Add new Pattern' );
 		$args['labels']['new_item']                 = __( 'New Pattern' );
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 72c3d50372e48e..13f9f2723f29de 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 e804771f9ce64a..a49fd623ac14a3 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -164,3 +164,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..e75bdea82e3583
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js
@@ -0,0 +1,50 @@
+/**
+ * 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".' ) }
+			</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 ac30c7c7634e6e..b2edc32f84a0bf 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(
@@ -29,12 +30,12 @@ function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 	}
 
 	return (
-		<InserterPanel title={ __( 'Synced patterns/Reusable blocks' ) }>
+		<InserterPanel title={ __( 'Synced patterns' ) }>
 			<BlockTypesList
 				items={ filteredItems }
 				onSelect={ onSelectItem }
 				onHover={ onHover }
-				label={ __( 'Synced patterns/Reusable blocks' ) }
+				label={ __( 'Synced patterns' ) }
 			/>
 		</InserterPanel>
 	);
@@ -54,6 +55,7 @@ function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 	return (
 		<>
+			<ReusableBlocksRenameHint />
 			<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..8a22acc5252d0e 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -711,3 +711,27 @@ $block-inserter-tabs-height: 44px;
 		margin: 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;
+	margin: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
+}
+
+.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/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index 4cffb75c2a17e3..1ff8b529707a4b 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -19,7 +19,7 @@ const patternsTab = {
 const reusableBlocksTab = {
 	name: 'reusable',
 	/* translators: Locally created Patterns tab title in the block inserter. */
-	title: __( 'Synced patterns/Reusable blocks' ),
+	title: __( 'Synced patterns' ),
 	icon: reusableBlockIcon,
 };
 const mediaTab = {
diff --git a/packages/edit-post/src/plugins/index.js b/packages/edit-post/src/plugins/index.js
index 11881998503cad..e3bd1b2dd72bda 100644
--- a/packages/edit-post/src/plugins/index.js
+++ b/packages/edit-post/src/plugins/index.js
@@ -28,7 +28,7 @@ registerPlugin( 'edit-post', {
 									post_type: 'wp_block',
 								} ) }
 							>
-								{ __( 'Manage Patterns/Reusable blocks' ) }
+								{ __( 'Manage Patterns' ) }
 							</MenuItem>
 							<KeyboardShortcutsHelpMenuItem
 								onSelect={ onClose }
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 49e78254ba8b7b..429dbf60cf8ba4 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 {
@@ -132,6 +133,7 @@ export default function ReusableBlockConvertButton( {
 					>
 						{ __( 'Create pattern' ) }
 					</MenuItem>
+					<ReusableBlocksRenameHint />
 					{ isModalOpen && (
 						<Modal
 							title={ __( 'Create pattern' ) }
@@ -159,9 +161,7 @@ export default function ReusableBlockConvertButton( {
 									/>
 
 									<ToggleControl
-										label={ __(
-											'Synced (formerly Reusable block)'
-										) }
+										label={ __( 'Synced' ) }
 										help={ __(
 											'Editing the pattern will update it anywhere it is used.'
 										) }
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js
index 3ac8453924f6ed..faffefe605ed96 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js
@@ -53,7 +53,7 @@ function ReusableBlocksManageButton( { clientId } ) {
 			<MenuItem
 				href={ addQueryArgs( 'edit.php', { post_type: 'wp_block' } ) }
 			>
-				{ __( 'Manage Patterns/Reusable blocks' ) }
+				{ __( 'Manage Patterns' ) }
 			</MenuItem>
 			{ canRemove && (
 				<MenuItem onClick={ () => convertBlockToStatic( clientId ) }>