diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js index d7823483f5e09e..6affb00479b308 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { withSelect } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; /** @@ -10,7 +10,12 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; import ReusableBlockConvertButton from './reusable-block-convert-button'; import ReusableBlocksManageButton from './reusable-blocks-manage-button'; -function ReusableBlocksMenuItems( { clientIds, rootClientId } ) { +export default function ReusableBlocksMenuItems( { rootClientId } ) { + const clientIds = useSelect( + ( select ) => select( blockEditorStore ).getSelectedBlockClientIds(), + [] + ); + return ( <> ); } - -export default withSelect( ( select ) => { - const { getSelectedBlockClientIds, getBlockRootClientId } = - select( blockEditorStore ); - const clientIds = getSelectedBlockClientIds(); - return { - clientIds, - rootClientId: - clientIds?.length > 0 - ? getBlockRootClientId( clientIds[ 0 ] ) - : undefined, - }; -} )( ReusableBlocksMenuItems ); diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js index 2dfd635e2963a3..7f7ab7e50e66eb 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js @@ -51,8 +51,17 @@ export default function ReusableBlockConvertButton( { const canConvert = useSelect( ( select ) => { const { canUser } = select( coreStore ); - const { getBlocksByClientId, canInsertBlockType } = - select( blockEditorStore ); + const { + getBlocksByClientId, + canInsertBlockType, + getBlockRootClientId, + } = select( blockEditorStore ); + + const rootId = + rootClientId || + ( clientIds.length > 0 + ? getBlockRootClientId( clientIds[ 0 ] ) + : undefined ); const blocks = getBlocksByClientId( clientIds ) ?? []; @@ -70,7 +79,7 @@ export default function ReusableBlockConvertButton( { // Hide when this is already a reusable block. ! isReusable && // Hide when reusable blocks are disabled. - canInsertBlockType( 'core/block', rootClientId ) && + canInsertBlockType( 'core/block', rootId ) && blocks.every( ( block ) => // Guard against the case where a regular block has *just* been converted.