diff --git a/package-lock.json b/package-lock.json
index 8b559a2be5d8a4..eb39684426b1df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17471,6 +17471,7 @@
"@wordpress/media-utils": "file:packages/media-utils",
"@wordpress/notices": "file:packages/notices",
"@wordpress/plugins": "file:packages/plugins",
+ "@wordpress/reusable-blocks": "file:packages/reusable-blocks",
"@wordpress/server-side-render": "file:packages/server-side-render",
"@wordpress/url": "file:packages/url",
"classnames": "^2.2.5",
@@ -46054,7 +46055,7 @@
"dependencies": {
"clone-deep": {
"version": "0.2.4",
- "resolved": "http://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
+ "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
"integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=",
"dev": true,
"requires": {
@@ -46088,7 +46089,7 @@
"dependencies": {
"kind-of": {
"version": "2.0.1",
- "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
+ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
"integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=",
"dev": true,
"requires": {
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
index 908bf29658089f..fb02c0a11bb418 100644
--- a/packages/edit-widgets/package.json
+++ b/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",
diff --git a/packages/edit-widgets/src/blocks/legacy-widget/block.json b/packages/edit-widgets/src/blocks/legacy-widget/block.json
index 68d5636dabcda8..49b8c20eacd123 100644
--- a/packages/edit-widgets/src/blocks/legacy-widget/block.json
+++ b/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"
diff --git a/packages/edit-widgets/src/blocks/widget-area/block.json b/packages/edit-widgets/src/blocks/widget-area/block.json
index fd3c912908bbe2..e5d4d713a3bd9e 100644
--- a/packages/edit-widgets/src/blocks/widget-area/block.json
+++ b/packages/edit-widgets/src/blocks/widget-area/block.json
@@ -13,6 +13,7 @@
"html": false,
"inserter": false,
"customClassName": false,
+ "reusable": false,
"__experimentalToolbar": false
}
}
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
index e55e3c4364c11a..c0bbfc33002c5d 100644
--- 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
@@ -19,6 +19,7 @@ import {
BlockEditorKeyboardShortcuts,
__unstableEditorStyles as EditorStyles,
} from '@wordpress/block-editor';
+import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
/**
* Internal dependencies
@@ -26,18 +27,26 @@ import {
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 }
+
+
diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js
index 40a4afc3524989..4543e647bc31a1 100644
--- 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
index 7f2426d53eaf7b..ed68dd7fec7717 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
@@ -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 (
<>
-
+
{ clientIds.length === 1 && (
) }
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 b4b72220a1daab..6c88b881152b58 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
@@ -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.