Reusable blocks support for widgets editor

packages/edit-widgets/package.json

@@ -47,6 +47,7 @@
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/plugins": "file:../plugins",
+		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/server-side-render": "file:../server-side-render",
 		"@wordpress/url": "file:../url",
 		"classnames": "^2.2.5",

packages/edit-widgets/src/blocks/legacy-widget/block.json

@@ -23,7 +23,8 @@
 	},
 	"supports": {
 		"html": false,
-		"customClassName": false
+		"customClassName": false,
+		"reusable": false
 	},
 	"parent": [
 		"core/widget-area"

packages/edit-widgets/src/blocks/widget-area/block.json

@@ -13,6 +13,7 @@
 		"html": false,
 		"inserter": false,
 		"customClassName": false,
+		"reusable": false,
 		"__experimentalToolbar": false
 	}
 }

packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js

@@ -19,25 +19,34 @@ import {
 	BlockEditorKeyboardShortcuts,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
+import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 
 /**
  * Internal dependencies
  */
 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,
+	children,
 	...props
 } ) {
-	const { hasUploadPermissions } = useSelect( ( select ) => ( {
-		hasUploadPermissions: defaultTo(
-			select( 'core' ).canUser( 'create', 'media' ),
-			true
-		),
-		widgetAreas: select( 'core/edit-widgets' ).getWidgetAreas(),
-	} ) );
+	const { hasUploadPermissions, reusableBlocks } = useSelect(
+		( select ) => ( {
+			hasUploadPermissions: defaultTo(
+				select( 'core' ).canUser( 'create', 'media' ),
+				true
+			),
+			widgetAreas: select( 'core/edit-widgets' ).getWidgetAreas(),
+			reusableBlocks: select( 'core' ).getEntityRecords(
+				'postType',
+				'wp_block'
+			),
+		} )
+	);
 
 	const settings = useMemo( () => {
 		let mediaUploadBlockEditor;
@@ -52,10 +61,13 @@ export default function WidgetAreasBlockEditorProvider( {
 		}
 		return {
 			...blockEditorSettings,
+			__experimentalReusableBlocks: reusableBlocks,
 			mediaUpload: mediaUploadBlockEditor,
 			templateLock: 'all',
 		};
-	}, [ blockEditorSettings, hasUploadPermissions ] );
+	}, [ blockEditorSettings, hasUploadPermissions, reusableBlocks ] );
+
+	const widgetAreaId = useLastSelectedWidgetArea();
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		KIND,
@@ -78,7 +90,12 @@ export default function WidgetAreasBlockEditorProvider( {
 							settings={ settings }
 							useSubRegistry={ false }
 							{ ...props }
-						/>
+						>
+							{ children }
+							<ReusableBlocksMenuItems
+								rootClientId={ widgetAreaId }
+							/>
+						</BlockEditorProvider>
 					</FocusReturnProvider>
 				</DropZoneProvider>
 			</SlotFillProvider>

packages/edit-widgets/src/index.js

@@ -11,6 +11,7 @@ import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
+import '@wordpress/reusable-blocks';
 
 /**
  * Internal dependencies

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 ] } />
 			) }

packages/reusable-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.