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 7994a9a9f5f3e1..b7614b72c8018a 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,7 +48,8 @@ const BlockSettingsMenuControlsSlot = ( { // Check if current selection of blocks is Groupable or Ungroupable // and pass this props down to ConvertToGroupButton. - const convertToGroupButtonProps = useConvertToGroupButtonProps(); + const convertToGroupButtonProps = + useConvertToGroupButtonProps( selectedClientIds ); const { isGroupable, isUngroupable } = convertToGroupButtonProps; const showConvertToGroupButton = ( isGroupable || isUngroupable ) && canRemove; diff --git a/packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js b/packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js index 9f3a7d908a11ed..0056f3c4543c4c 100644 --- a/packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js +++ b/packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js @@ -25,59 +25,69 @@ import { store as blockEditorStore } from '../../store'; * It is used in `BlockSettingsMenuControls` to know if `ConvertToGroupButton` * should be rendered, to avoid ending up with an empty MenuGroup. * + * @param {?string[]} selectedClientIds An optional array of clientIds to group. The selected blocks + * from the block editor store are used if this is not provided. + * * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`. */ -export default function useConvertToGroupButtonProps() { +export default function useConvertToGroupButtonProps( selectedClientIds ) { const { clientIds, isGroupable, isUngroupable, blocksSelection, groupingBlockName, - } = useSelect( ( select ) => { - const { - getBlockRootClientId, - getBlocksByClientId, - canInsertBlockType, - getSelectedBlockClientIds, - } = select( blockEditorStore ); - const { getGroupingBlockName } = select( blocksStore ); + } = useSelect( + ( select ) => { + const { + getBlockRootClientId, + getBlocksByClientId, + canInsertBlockType, + getSelectedBlockClientIds, + } = select( blockEditorStore ); + const { getGroupingBlockName } = select( blocksStore ); + + const _clientIds = selectedClientIds?.length + ? selectedClientIds + : getSelectedBlockClientIds(); + const _groupingBlockName = getGroupingBlockName(); - const _clientIds = getSelectedBlockClientIds(); - const _groupingBlockName = getGroupingBlockName(); + const rootClientId = !! _clientIds?.length + ? getBlockRootClientId( _clientIds[ 0 ] ) + : undefined; - const rootClientId = !! _clientIds?.length - ? getBlockRootClientId( _clientIds[ 0 ] ) - : undefined; + const groupingBlockAvailable = canInsertBlockType( + _groupingBlockName, + rootClientId + ); - const groupingBlockAvailable = canInsertBlockType( - _groupingBlockName, - rootClientId - ); + const _blocksSelection = getBlocksByClientId( _clientIds ); - const _blocksSelection = getBlocksByClientId( _clientIds ); + const isSingleGroupingBlock = + _blocksSelection.length === 1 && + _blocksSelection[ 0 ]?.name === _groupingBlockName; - const isSingleGroupingBlock = - _blocksSelection.length === 1 && - _blocksSelection[ 0 ]?.name === _groupingBlockName; + // Do we have + // 1. Grouping block available to be inserted? + // 2. One or more blocks selected + const _isGroupable = + groupingBlockAvailable && _blocksSelection.length; - // Do we have - // 1. Grouping block available to be inserted? - // 2. One or more blocks selected - const _isGroupable = groupingBlockAvailable && _blocksSelection.length; + // Do we have a single Group Block selected and does that group have inner blocks? + const _isUngroupable = + isSingleGroupingBlock && + !! _blocksSelection[ 0 ].innerBlocks.length; + return { + clientIds: _clientIds, + isGroupable: _isGroupable, + isUngroupable: _isUngroupable, + blocksSelection: _blocksSelection, + groupingBlockName: _groupingBlockName, + }; + }, + [ selectedClientIds ] + ); - // Do we have a single Group Block selected and does that group have inner blocks? - const _isUngroupable = - isSingleGroupingBlock && - !! _blocksSelection[ 0 ].innerBlocks.length; - return { - clientIds: _clientIds, - isGroupable: _isGroupable, - isUngroupable: _isUngroupable, - blocksSelection: _blocksSelection, - groupingBlockName: _groupingBlockName, - }; - }, [] ); return { clientIds, isGroupable,