Add block inspector to the widget screen (#16203)

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

@@ -20,8 +20,14 @@ import InspectorControls from '../inspector-controls';
 import InspectorAdvancedControls from '../inspector-advanced-controls';
 import BlockStyles from '../block-styles';
 import MultiSelectionInspector from '../multi-selection-inspector';
-
-const BlockInspector = ( { selectedBlockClientId, selectedBlockName, blockType, count, hasBlockStyles } ) => {
+const BlockInspector = ( {
+	blockType,
+	count,
+	hasBlockStyles,
+	selectedBlockClientId,
+	selectedBlockName,
+	showNoBlockSelectedMessage = true,
+} ) => {
 	if ( count > 1 ) {
 		return <MultiSelectionInspector />;
 	}
@@ -33,7 +39,14 @@ const BlockInspector = ( { selectedBlockClientId, selectedBlockName, blockType,
 	 * because we want the user to focus on the unregistered block warning, not block settings.
 	 */
 	if ( ! blockType || ! selectedBlockClientId || isSelectedBlockUnregistered ) {
-		return <span className="editor-block-inspector__no-blocks block-editor-block-inspector__no-blocks">{ __( 'No block selected.' ) }</span>;
+		if ( showNoBlockSelectedMessage ) {
+			return (
+				<span className="editor-block-inspector__no-blocks block-editor-block-inspector__no-blocks">
+					{ __( 'No block selected.' ) }
+				</span>
+			);
+		}
+		return null;
 	}
 
 	return (

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

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { navigateRegions, Popover, SlotFillProvider } from '@wordpress/components';
+import {
+	navigateRegions,
+	Popover,
+	SlotFillProvider,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies

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

@@ -1,9 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Panel } from '@wordpress/components';
+import { createSlotFill, Panel } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+export const { Fill: BlockSidebarFill, Slot: BlockSidebarSlot } = createSlotFill( 'EditWidgetsBlockSidebar' );
+
 function Sidebar() {
 	return (
 		<div
@@ -12,9 +14,13 @@ function Sidebar() {
 			aria-label={ __( 'Widgets advanced settings' ) }
 			tabIndex="-1"
 		>
-			<Panel header={ __( 'Block Areas' ) } />
+			<Panel header={ __( 'Block Areas' ) }>
+				<BlockSidebarSlot bubblesVirtually />
+			</Panel>
 		</div>
 	);
 }
 
+Sidebar.Inspector = BlockSidebarFill;
+
 export default Sidebar;

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

@@ -39,4 +39,8 @@
 			background: $light-gray-200;
 		}
 	}
+
+	.block-editor-block-inspector__card {
+		margin: 0;
+	}
 }

packages/edit-widgets/src/components/widget-area/index.js

@@ -11,13 +11,20 @@ import { uploadMedia } from '@wordpress/media-utils';
 import { compose } from '@wordpress/compose';
 import { Panel, PanelBody } from '@wordpress/components';
 import {
+	BlockInspector,
 	BlockEditorProvider,
 	BlockList,
-	ObserveTyping,
 	WritingFlow,
+	ObserveTyping,
 } from '@wordpress/block-editor';
 import { withDispatch, withSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import Sidebar from '../sidebar';
+import SelectionObserver from './selection-observer';
+
 function getBlockEditorSettings( blockEditorSettings, hasUploadPermissions ) {
 	if ( ! hasUploadPermissions ) {
 		return blockEditorSettings;
@@ -38,10 +45,12 @@ function getBlockEditorSettings( blockEditorSettings, hasUploadPermissions ) {
 function WidgetArea( {
 	blockEditorSettings,
 	blocks,
+	hasUploadPermissions,
 	initialOpen,
+	isSelectedArea,
+	onBlockSelected,
 	updateBlocks,
 	widgetAreaName,
-	hasUploadPermissions,
 } ) {
 	const settings = useMemo(
 		() => getBlockEditorSettings( blockEditorSettings, hasUploadPermissions ),
@@ -59,6 +68,13 @@ function WidgetArea( {
 					onChange={ updateBlocks }
 					settings={ settings }
 				>
+					<SelectionObserver
+						isSelectedArea={ isSelectedArea }
+						onBlockSelected={ onBlockSelected }
+					/>
+					<Sidebar.Inspector>
+						<BlockInspector showNoBlockSelectedMessage={ false } />
+					</Sidebar.Inspector>
 					<WritingFlow>
 						<ObserveTyping>
 							<BlockList />
@@ -88,7 +104,9 @@ export default compose( [
 	withDispatch( ( dispatch, { id } ) => {
 		return {
 			updateBlocks( blocks ) {
-				const { updateBlocksInWidgetArea } = dispatch( 'core/edit-widgets' );
+				const {
+					updateBlocksInWidgetArea,
+				} = dispatch( 'core/edit-widgets' );
 				updateBlocksInWidgetArea( id, blocks );
 			},
 		};

packages/edit-widgets/src/components/widget-area/selection-observer.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+/**
+ * Component which calls onBlockSelected prop when a block becomes selected. It
+ * can be used to ensuring that only one block appears as selected
+ * when multiple editors exist in a page.
+ *
+ * @type {WPComponent}
+ */
+
+class SelectionObserver extends Component {
+	componentDidUpdate( prevProps ) {
+		const {
+			hasSelectedBlock,
+			onBlockSelected,
+			isSelectedArea,
+			clearSelectedBlock,
+		} = this.props;
+
+		if ( hasSelectedBlock && ! prevProps.hasSelectedBlock ) {
+			onBlockSelected();
+		}
+
+		if ( ! isSelectedArea && prevProps.isSelectedArea ) {
+			clearSelectedBlock();
+		}
+	}
+
+	render() {
+		return null;
+	}
+}
+
+export default compose( [
+	withSelect( ( select ) => {
+		const { hasSelectedBlock } = select( 'core/block-editor' );
+
+		return {
+			hasSelectedBlock: hasSelectedBlock(),
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const { clearSelectedBlock } = dispatch( 'core/block-editor' );
+
+		return {
+			clearSelectedBlock,
+		};
+	} ),
+] )( SelectionObserver );

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

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useMemo, useState } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 
@@ -10,8 +11,18 @@ import { withSelect } from '@wordpress/data';
 import WidgetArea from '../widget-area';
 
 function WidgetAreas( { areas, blockEditorSettings } ) {
+	const [ selectedArea, setSelectedArea ] = useState( 0 );
+	const onBlockSelectedInArea = useMemo(
+		() => areas.map( ( value, index ) => ( () => {
+			setSelectedArea( index );
+		} ) ),
+		[ areas, setSelectedArea ]
+	);
+
 	return areas.map( ( { id }, index ) => (
 		<WidgetArea
+			isSelectedArea={ index === selectedArea }
+			onBlockSelected={ onBlockSelectedInArea[ index ] }
 			blockEditorSettings={ blockEditorSettings }
 			key={ id }
 			id={ id }