Patterns: Remove reusable text from menu once rename hint has been …

…dismissed (#52664)

packages/block-editor/README.md

@@ -680,10 +680,6 @@ _Related_
 
 Private @wordpress/block-editor APIs.
 
-### ReusableBlocksRenameHint
-
-Undocumented declaration.
-
 ### RichText
 
 _Related_

packages/block-editor/src/components/index.js

@@ -165,8 +165,3 @@ 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';

packages/block-editor/src/components/inserter/reusable-block-rename-hint.js

@@ -10,7 +10,24 @@ import { close } from '@wordpress/icons';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 const PREFERENCE_NAME = 'isResuableBlocksrRenameHintVisible';
+/*
+ * This hook was added in 6.3 to help users with the transition from Reusable blocks to Patterns.
+ * It is only exported for use in the reusable-blocks package as well as block-editor.
+ * It will be removed in 6.4. and should not be used in any new code.
+ */
+export function useReusableBlocksRenameHint() {
+	return useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+}
 
+/*
+ * This component was added in 6.3 to help users with the transition from Reusable blocks to Patterns.
+ * It is only exported for use in the reusable-blocks package as well as block-editor.
+ * It will be removed in 6.4. and should not be used in any new code.
+ */
 export default function ReusableBlocksRenameHint() {
 	const isReusableBlocksRenameHint = useSelect(
 		( select ) =>

packages/block-editor/src/private-apis.js

@@ -19,6 +19,10 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod
 import { useLayoutClasses, useLayoutStyles } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
+import {
+	default as ReusableBlocksRenameHint,
+	useReusableBlocksRenameHint,
+} from './components/inserter/reusable-block-rename-hint';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -43,4 +47,6 @@ lock( privateApis, {
 	useLayoutStyles,
 	DimensionsTool,
 	ResolutionTool,
+	ReusableBlocksRenameHint,
+	useReusableBlocksRenameHint,
 } );

packages/e2e-test-utils/src/create-reusable-block.js

@@ -15,8 +15,6 @@ import { canvas } from './canvas';
 export const createReusableBlock = async ( content, title ) => {
 	const reusableBlockNameInputSelector =
 		'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
-	const syncToggleSelector =
-		'.reusable-blocks-menu-items__convert-modal .components-form-toggle__input';
 	const syncToggleSelectorChecked =
 		'.reusable-blocks-menu-items__convert-modal .components-form-toggle.is-checked';
 	// Insert a paragraph block
@@ -31,8 +29,6 @@ export const createReusableBlock = async ( content, title ) => {
 	await nameInput.click();
 	await page.keyboard.type( title );
 
-	const syncToggle = await page.waitForSelector( syncToggleSelector );
-	syncToggle.click();
 	await page.waitForSelector( syncToggleSelectorChecked );
 	await page.keyboard.press( 'Enter' );
 

packages/e2e-tests/specs/editor/various/reusable-blocks.test.js

@@ -23,8 +23,6 @@ const reusableBlockNameInputSelector =
 	'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
 const reusableBlockInspectorNameInputSelector =
 	'.block-editor-block-inspector .components-text-control__input';
-const syncToggleSelector =
-	'.reusable-blocks-menu-items__convert-modal .components-form-toggle__input';
 const syncToggleSelectorChecked =
 	'.reusable-blocks-menu-items__convert-modal .components-form-toggle.is-checked';
 
@@ -205,8 +203,6 @@ describe( 'Reusable blocks', () => {
 		);
 		await nameInput.click();
 		await page.keyboard.type( 'Multi-selection reusable block' );
-		const syncToggle = await page.waitForSelector( syncToggleSelector );
-		syncToggle.click();
 		await page.waitForSelector( syncToggleSelectorChecked );
 		await page.keyboard.press( 'Enter' );
 
@@ -389,8 +385,6 @@ describe( 'Reusable blocks', () => {
 		);
 		await nameInput.click();
 		await page.keyboard.type( 'Block with styles' );
-		const syncToggle = await page.waitForSelector( syncToggleSelector );
-		syncToggle.click();
 		await page.waitForSelector( syncToggleSelectorChecked );
 		await page.keyboard.press( 'Enter' );
 		const reusableBlock = await canvas().waitForSelector(

packages/editor/src/components/post-sync-status/index.js

@@ -12,12 +12,13 @@ import {
 	ToggleControl,
 } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
-import { ReusableBlocksRenameHint } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 export default function PostSyncStatus() {
 	const { syncStatus, postType, meta } = useSelect( ( select ) => {
@@ -81,7 +82,7 @@ export function PostSyncStatusModal() {
 	if ( postType !== 'wp_block' || ! isNewPost ) {
 		return null;
 	}
-
+	const { ReusableBlocksRenameHint } = unlock( blockEditorPrivateApis );
 	return (
 		<>
 			{ isModalOpen && (

packages/private-apis/src/implementation.js

@@ -23,6 +23,7 @@ const CORE_MODULES_USING_PRIVATE_APIS = [
 	'@wordpress/edit-site',
 	'@wordpress/edit-widgets',
 	'@wordpress/editor',
+	'@wordpress/reusable-blocks',
 	'@wordpress/router',
 ];
 

packages/reusable-blocks/package.json

@@ -37,6 +37,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/notices": "file:../notices",
+		"@wordpress/private-apis": "^0.19.0",
 		"@wordpress/url": "file:../url"
 	},
 	"peerDependencies": {

packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js

@@ -5,7 +5,7 @@ import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
 import {
 	BlockSettingsMenuControls,
 	store as blockEditorStore,
-	ReusableBlocksRenameHint,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useCallback, useState } from '@wordpress/element';
 import {
@@ -27,6 +27,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Menu control to convert block(s) to reusable block.
@@ -40,7 +41,11 @@ export default function ReusableBlockConvertButton( {
 	clientIds,
 	rootClientId,
 } ) {
-	const [ syncType, setSyncType ] = useState( 'unsynced' );
+	const { useReusableBlocksRenameHint, ReusableBlocksRenameHint } = unlock(
+		blockEditorPrivateApis
+	);
+	const showRenameHint = useReusableBlocksRenameHint();
+	const [ syncType, setSyncType ] = useState( undefined );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ title, setTitle ] = useState( '' );
 	const canConvert = useSelect(
@@ -97,7 +102,7 @@ export default function ReusableBlockConvertButton( {
 					syncType
 				);
 				createSuccessNotice(
-					syncType === 'fully'
+					! syncType
 						? sprintf(
 								// translators: %s: the name the user has given to the pattern.
 								__( 'Synced Pattern created: %s' ),
@@ -141,7 +146,9 @@ export default function ReusableBlockConvertButton( {
 						icon={ symbol }
 						onClick={ () => setIsModalOpen( true ) }
 					>
-						{ __( 'Create pattern/reusable block' ) }
+						{ showRenameHint
+							? __( 'Create pattern/reusable block' )
+							: __( 'Create pattern' ) }
 					</MenuItem>
 					{ isModalOpen && (
 						<Modal
@@ -176,12 +183,12 @@ export default function ReusableBlockConvertButton( {
 										help={ __(
 											'Editing the pattern will update it anywhere it is used.'
 										) }
-										checked={ syncType === 'fully' }
+										checked={ ! syncType }
 										onChange={ () => {
 											setSyncType(
-												syncType === 'fully'
+												! syncType
 													? 'unsynced'
-													: 'fully'
+													: undefined
 											);
 										} }
 									/>

packages/reusable-blocks/src/lock-unlock.js

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+	'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+	'@wordpress/reusable-blocks'
+);

packages/reusable-blocks/src/store/actions.js

@@ -42,9 +42,9 @@ export const __experimentalConvertBlockToStatic =
 /**
  * Returns a generator converting one or more static blocks into a pattern.
  *
- * @param {string[]}           clientIds The client IDs of the block to detach.
- * @param {string}             title     Pattern title.
- * @param {'fully'|'unsynced'} syncType  They way block is synced, current 'fully' and 'unsynced'.
+ * @param {string[]}             clientIds The client IDs of the block to detach.
+ * @param {string}               title     Pattern title.
+ * @param {undefined|'unsynced'} syncType  They way block is synced, current undefined (synced) and 'unsynced'.
  */
 export const __experimentalConvertBlocksToReusable =
 	( clientIds, title, syncType ) =>