Update: Use single block editor for widgets screen

packages/block-editor/src/components/inserter/index.js

@@ -161,11 +161,14 @@ export default compose( [
 			getBlockRootClientId,
 			hasInserterItems,
 			__experimentalGetAllowedBlocks,
+			getBlockSelectionEnd,
 		} = select( 'core/block-editor' );
 		const { getBlockVariations } = select( 'core/blocks' );
 
 		rootClientId =
-			rootClientId || getBlockRootClientId( clientId ) || undefined;
+			rootClientId ||
+			getBlockRootClientId( clientId || getBlockSelectionEnd() ) ||
+			undefined;
 
 		const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId );
 

packages/block-library/src/editor.scss

@@ -46,6 +46,7 @@
 @import "./text-columns/editor.scss";
 @import "./verse/editor.scss";
 @import "./video/editor.scss";
+@import "./widget-area/editor.scss";
 
 /**
  * Import styles from internal editor components used by the blocks.

packages/block-library/src/index.js

@@ -76,6 +76,7 @@ import * as postExcerpt from './post-excerpt';
 import * as postFeaturedImage from './post-featured-image';
 import * as postTags from './post-tags';
 
+import * as widgetArea from './widget-area';
 /**
  * Function to register an individual block.
  *
@@ -188,6 +189,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 				} = settings;
 
 				[
+					widgetArea,
 					__experimentalEnableLegacyWidgetBlock ? legacyWidget : null,
 					navigation,
 					navigationLink,

packages/block-library/src/widget-area/block.json

@@ -0,0 +1,12 @@
+{
+	"name": "core/widget-area",
+	"category": "widgets",
+	"attributes": {
+		"id": {
+			"type": "string"
+		},
+		"name": {
+			"type": "string"
+		}
+	}
+}

packages/block-library/src/widget-area/edit/index.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { EntityProvider } from '@wordpress/core-data';
+import { Panel, PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import WidgetAreaInnerBlocks from './inner-blocks';
+
+export default function WidgetAreaEdit( {
+	clientId,
+	className,
+	attributes: { id, name },
+} ) {
+	const index = useSelect(
+		( select ) => select( 'core/block-editor' ).getBlockIndex( clientId ),
+		[ clientId ]
+	);
+	return (
+		<Panel className={ className }>
+			<PanelBody title={ name } initialOpen={ index === 0 }>
+				<EntityProvider kind="root" type="widgetArea" id={ id }>
+					<WidgetAreaInnerBlocks />
+				</EntityProvider>
+			</PanelBody>
+		</Panel>
+	);
+}

packages/block-library/src/widget-area/edit/inner-blocks.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityBlockEditor } from '@wordpress/core-data';
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function WidgetAreaInnerBlocks() {
+	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+		'root',
+		'widgetArea'
+	);
+	return (
+		<InnerBlocks
+			__experimentalBlocks={ blocks }
+			onInput={ onInput }
+			onChange={ onChange }
+			templateLock={ false }
+			renderAppender={ InnerBlocks.ButtonBlockAppender }
+		/>
+	);
+}

packages/block-library/src/widget-area/editor.scss

@@ -0,0 +1,7 @@
+.wp-block[data-type="core/widget-area"] {
+	max-width: $widget-area-width;
+}
+
+.wp-block-widget-area > .components-panel__body > .block-editor-inner-blocks {
+	padding-top: $grid-unit-30;
+}

packages/block-library/src/widget-area/index.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Widget Area' ),
+	description: __( 'A widget area container.' ),
+	supports: {
+		html: false,
+		inserter: false,
+		customClassName: false,
+	},
+	__experimentalLabel: ( { name: label } ) => label,
+	edit,
+};

packages/e2e-tests/fixtures/blocks/core__widget-area.html

@@ -0,0 +1 @@
+<!-- wp:widget-area /-->

packages/e2e-tests/fixtures/blocks/core__widget-area.json

@@ -0,0 +1,10 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/widget-area",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

packages/e2e-tests/fixtures/blocks/core__widget-area.parsed.json

@@ -0,0 +1,18 @@
+[
+    {
+        "blockName": "core/widget-area",
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "",
+        "innerContent": []
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__widget-area.serialized.html

@@ -0,0 +1 @@
+<!-- wp:widget-area /-->

packages/edit-widgets/src/components/customizer-edit-widgets-initializer/index.js

@@ -1,39 +1,28 @@
 /**
  * WordPress dependencies
  */
-import {
-	SlotFillProvider,
-	Popover,
-	navigateRegions,
-} from '@wordpress/components';
+import { navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import WidgetAreas from '../widget-areas';
-
 import './sync-customizer';
+import WidgetAreasBlockEditorProvider from '../widget-areas-block-editor-provider';
+import WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content';
 
 function CustomizerEditWidgetsInitializer( { settings } ) {
-	const [ selectedArea, setSelectedArea ] = useState( null );
 	return (
-		<SlotFillProvider>
+		<WidgetAreasBlockEditorProvider blockEditorSettings={ settings }>
 			<div
 				className="edit-widgets-customizer-edit-widgets-initializer__content"
 				role="region"
 				aria-label={ __( 'Widgets screen content' ) }
 				tabIndex="-1"
 			>
-				<WidgetAreas
-					selectedArea={ selectedArea }
-					setSelectedArea={ setSelectedArea }
-					blockEditorSettings={ settings }
-				/>
+				<WidgetAreasBlockEditorContent />
 			</div>
-			<Popover.Slot />
-		</SlotFillProvider>
+		</WidgetAreasBlockEditorProvider>
 	);
 }
 

packages/edit-widgets/src/components/header/index.js

@@ -3,22 +3,29 @@
  */
 import { __ } from '@wordpress/i18n';
 import { NavigableMenu } from '@wordpress/components';
+import { BlockNavigationDropdown, Inserter } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import Inserter from '../inserter';
 import SaveButton from '../save-button';
 import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 
+const inserterToggleProps = { isPrimary: true };
+
 function Header() {
 	return (
 		<div className="edit-widgets-header">
 			<NavigableMenu>
-				<Inserter.Slot className="edit-widgets-inserter" />
+				<Inserter
+					position="bottom right"
+					showInserterHelpPanel
+					toggleProps={ inserterToggleProps }
+				/>
 				<UndoButton />
 				<RedoButton />
+				<BlockNavigationDropdown />
 			</NavigableMenu>
 			<h1 className="edit-widgets-header__title">
 				{ __( 'Block Areas' ) } { __( '(experimental)' ) }

packages/edit-widgets/src/components/header/style.scss

@@ -6,10 +6,6 @@
 	padding: 0 $grid-unit-20;
 }
 
-.edit-widgets-inserter {
-	display: inline-block;
-}
-
 .edit-widgets-header__title {
 	font-size: 16px;
 	padding: 0 20px;

packages/edit-widgets/src/components/layout/index.js

@@ -1,84 +1,42 @@
 /**
  * WordPress dependencies
  */
-import {
-	DropZoneProvider,
-	Popover,
-	SlotFillProvider,
-	FocusReturnProvider,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import {
-	BlockEditorKeyboardShortcuts,
-	Inserter as BlockEditorInserter,
-} from '@wordpress/block-editor';
+import { Popover, Panel } from '@wordpress/components';
+import { BlockInspector } from '@wordpress/block-editor';
 import { useViewportMatch } from '@wordpress/compose';
 import { InterfaceSkeleton } from '@wordpress/interface';
-
+import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 import Header from '../header';
-import Sidebar from '../sidebar';
-import WidgetAreas from '../widget-areas';
-import Notices from '../notices';
-import KeyboardShortcuts from '../keyboard-shortcuts';
-import Inserter from '../inserter';
-
-const disabledInserterToggleProps = { isPrimary: true, disabled: true };
+import WidgetAreasBlockEditorProvider from '../widget-areas-block-editor-provider';
+import WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content';
 
 function Layout( { blockEditorSettings } ) {
-	const [ selectedArea, setSelectedArea ] = useState( null );
 	const isMobile = useViewportMatch( 'medium', '<' );
 
 	return (
-		<>
-			<BlockEditorKeyboardShortcuts.Register />
-			<KeyboardShortcuts.Register />
-			<SlotFillProvider>
-				<DropZoneProvider>
-					<FocusReturnProvider>
-						<InterfaceSkeleton
-							header={ <Header /> }
-							sidebar={ ! isMobile && <Sidebar /> }
-							content={
-								<>
-									<KeyboardShortcuts />
-									<Notices />
-									<Popover.Slot name="block-toolbar" />
-									<div
-										className="edit-widgets-layout__content"
-										tabIndex="-1"
-										onFocus={ () => {
-											setSelectedArea( null );
-										} }
-									>
-										<WidgetAreas
-											selectedArea={ selectedArea }
-											setSelectedArea={ setSelectedArea }
-											blockEditorSettings={
-												blockEditorSettings
-											}
-										/>
-									</div>
-									{ selectedArea === null && (
-										<Inserter>
-											<BlockEditorInserter
-												toggleProps={
-													disabledInserterToggleProps
-												}
-											/>
-										</Inserter>
-									) }
-								</>
-							}
-						/>
-
-						<Popover.Slot />
-					</FocusReturnProvider>
-				</DropZoneProvider>
-			</SlotFillProvider>
-		</>
+		<WidgetAreasBlockEditorProvider
+			blockEditorSettings={ blockEditorSettings }
+		>
+			<InterfaceSkeleton
+				header={ <Header /> }
+				sidebar={
+					! isMobile && (
+						<div className="edit-widgets-sidebar">
+							<Panel header={ __( 'Block Areas' ) }>
+								<BlockInspector
+									showNoBlockSelectedMessage={ false }
+								/>
+							</Panel>
+						</div>
+					)
+				}
+				content={ <WidgetAreasBlockEditorContent /> }
+			/>
+			<Popover.Slot />
+		</WidgetAreasBlockEditorProvider>
 	);
 }