Add block areas tabbed sidebar to the widgets screen

packages/block-editor/src/components/block-list/block-contextual-toolbar.js

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { hasBlockSupport } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -10,6 +12,24 @@ import NavigableToolbar from '../navigable-toolbar';
 import { BlockToolbar } from '../';
 
 function BlockContextualToolbar( { focusOnMount, ...props } ) {
+	const { blockType } = useSelect( ( select ) => {
+		const { getBlockName, getSelectedBlockClientIds } = select(
+			'core/block-editor'
+		);
+		const { getBlockType } = select( 'core/blocks' );
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
+		return {
+			blockType:
+				selectedBlockClientId &&
+				getBlockType( getBlockName( selectedBlockClientId ) ),
+		};
+	} );
+	if ( blockType ) {
+		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
+			return null;
+		}
+	}
 	return (
 		<div className="block-editor-block-contextual-toolbar-wrapper">
 			<NavigableToolbar

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

@@ -8,6 +8,8 @@ import classnames from 'classnames';
 import { useSelect } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
+import { hasBlockSupport } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
@@ -23,12 +25,15 @@ export default function BlockToolbar( { hideDragHandle } ) {
 	const {
 		blockClientIds,
 		blockClientId,
+		blockType,
 		hasFixedToolbar,
 		isValid,
 		mode,
 		moverDirection,
 	} = useSelect( ( select ) => {
+		const { getBlockType } = select( 'core/blocks' );
 		const {
+			getBlockName,
 			getBlockMode,
 			getSelectedBlockClientIds,
 			isBlockValid,
@@ -46,6 +51,9 @@ export default function BlockToolbar( { hideDragHandle } ) {
 		return {
 			blockClientIds: selectedBlockClientIds,
 			blockClientId: selectedBlockClientId,
+			blockType:
+				selectedBlockClientId &&
+				getBlockType( getBlockName( selectedBlockClientId ) ),
 			hasFixedToolbar: getSettings().hasFixedToolbar,
 			rootClientId: blockRootClientId,
 			isValid:
@@ -73,6 +81,12 @@ export default function BlockToolbar( { hideDragHandle } ) {
 	const displayHeaderToolbar =
 		useViewportMatch( 'medium', '<' ) || hasFixedToolbar;
 
+	if ( blockType ) {
+		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
+			return null;
+		}
+	}
+
 	const shouldShowMovers = displayHeaderToolbar || showMovers;
 
 	if ( blockClientIds.length === 0 ) {

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

@@ -12,6 +12,7 @@
 	"supports": {
 		"html": false,
 		"inserter": false,
-		"customClassName": false
+		"customClassName": false,
+		"__experimentalToolbar": false
 	}
 }

packages/edit-widgets/package.json

@@ -43,6 +43,7 @@
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
+		"classnames": "^2.2.5",
 		"lodash": "^4.17.15",
 		"rememo": "^3.0.0"
 	},

packages/edit-widgets/src/components/sidebar/block-areas.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { blockDefault } from '@wordpress/icons';
+import { BlockIcon } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function BlockArea( { clientId } ) {
+	const { name, selectedBlock } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getBlockSelectionStart } = select(
+				'core/block-editor'
+			);
+			return {
+				name: getBlockAttributes( clientId ).name,
+				selectedBlock: getBlockSelectionStart(),
+			};
+		},
+		[ clientId ]
+	);
+	const { selectBlock } = useDispatch( 'core/block-editor' );
+	const isSelected = selectedBlock === clientId;
+	return (
+		<li>
+			<Button
+				aria-expanded={ isSelected }
+				onClick={
+					isSelected
+						? undefined
+						: () => {
+								selectBlock( clientId );
+						  }
+				}
+			>
+				{ name }
+				<span className="edit-widgets-block-areas__edit">
+					{ __( 'Edit' ) }
+				</span>
+			</Button>
+		</li>
+	);
+}
+
+export default function BlockAreas() {
+	const blockOrder = useSelect( ( select ) => {
+		return select( 'core/block-editor' ).getBlockOrder();
+	} );
+	const hasBlockAreas = blockOrder.length > 0;
+	return (
+		<>
+			<div className="edit-widgets-block-areas">
+				<div className="edit-widgets-block-areas__top-container">
+					<BlockIcon icon={ blockDefault } />
+					<div>
+						<p>
+							{ __(
+								'Block Areas (also known as "Widget Areas") are global parts in your site\'s layout that can accept blocks. These vary by theme, but are typically parts like your Sidebar or Footer.'
+							) }
+						</p>
+						{ ! hasBlockAreas && (
+							<p>
+								{ __(
+									'Your theme does not contain block areas.'
+								) }
+							</p>
+						) }
+					</div>
+				</div>
+				{ hasBlockAreas && (
+					<ul>
+						{ blockOrder.map( ( clientId ) => (
+							<BlockArea key={ clientId } clientId={ clientId } />
+						) ) }
+					</ul>
+				) }
+			</div>
+		</>
+	);
+}

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

@@ -1,22 +1,141 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { ComplementaryArea } from '@wordpress/interface';
 import { BlockInspector } from '@wordpress/block-editor';
 import { cog } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockAreas from './block-areas';
+
+const CORE_WIDGET_COMPLEMENTARY_AREAS = {
+	'edit-widgets/block-areas': __( 'Block areas' ),
+	'edit-widgets/block-inspector': __( 'Block' ),
+};
+
+function ComplementaryAreaHeader( { activeComplementaryArea } ) {
+	const { enableComplementaryArea } = useDispatch( 'core/interface' );
+	return (
+		<ul>
+			{ map( CORE_WIDGET_COMPLEMENTARY_AREAS, ( label, identifier ) => {
+				const isActive = identifier === activeComplementaryArea;
+				return (
+					<li key={ identifier }>
+						<Button
+							onClick={ () =>
+								enableComplementaryArea(
+									'core/edit-widgets',
+									identifier
+								)
+							}
+							className={ classnames(
+								'edit-widgets-sidebar__panel-tab',
+								{
+									'is-active': isActive,
+								}
+							) }
+							aria-label={
+								isActive
+									? // translators: %s: sidebar label e.g: "Block areas".
+									  sprintf( __( '%s (selected)' ), label )
+									: label
+							}
+							data-label={ label }
+						>
+							{ label }
+						</Button>
+					</li>
+				);
+			} ) }
+		</ul>
+	);
+}
 
 export default function Sidebar() {
+	const { enableComplementaryArea } = useDispatch( 'core/interface' );
+	const {
+		currentArea,
+		hasSelectedNonAreaBlock,
+		isGeneralSidebarOpen,
+	} = useSelect( ( select ) => {
+		let activeArea = select( 'core/interface' ).getActiveComplementaryArea(
+			'core/edit-widgets'
+		);
+		const isSidebarOpen = !! activeArea;
+		const { getBlockSelectionStart, getBlockRootClientId } = select(
+			'core/block-editor'
+		);
+		const selectionStart = getBlockSelectionStart();
+		if ( ! CORE_WIDGET_COMPLEMENTARY_AREAS[ activeArea ] ) {
+			if ( ! selectionStart ) {
+				activeArea = 'edit-widgets/block-areas';
+			} else {
+				activeArea = 'edit-widgets/block-inspector';
+			}
+		}
+		return {
+			currentArea: activeArea,
+			hasSelectedNonAreaBlock: !! (
+				selectionStart && getBlockRootClientId( selectionStart )
+			),
+			isGeneralSidebarOpen: isSidebarOpen,
+		};
+	}, [] );
+
+	// currentArea, and isGeneralSidebarOpen are intentionally left out from the dependencies,
+	// because we want to run the effect when a block is selected/unselected and not when the sidebar state changes.
+	useEffect( () => {
+		if (
+			hasSelectedNonAreaBlock &&
+			currentArea === 'edit-widgets/block-areas' &&
+			isGeneralSidebarOpen
+		) {
+			enableComplementaryArea(
+				'core/edit-widgets',
+				'edit-widgets/block-inspector'
+			);
+		}
+		if (
+			! hasSelectedNonAreaBlock &&
+			currentArea === 'edit-widgets/block-inspector' &&
+			isGeneralSidebarOpen
+		) {
+			enableComplementaryArea(
+				'core/edit-widgets',
+				'edit-widgets/block-areas'
+			);
+		}
+	}, [ hasSelectedNonAreaBlock, enableComplementaryArea ] );
+
 	return (
 		<ComplementaryArea
 			className="edit-widgets-sidebar"
-			smallScreenTitle={ __( 'Widget Areas' ) }
+			header={
+				<ComplementaryAreaHeader
+					activeComplementaryArea={ currentArea }
+				/>
+			}
+			headerClassName="edit-widgets-sidebar__panel-tabs"
 			scope="core/edit-widgets"
-			complementaryAreaIdentifier="edit-widgets/block-inspector"
-			title={ __( 'Block' ) }
+			identifier={ currentArea }
 			icon={ cog }
 		>
-			<BlockInspector showNoBlockSelectedMessage={ false } />
+			{ currentArea === 'edit-widgets/block-areas' && <BlockAreas /> }
+			{ currentArea === 'edit-widgets/block-inspector' && (
+				<BlockInspector />
+			) }
 		</ComplementaryArea>
 	);
 }