diff --git a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js index 5ba025b461bddb..9c1791d98fe8f4 100644 --- a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js +++ b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { switchToBlockType } from '@wordpress/blocks'; import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; import { group } from '@wordpress/icons'; @@ -22,6 +22,16 @@ function BlockGroupToolbar( { label = __( 'Group' ) } ) { } = useConvertToGroupButtonProps(); const { replaceBlocks } = useDispatch( blockEditorStore ); + const { canRemove } = useSelect( + ( select ) => { + const { canRemoveBlocks } = select( blockEditorStore ); + return { + canRemove: canRemoveBlocks( clientIds ), + }; + }, + [ clientIds ] + ); + const onConvertToGroup = () => { const newBlocks = switchToBlockType( blocksSelection, @@ -35,7 +45,8 @@ function BlockGroupToolbar( { label = __( 'Group' ) } ) { // Don't render the button if the current selection cannot be grouped. // A good example is selecting multiple button blocks within a Buttons block: // The group block is not a valid child of Buttons, so we should not show the button. - if ( ! isGroupable ) { + // Any blocks that are locked against removal also cannot be grouped. + if ( ! isGroupable || ! canRemove ) { return null; }