Initial migration away from hooks

WordPress · Oct 25, 2023 · c8c44cf · c8c44cf
1 parent 869f3c0
commit c8c44cf
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js
@@ -7,9 +7,11 @@ import {
 	MenuItem,
 	__experimentalStyleProvider as StyleProvider,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { pipe } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { getBlockSupport } from '@wordpress/blocks';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,6 +24,8 @@ import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
 
+import { useBlockDisplayInformation } from '../';
+
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
 const BlockSettingsMenuControlsSlot = ( {
@@ -44,7 +48,13 @@ const BlockSettingsMenuControlsSlot = ( {
 	);
 
 	const { canLock } = useBlockLock( selectedClientIds[ 0 ] );
+	const { canRename } = useBlockRename( selectedBlocks[ 0 ] );
 	const showLockButton = selectedClientIds.length === 1 && canLock;
+	const showRenameButton =
+		selectedClientIds.length === 1 &&
+		// Todo confirm whether following conditional is needed anymore.
+		// clientId === selectedClientIds[ 0 ] &&
+		canRename;
 
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.
@@ -84,6 +94,11 @@ const BlockSettingsMenuControlsSlot = ( {
 								clientId={ selectedClientIds[ 0 ] }
 							/>
 						) }
+						{ showRenameButton && (
+							<BlockRenameControl
+								clientId={ selectedClientIds[ 0 ] }
+							/>
+						) }
 						{ fills }
 						{ fillProps?.canMove && ! fillProps?.onlyBlock && (
 							<MenuItem
@@ -125,3 +140,87 @@ function BlockSettingsMenuControls( { ...props } ) {
 BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot;
 
 export default BlockSettingsMenuControls;
+
+function useBlockRename( name ) {
+	const metaDataSupport = getBlockSupport(
+		name,
+		'__experimentalMetadata',
+		false
+	);
+
+	const supportsBlockNaming = !! (
+		true === metaDataSupport || metaDataSupport?.name
+	);
+
+	return {
+		canRename: supportsBlockNaming,
+	};
+}
+
+const emptyString = ( testString ) => testString?.trim()?.length === 0;
+
+function BlockRenameControl( clientId ) {
+	const [ renamingBlock, setRenamingBlock ] = useState( false );
+
+	const { metadata } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+
+			const _metadata = getBlockAttributes( clientId )?.metadata;
+			return {
+				metadata: _metadata,
+			};
+		},
+		[ clientId ]
+	);
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const customName = metadata?.name;
+
+	function onChange( newName ) {
+		updateBlockAttributes( [ clientId ], {
+			metadata: {
+				...( metadata && metadata ), // include existing metadata
+				name: newName,
+			},
+		} );
+	}
+
+	const blockInformation = useBlockDisplayInformation( clientId );
+
+	return (
+		<>
+			<MenuItem
+				onClick={ () => {
+					setRenamingBlock( true );
+				} }
+				aria-expanded={ renamingBlock }
+				aria-haspopup="dialog"
+			>
+				{ __( 'Rename' ) }
+			</MenuItem>
+			{ renamingBlock && <div>Rename!</div> }
+			{ /* { renamingBlock && (
+				<RenameModal
+					blockName={ customName || '' }
+					originalBlockName={ blockInformation?.title }
+					onClose={ () => setRenamingBlock( false ) }
+					onSave={ ( newName ) => {
+						// If the new value is the block's original name (e.g. `Group`)
+						// or it is an empty string then assume the intent is to reset
+						// the value. Therefore reset the metadata.
+						if (
+							newName === blockInformation?.title ||
+							emptyString( newName )
+						) {
+							newName = undefined;
+						}
+
+						onChange( newName );
+					} }
+				/>
+			) } */ }
+		</>
+	);
+}
diff --git a/packages/block-editor/src/hooks/block-rename-ui.js b/packages/block-editor/src/hooks/block-rename-ui.js
@@ -228,8 +228,8 @@ export const withBlockRenameControl = createHigherOrderComponent(
 	'withToolbarControls'
 );
 
-addFilter(
-	'editor.BlockEdit',
-	'core/block-rename-ui/with-block-rename-control',
-	withBlockRenameControl
-);
+// addFilter(
+// 	'editor.BlockEdit',
+// 	'core/block-rename-ui/with-block-rename-control',
+// 	withBlockRenameControl
+// );