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 ) => (