From c8c44cfffb357b404757f56c81cbbb0336a358b6 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Oct 2023 11:46:03 +0200 Subject: [PATCH 01/13] Initial migration away from hooks --- .../block-settings-menu-controls/index.js | 101 +++++++++++++++++- .../block-editor/src/hooks/block-rename-ui.js | 10 +- 2 files changed, 105 insertions(+), 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 index 53b3835fad1a1..90326bfc27e15 100644 --- 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 && ( + + ) } { fills } { fillProps?.canMove && ! fillProps?.onlyBlock && ( 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 ( + <> + { + setRenamingBlock( true ); + } } + aria-expanded={ renamingBlock } + aria-haspopup="dialog" + > + { __( 'Rename' ) } + + { renamingBlock &&
Rename!
} + { /* { renamingBlock && ( + 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 index 9025bfee61983..5f4801d1e4acd 100644 --- 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 +// ); From aa44e93ba629bb2032cef7adf7a7bbf00c263344 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Oct 2023 12:07:02 +0200 Subject: [PATCH 02/13] Reimplement outside the hook --- .../block-settings-menu-controls/index.js | 108 +++++++++++++++++- 1 file changed, 102 insertions(+), 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 index 90326bfc27e15..0e0aa268050a7 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -6,12 +6,18 @@ import { MenuGroup, MenuItem, __experimentalStyleProvider as StyleProvider, + __experimentalHStack as HStack, + __experimentalVStack as VStack, + Button, + TextControl, + Modal, } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { pipe } from '@wordpress/compose'; -import { __ } from '@wordpress/i18n'; +import { pipe, useInstanceId } from '@wordpress/compose'; +import { __, sprintf } from '@wordpress/i18n'; import { getBlockSupport } from '@wordpress/blocks'; import { useState } from '@wordpress/element'; +import { speak } from '@wordpress/a11y'; /** * Internal dependencies @@ -159,7 +165,7 @@ function useBlockRename( name ) { const emptyString = ( testString ) => testString?.trim()?.length === 0; -function BlockRenameControl( clientId ) { +function BlockRenameControl( { clientId } ) { const [ renamingBlock, setRenamingBlock ] = useState( false ); const { metadata } = useSelect( @@ -200,8 +206,7 @@ function BlockRenameControl( clientId ) { > { __( 'Rename' ) } - { renamingBlock &&
Rename!
} - { /* { renamingBlock && ( + { renamingBlock && ( - ) } */ } + ) } ); } + +function RenameModal( { blockName, originalBlockName, onClose, onSave } ) { + const [ editedBlockName, setEditedBlockName ] = useState( blockName ); + + const nameHasChanged = editedBlockName !== blockName; + const nameIsOriginal = editedBlockName === originalBlockName; + const nameIsEmpty = emptyString( editedBlockName ); + + const isNameValid = nameHasChanged || nameIsOriginal; + + const autoSelectInputText = ( event ) => event.target.select(); + + const dialogDescription = useInstanceId( + RenameModal, + `block-editor-rename-modal__description` + ); + + const handleSubmit = () => { + const message = + nameIsOriginal || nameIsEmpty + ? sprintf( + /* translators: %s: new name/label for the block */ + __( 'Block name reset to: "%s".' ), + editedBlockName + ) + : sprintf( + /* translators: %s: new name/label for the block */ + __( 'Block name changed to: "%s".' ), + editedBlockName + ); + + // Must be assertive to immediately announce change. + speak( message, 'assertive' ); + onSave( editedBlockName ); + + // Immediate close avoids ability to hit save multiple times. + onClose(); + }; + + return ( + +

+ { __( 'Enter a custom name for this block.' ) } +

+
{ + e.preventDefault(); + + if ( ! isNameValid ) { + return; + } + + handleSubmit(); + } } + > + + + + + + + + +
+ + ); +} From 0b7c36de17c80bcd60a7e00ea602f4d6019ba1a0 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Oct 2023 12:10:46 +0200 Subject: [PATCH 03/13] Remove the hook UI --- .../block-editor/src/hooks/block-rename-ui.js | 235 ------------------ 1 file changed, 235 deletions(-) delete mode 100644 packages/block-editor/src/hooks/block-rename-ui.js diff --git a/packages/block-editor/src/hooks/block-rename-ui.js b/packages/block-editor/src/hooks/block-rename-ui.js deleted file mode 100644 index 5f4801d1e4acd..0000000000000 --- a/packages/block-editor/src/hooks/block-rename-ui.js +++ /dev/null @@ -1,235 +0,0 @@ -/** - * WordPress dependencies - */ -import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose'; -import { addFilter } from '@wordpress/hooks'; -import { __, sprintf } from '@wordpress/i18n'; -import { getBlockSupport } from '@wordpress/blocks'; -import { - MenuItem, - __experimentalHStack as HStack, - __experimentalVStack as VStack, - Button, - TextControl, - Modal, -} from '@wordpress/components'; -import { useState } from '@wordpress/element'; -import { speak } from '@wordpress/a11y'; - -/** - * Internal dependencies - */ -import { - BlockSettingsMenuControls, - useBlockDisplayInformation, - InspectorControls, -} from '../components'; - -const emptyString = ( testString ) => testString?.trim()?.length === 0; - -function RenameModal( { blockName, originalBlockName, onClose, onSave } ) { - const [ editedBlockName, setEditedBlockName ] = useState( blockName ); - - const nameHasChanged = editedBlockName !== blockName; - const nameIsOriginal = editedBlockName === originalBlockName; - const nameIsEmpty = emptyString( editedBlockName ); - - const isNameValid = nameHasChanged || nameIsOriginal; - - const autoSelectInputText = ( event ) => event.target.select(); - - const dialogDescription = useInstanceId( - RenameModal, - `block-editor-rename-modal__description` - ); - - const handleSubmit = () => { - const message = - nameIsOriginal || nameIsEmpty - ? sprintf( - /* translators: %s: new name/label for the block */ - __( 'Block name reset to: "%s".' ), - editedBlockName - ) - : sprintf( - /* translators: %s: new name/label for the block */ - __( 'Block name changed to: "%s".' ), - editedBlockName - ); - - // Must be assertive to immediately announce change. - speak( message, 'assertive' ); - onSave( editedBlockName ); - - // Immediate close avoids ability to hit save multiple times. - onClose(); - }; - - return ( - -

- { __( 'Enter a custom name for this block.' ) } -

-
{ - e.preventDefault(); - - if ( ! isNameValid ) { - return; - } - - handleSubmit(); - } } - > - - - - - - - - -
- - ); -} - -function BlockRenameControl( props ) { - const [ renamingBlock, setRenamingBlock ] = useState( false ); - - const { clientId, customName, onChange } = props; - - const blockInformation = useBlockDisplayInformation( clientId ); - - return ( - <> - - - - - { ( { selectedClientIds } ) => { - // Only enabled for single selections. - const canRename = - selectedClientIds.length === 1 && - clientId === selectedClientIds[ 0 ]; - - // This check ensures the `BlockSettingsMenuControls` fill - // doesn't render multiple times and also that it renders for - // the block from which the menu was triggered. - if ( ! canRename ) { - return null; - } - - return ( - { - setRenamingBlock( true ); - } } - aria-expanded={ renamingBlock } - aria-haspopup="dialog" - > - { __( 'Rename' ) } - - ); - } } - - - { renamingBlock && ( - 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 ); - } } - /> - ) } - - ); -} - -export const withBlockRenameControl = createHigherOrderComponent( - ( BlockEdit ) => ( props ) => { - const { clientId, name, attributes, setAttributes } = props; - - const metaDataSupport = getBlockSupport( - name, - '__experimentalMetadata', - false - ); - - const supportsBlockNaming = !! ( - true === metaDataSupport || metaDataSupport?.name - ); - - return ( - <> - { supportsBlockNaming && ( - <> - { - setAttributes( { - metadata: { - ...( attributes?.metadata && - attributes?.metadata ), - name: newName, - }, - } ); - } } - /> - - ) } - - - - ); - }, - 'withToolbarControls' -); - -// addFilter( -// 'editor.BlockEdit', -// 'core/block-rename-ui/with-block-rename-control', -// withBlockRenameControl -// ); From 03bfef06b84bbc3dd2de446120abbaf28955d163 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Oct 2023 12:18:29 +0200 Subject: [PATCH 04/13] Extract to dedicated files --- .../block-rename/block-rename-control.js | 79 ++++++++ .../components/block-rename/empty-string.js | 1 + .../src/components/block-rename/modal.js | 114 +++++++++++ .../block-rename/use-block-rename.js | 20 ++ .../block-settings-menu-controls/index.js | 191 +----------------- 5 files changed, 219 insertions(+), 186 deletions(-) create mode 100644 packages/block-editor/src/components/block-rename/block-rename-control.js create mode 100644 packages/block-editor/src/components/block-rename/empty-string.js create mode 100644 packages/block-editor/src/components/block-rename/modal.js create mode 100644 packages/block-editor/src/components/block-rename/use-block-rename.js diff --git a/packages/block-editor/src/components/block-rename/block-rename-control.js b/packages/block-editor/src/components/block-rename/block-rename-control.js new file mode 100644 index 0000000000000..297d078dfa116 --- /dev/null +++ b/packages/block-editor/src/components/block-rename/block-rename-control.js @@ -0,0 +1,79 @@ +/** + * WordPress dependencies + */ +import { MenuItem } from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { useState } from '@wordpress/element'; +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../store'; +import { useBlockDisplayInformation } from '..'; +import { emptyString } from './empty-string'; +import { RenameModal } from './modal'; + +export 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 ), + name: newName, + }, + } ); + } + + const blockInformation = useBlockDisplayInformation( clientId ); + + return ( + <> + { + setRenamingBlock( true ); + } } + aria-expanded={ renamingBlock } + aria-haspopup="dialog" + > + { __( 'Rename' ) } + + { renamingBlock && ( + 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/components/block-rename/empty-string.js b/packages/block-editor/src/components/block-rename/empty-string.js new file mode 100644 index 0000000000000..14b7e8f34c803 --- /dev/null +++ b/packages/block-editor/src/components/block-rename/empty-string.js @@ -0,0 +1 @@ +export const emptyString = ( testString ) => testString?.trim()?.length === 0; diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js new file mode 100644 index 0000000000000..5856536457d4a --- /dev/null +++ b/packages/block-editor/src/components/block-rename/modal.js @@ -0,0 +1,114 @@ +/** + * WordPress dependencies + */ +import { + __experimentalHStack as HStack, + __experimentalVStack as VStack, + Button, + TextControl, + Modal, +} from '@wordpress/components'; +import { useInstanceId } from '@wordpress/compose'; +import { __, sprintf } from '@wordpress/i18n'; +import { useState } from '@wordpress/element'; +import { speak } from '@wordpress/a11y'; +/** + * Internal dependencies + */ +import { emptyString } from './empty-string'; + +export function RenameModal( { + blockName, + originalBlockName, + onClose, + onSave, +} ) { + const [ editedBlockName, setEditedBlockName ] = useState( blockName ); + + const nameHasChanged = editedBlockName !== blockName; + const nameIsOriginal = editedBlockName === originalBlockName; + const nameIsEmpty = emptyString( editedBlockName ); + + const isNameValid = nameHasChanged || nameIsOriginal; + + const autoSelectInputText = ( event ) => event.target.select(); + + const dialogDescription = useInstanceId( + RenameModal, + `block-editor-rename-modal__description` + ); + + const handleSubmit = () => { + const message = + nameIsOriginal || nameIsEmpty + ? sprintf( + /* translators: %s: new name/label for the block */ + __( 'Block name reset to: "%s".' ), + editedBlockName + ) + : sprintf( + /* translators: %s: new name/label for the block */ + __( 'Block name changed to: "%s".' ), + editedBlockName + ); + + // Must be assertive to immediately announce change. + speak( message, 'assertive' ); + onSave( editedBlockName ); + + // Immediate close avoids ability to hit save multiple times. + onClose(); + }; + + return ( + +

+ { __( 'Enter a custom name for this block.' ) } +

+
{ + e.preventDefault(); + + if ( ! isNameValid ) { + return; + } + + handleSubmit(); + } } + > + + + + + + + + +
+ + ); +} diff --git a/packages/block-editor/src/components/block-rename/use-block-rename.js b/packages/block-editor/src/components/block-rename/use-block-rename.js new file mode 100644 index 0000000000000..5035d9c87f0aa --- /dev/null +++ b/packages/block-editor/src/components/block-rename/use-block-rename.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { getBlockSupport } from '@wordpress/blocks'; + +export function useBlockRename( name ) { + const metaDataSupport = getBlockSupport( + name, + '__experimentalMetadata', + false + ); + + const supportsBlockNaming = !! ( + true === metaDataSupport || metaDataSupport?.name + ); + + return { + canRename: supportsBlockNaming, + }; +} 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 index 0e0aa268050a7..4943b810904fa 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -6,18 +6,10 @@ import { MenuGroup, MenuItem, __experimentalStyleProvider as StyleProvider, - __experimentalHStack as HStack, - __experimentalVStack as VStack, - Button, - TextControl, - Modal, } from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { pipe, useInstanceId } from '@wordpress/compose'; -import { __, sprintf } from '@wordpress/i18n'; -import { getBlockSupport } from '@wordpress/blocks'; -import { useState } from '@wordpress/element'; -import { speak } from '@wordpress/a11y'; +import { useSelect } from '@wordpress/data'; +import { pipe } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -30,7 +22,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 '../'; +import { BlockRenameControl } from '../block-rename/block-rename-control'; +import { useBlockRename } from '../block-rename/use-block-rename'; const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' ); @@ -146,177 +139,3 @@ 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 ( - <> - { - setRenamingBlock( true ); - } } - aria-expanded={ renamingBlock } - aria-haspopup="dialog" - > - { __( 'Rename' ) } - - { renamingBlock && ( - 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 ); - } } - /> - ) } - - ); -} - -function RenameModal( { blockName, originalBlockName, onClose, onSave } ) { - const [ editedBlockName, setEditedBlockName ] = useState( blockName ); - - const nameHasChanged = editedBlockName !== blockName; - const nameIsOriginal = editedBlockName === originalBlockName; - const nameIsEmpty = emptyString( editedBlockName ); - - const isNameValid = nameHasChanged || nameIsOriginal; - - const autoSelectInputText = ( event ) => event.target.select(); - - const dialogDescription = useInstanceId( - RenameModal, - `block-editor-rename-modal__description` - ); - - const handleSubmit = () => { - const message = - nameIsOriginal || nameIsEmpty - ? sprintf( - /* translators: %s: new name/label for the block */ - __( 'Block name reset to: "%s".' ), - editedBlockName - ) - : sprintf( - /* translators: %s: new name/label for the block */ - __( 'Block name changed to: "%s".' ), - editedBlockName - ); - - // Must be assertive to immediately announce change. - speak( message, 'assertive' ); - onSave( editedBlockName ); - - // Immediate close avoids ability to hit save multiple times. - onClose(); - }; - - return ( - -

- { __( 'Enter a custom name for this block.' ) } -

-
{ - e.preventDefault(); - - if ( ! isNameValid ) { - return; - } - - handleSubmit(); - } } - > - - - - - - - - -
- - ); -} From bde882c50a40f0623224f413d0f719b02b00b1f6 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Oct 2023 12:27:53 +0200 Subject: [PATCH 05/13] Name all the things --- packages/block-editor/src/components/block-rename/index.js | 3 +++ packages/block-editor/src/components/block-rename/modal.js | 4 ++-- .../{block-rename-control.js => rename-control.js} | 6 +++--- .../src/components/block-rename/use-block-rename.js | 2 +- .../src/components/block-settings-menu-controls/index.js | 3 +-- 5 files changed, 10 insertions(+), 8 deletions(-) create mode 100644 packages/block-editor/src/components/block-rename/index.js rename packages/block-editor/src/components/block-rename/{block-rename-control.js => rename-control.js} (93%) diff --git a/packages/block-editor/src/components/block-rename/index.js b/packages/block-editor/src/components/block-rename/index.js new file mode 100644 index 0000000000000..0379893d412ec --- /dev/null +++ b/packages/block-editor/src/components/block-rename/index.js @@ -0,0 +1,3 @@ +export { default as BlockRenameControl } from './rename-control'; +export { default as BlockRenameModal } from './modal'; +export { default as useBlockRename } from './use-block-rename'; diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js index 5856536457d4a..494a28d1d9b9e 100644 --- a/packages/block-editor/src/components/block-rename/modal.js +++ b/packages/block-editor/src/components/block-rename/modal.js @@ -17,7 +17,7 @@ import { speak } from '@wordpress/a11y'; */ import { emptyString } from './empty-string'; -export function RenameModal( { +export default function BlockRenameModal( { blockName, originalBlockName, onClose, @@ -34,7 +34,7 @@ export function RenameModal( { const autoSelectInputText = ( event ) => event.target.select(); const dialogDescription = useInstanceId( - RenameModal, + BlockRenameModal, `block-editor-rename-modal__description` ); diff --git a/packages/block-editor/src/components/block-rename/block-rename-control.js b/packages/block-editor/src/components/block-rename/rename-control.js similarity index 93% rename from packages/block-editor/src/components/block-rename/block-rename-control.js rename to packages/block-editor/src/components/block-rename/rename-control.js index 297d078dfa116..edd6ff570d434 100644 --- a/packages/block-editor/src/components/block-rename/block-rename-control.js +++ b/packages/block-editor/src/components/block-rename/rename-control.js @@ -11,9 +11,9 @@ import { useState } from '@wordpress/element'; import { store as blockEditorStore } from '../../store'; import { useBlockDisplayInformation } from '..'; import { emptyString } from './empty-string'; -import { RenameModal } from './modal'; +import BlockRenameModal from './modal'; -export function BlockRenameControl( { clientId } ) { +export default function BlockRenameControl( { clientId } ) { const [ renamingBlock, setRenamingBlock ] = useState( false ); const { metadata } = useSelect( @@ -55,7 +55,7 @@ export function BlockRenameControl( { clientId } ) { { __( 'Rename' ) } { renamingBlock && ( - setRenamingBlock( false ) } diff --git a/packages/block-editor/src/components/block-rename/use-block-rename.js b/packages/block-editor/src/components/block-rename/use-block-rename.js index 5035d9c87f0aa..1d75b6e56addb 100644 --- a/packages/block-editor/src/components/block-rename/use-block-rename.js +++ b/packages/block-editor/src/components/block-rename/use-block-rename.js @@ -3,7 +3,7 @@ */ import { getBlockSupport } from '@wordpress/blocks'; -export function useBlockRename( name ) { +export default function useBlockRename( name ) { const metaDataSupport = getBlockSupport( name, '__experimentalMetadata', 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 index 4943b810904fa..2d40eb5a6ae4c 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -22,8 +22,7 @@ import { BlockLockMenuItem, useBlockLock } from '../block-lock'; import { store as blockEditorStore } from '../../store'; import BlockModeToggle from '../block-settings-menu/block-mode-toggle'; -import { BlockRenameControl } from '../block-rename/block-rename-control'; -import { useBlockRename } from '../block-rename/use-block-rename'; +import { BlockRenameControl, useBlockRename } from '../block-rename'; const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' ); From 87677b641c1953ca32948e0165d7df5f12a596eb Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Oct 2023 12:32:46 +0200 Subject: [PATCH 06/13] Remove reference to redundant hook --- packages/block-editor/src/hooks/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 8ae5c1dbe3a7e..1fd3f8f322df2 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -22,7 +22,6 @@ import './metadata'; import './metadata-name'; import './custom-fields'; import './block-hooks'; -import './block-rename-ui'; export { useCustomSides } from './dimensions'; export { useLayoutClasses, useLayoutStyles } from './layout'; From c7d3de0963f5c3748267fd2656abcea8c8d60eb5 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Oct 2023 12:33:33 +0200 Subject: [PATCH 07/13] Port CSS styling --- packages/block-editor/src/components/block-rename/style.scss | 3 +++ packages/block-editor/src/style.scss | 1 + 2 files changed, 4 insertions(+) create mode 100644 packages/block-editor/src/components/block-rename/style.scss diff --git a/packages/block-editor/src/components/block-rename/style.scss b/packages/block-editor/src/components/block-rename/style.scss new file mode 100644 index 0000000000000..2b08e82662bc6 --- /dev/null +++ b/packages/block-editor/src/components/block-rename/style.scss @@ -0,0 +1,3 @@ +.block-editor-block-rename-modal { + z-index: z-index(".block-editor-block-rename-modal"); +} diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 93ab3b69a7aad..4ee205730263e 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -15,6 +15,7 @@ @import "./components/block-patterns-paging/style.scss"; @import "./components/block-popover/style.scss"; @import "./components/block-preview/style.scss"; +@import "./components/block-rename/style.scss"; @import "./components/block-settings-menu/style.scss"; @import "./components/block-styles/style.scss"; @import "./components/block-switcher/style.scss"; From 9b0c20b642f425f11072bb235443642efb14f065 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Oct 2023 18:11:39 +0200 Subject: [PATCH 08/13] Remove redundant file --- packages/block-editor/src/hooks/block-rename-ui.scss | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 packages/block-editor/src/hooks/block-rename-ui.scss diff --git a/packages/block-editor/src/hooks/block-rename-ui.scss b/packages/block-editor/src/hooks/block-rename-ui.scss deleted file mode 100644 index 2b08e82662bc6..0000000000000 --- a/packages/block-editor/src/hooks/block-rename-ui.scss +++ /dev/null @@ -1,3 +0,0 @@ -.block-editor-block-rename-modal { - z-index: z-index(".block-editor-block-rename-modal"); -} From ddd878bd82540dd415403b73fb321efeda55a34a Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Oct 2023 18:11:51 +0200 Subject: [PATCH 09/13] Reinstate Inspector Controls renaming --- .../block-editor/src/hooks/block-rename.js | 52 +++++++++++++++++++ packages/block-editor/src/hooks/index.js | 1 + 2 files changed, 53 insertions(+) create mode 100644 packages/block-editor/src/hooks/block-rename.js diff --git a/packages/block-editor/src/hooks/block-rename.js b/packages/block-editor/src/hooks/block-rename.js new file mode 100644 index 0000000000000..d8f414a3e9ae8 --- /dev/null +++ b/packages/block-editor/src/hooks/block-rename.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +import { createHigherOrderComponent } from '@wordpress/compose'; +import { addFilter } from '@wordpress/hooks'; +import { __ } from '@wordpress/i18n'; +import { hasBlockSupport } from '@wordpress/blocks'; +import { TextControl } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { InspectorControls } from '../components'; + +export const withBlockRenameControl = createHigherOrderComponent( + ( BlockEdit ) => ( props ) => { + const { name, attributes, setAttributes, isSelected } = props; + + const supportsBlockNaming = hasBlockSupport( name, 'renaming', true ); + + return ( + <> + { isSelected && supportsBlockNaming && ( + + { + setAttributes( { + metadata: { + ...attributes?.metadata, + name: newName, + }, + } ); + } } + /> + + ) } + + + + ); + }, + 'withToolbarControls' +); + +addFilter( + 'editor.BlockEdit', + 'core/block-rename-ui/with-block-rename-control', + withBlockRenameControl +); diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 1fd3f8f322df2..460014701c8ad 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -22,6 +22,7 @@ import './metadata'; import './metadata-name'; import './custom-fields'; import './block-hooks'; +import './block-rename'; export { useCustomSides } from './dimensions'; export { useLayoutClasses, useLayoutStyles } from './layout'; From eff631d4813d937d865934b9161a88aba766967e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Oct 2023 18:13:49 +0200 Subject: [PATCH 10/13] Inline util func and rename --- .../src/components/block-rename/empty-string.js | 1 - .../block-editor/src/components/block-rename/modal.js | 8 +++----- 2 files changed, 3 insertions(+), 6 deletions(-) delete mode 100644 packages/block-editor/src/components/block-rename/empty-string.js diff --git a/packages/block-editor/src/components/block-rename/empty-string.js b/packages/block-editor/src/components/block-rename/empty-string.js deleted file mode 100644 index 14b7e8f34c803..0000000000000 --- a/packages/block-editor/src/components/block-rename/empty-string.js +++ /dev/null @@ -1 +0,0 @@ -export const emptyString = ( testString ) => testString?.trim()?.length === 0; diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js index 494a28d1d9b9e..2b888c801cb39 100644 --- a/packages/block-editor/src/components/block-rename/modal.js +++ b/packages/block-editor/src/components/block-rename/modal.js @@ -12,10 +12,8 @@ import { useInstanceId } from '@wordpress/compose'; import { __, sprintf } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; import { speak } from '@wordpress/a11y'; -/** - * Internal dependencies - */ -import { emptyString } from './empty-string'; + +const isEmptyString = ( testString ) => testString?.trim()?.length === 0; export default function BlockRenameModal( { blockName, @@ -27,7 +25,7 @@ export default function BlockRenameModal( { const nameHasChanged = editedBlockName !== blockName; const nameIsOriginal = editedBlockName === originalBlockName; - const nameIsEmpty = emptyString( editedBlockName ); + const nameIsEmpty = isEmptyString( editedBlockName ); const isNameValid = nameHasChanged || nameIsOriginal; From d30ba81b1074c5a4e066f3d7f4c51ee51036bee7 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Oct 2023 18:18:21 +0200 Subject: [PATCH 11/13] Reinstate empty string util --- .../src/components/block-rename/is-empty-string.js | 3 +++ packages/block-editor/src/components/block-rename/modal.js | 5 ++++- .../src/components/block-rename/rename-control.js | 5 +++-- 3 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 packages/block-editor/src/components/block-rename/is-empty-string.js diff --git a/packages/block-editor/src/components/block-rename/is-empty-string.js b/packages/block-editor/src/components/block-rename/is-empty-string.js new file mode 100644 index 0000000000000..42d88be77b96e --- /dev/null +++ b/packages/block-editor/src/components/block-rename/is-empty-string.js @@ -0,0 +1,3 @@ +export default function isEmptyString( testString ) { + return testString?.trim()?.length === 0; +} diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js index 2b888c801cb39..a1e9193f348fd 100644 --- a/packages/block-editor/src/components/block-rename/modal.js +++ b/packages/block-editor/src/components/block-rename/modal.js @@ -13,7 +13,10 @@ import { __, sprintf } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; import { speak } from '@wordpress/a11y'; -const isEmptyString = ( testString ) => testString?.trim()?.length === 0; +/** + * Internal dependencies + */ +import isEmptyString from './is-empty-string'; export default function BlockRenameModal( { blockName, diff --git a/packages/block-editor/src/components/block-rename/rename-control.js b/packages/block-editor/src/components/block-rename/rename-control.js index edd6ff570d434..1f646126d14a4 100644 --- a/packages/block-editor/src/components/block-rename/rename-control.js +++ b/packages/block-editor/src/components/block-rename/rename-control.js @@ -5,12 +5,13 @@ import { MenuItem } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; + /** * Internal dependencies */ import { store as blockEditorStore } from '../../store'; import { useBlockDisplayInformation } from '..'; -import { emptyString } from './empty-string'; +import isEmptyString from './is-empty-string'; import BlockRenameModal from './modal'; export default function BlockRenameControl( { clientId } ) { @@ -65,7 +66,7 @@ export default function BlockRenameControl( { clientId } ) { // the value. Therefore reset the metadata. if ( newName === blockInformation?.title || - emptyString( newName ) + isEmptyString( newName ) ) { newName = undefined; } From 1b596f6a78744c3a036118e2814e76f32fc969a4 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Oct 2023 18:19:11 +0200 Subject: [PATCH 12/13] Remove Todo comment --- .../src/components/block-settings-menu-controls/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 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 index 2d40eb5a6ae4c..d098aecebc1e1 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -48,11 +48,7 @@ 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; + const showRenameButton = selectedClientIds.length === 1 && canRename; // Check if current selection of blocks is Groupable or Ungroupable // and pass this props down to ConvertToGroupButton. From bee71b21089dc9aa866fe6fb8ec55788c6382013 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 26 Oct 2023 09:22:23 +0200 Subject: [PATCH 13/13] Remove non-existing file ref --- packages/block-editor/src/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 4ee205730263e..a55756ae6f53d 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -57,7 +57,6 @@ @import "./hooks/padding.scss"; @import "./hooks/position.scss"; @import "./hooks/typography.scss"; -@import "./hooks/block-rename-ui.scss"; @import "./components/block-toolbar/style.scss"; @import "./components/inserter/style.scss";