Add a dismissible hint about the rename instead of changing menu labe…

…ling

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' );

packages/block-editor/README.md

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

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';

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>
+ );
+}

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 }

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;
+}

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 = {

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 }

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.'
  ) }

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 ) }>