Fix creating reusable blocks

WordPress · Oct 15, 2020 · 1c4a7b6 · 1c4a7b6
1 parent 27c8023
commit 1c4a7b6
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
@@ -27,6 +27,7 @@ import { ReusableBlocksButtons } from '@wordpress/reusable-blocks';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import { buildWidgetAreasPostId, KIND, POST_TYPE } from '../../store/utils';
+import useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';
 
 export default function WidgetAreasBlockEditorProvider( {
 	blockEditorSettings,
@@ -66,6 +67,8 @@ export default function WidgetAreasBlockEditorProvider( {
 		};
 	}, [ blockEditorSettings, hasUploadPermissions, reusableBlocks ] );
 
+	const widgetAreaId = useLastSelectedWidgetArea();
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		KIND,
 		POST_TYPE,
@@ -89,7 +92,9 @@ export default function WidgetAreasBlockEditorProvider( {
 							{ ...props }
 						>
 							{ children }
-							<ReusableBlocksButtons />
+							<ReusableBlocksButtons
+								rootClientId={ widgetAreaId }
+							/>
 						</BlockEditorProvider>
 					</FocusReturnProvider>
 				</DropZoneProvider>

diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js
@@ -11,6 +11,7 @@ import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
+import '@wordpress/reusable-blocks';
 
 /**
  * Internal dependencies

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
@@ -9,10 +9,13 @@ import { withSelect } from '@wordpress/data';
 import ReusableBlockConvertButton from './reusable-block-convert-button';
 import ReusableBlockDeleteButton from './reusable-block-delete-button';
 
-function ReusableBlocksMenuItems( { clientIds } ) {
+function ReusableBlocksMenuItems( { clientIds, rootClientId } ) {
 	return (
 		<>
-			<ReusableBlockConvertButton clientIds={ clientIds } />
+			<ReusableBlockConvertButton
+				clientIds={ clientIds }
+				rootClientId={ rootClientId }
+			/>
 			{ clientIds.length === 1 && (
 				<ReusableBlockDeleteButton clientId={ clientIds[ 0 ] } />
 			) }

diff --git a/...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -17,12 +17,15 @@ import { STORE_KEY } from '../../store/constants';
 /**
  * Menu control to convert block(s) to reusable block.
  *
- * @param {Object}   props           Component props.
- * @param {string[]} props.clientIds Client ids of selected blocks.
- *
+ * @param {Object}   props              Component props.
+ * @param {string[]} props.clientIds    Client ids of selected blocks.
+ * @param {string}   props.rootClientId ID of the currently selected top-level block.
  * @return {import('@wordpress/element').WPComponent} The menu control or null.
  */
-export default function ReusableBlockConvertButton( { clientIds } ) {
+export default function ReusableBlockConvertButton( {
+	clientIds,
+	rootClientId,
+} ) {
 	const canConvert = useSelect(
 		( select ) => {
 			const { canUser } = select( 'core' );
@@ -46,7 +49,7 @@ export default function ReusableBlockConvertButton( { clientIds } ) {
 				// Hide when this is already a reusable block.
 				! isReusable &&
 				// Hide when reusable blocks are disabled.
-				canInsertBlockType( 'core/block' ) &&
+				canInsertBlockType( 'core/block', rootClientId ) &&
 				blocks.every(
 					( block ) =>
 						// Guard against the case where a regular block has *just* been converted.