diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 6682741f9101e8..e04dbcbd932be1 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/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 ;
}
@@ -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 { __( 'No block selected.' ) };
+ if ( showNoBlockSelectedMessage ) {
+ return (
+
+ { __( 'No block selected.' ) }
+
+ );
+ }
+ return null;
}
return (
diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js
index 44b6d1d64896ea..e3a264980d5d88 100644
--- a/packages/edit-widgets/src/components/layout/index.js
+++ b/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
diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js
index 3fe0cb0e91352f..60cb68b22fb0a1 100644
--- a/packages/edit-widgets/src/components/sidebar/index.js
+++ b/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 (
);
}
+Sidebar.Inspector = BlockSidebarFill;
+
export default Sidebar;
diff --git a/packages/edit-widgets/src/components/sidebar/style.scss b/packages/edit-widgets/src/components/sidebar/style.scss
index c528439c50c9a6..53bab2c7ffac8d 100644
--- a/packages/edit-widgets/src/components/sidebar/style.scss
+++ b/packages/edit-widgets/src/components/sidebar/style.scss
@@ -39,4 +39,8 @@
background: $light-gray-200;
}
}
+
+ .block-editor-block-inspector__card {
+ margin: 0;
+ }
}
diff --git a/packages/edit-widgets/src/components/widget-area/index.js b/packages/edit-widgets/src/components/widget-area/index.js
index 4e3048e43ec6e6..bb7a5f5cc6b433 100644
--- a/packages/edit-widgets/src/components/widget-area/index.js
+++ b/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 }
>
+
+
+
+
@@ -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 );
},
};
diff --git a/packages/edit-widgets/src/components/widget-area/selection-observer.js b/packages/edit-widgets/src/components/widget-area/selection-observer.js
new file mode 100644
index 00000000000000..3b1cdf5c378e49
--- /dev/null
+++ b/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 );
diff --git a/packages/edit-widgets/src/components/widget-areas/index.js b/packages/edit-widgets/src/components/widget-areas/index.js
index 53eea964ec65ac..c6c5094651d438 100644
--- a/packages/edit-widgets/src/components/widget-areas/index.js
+++ b/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 ) => (