Applied design feedback

WordPress · May 27, 2020 · 0a298ac · 0a298ac
1 parent c0fb028
commit 0a298ac
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/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

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/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 ) {

diff --git a/packages/block-library/src/widget-area/block.json b/packages/block-library/src/widget-area/block.json
@@ -12,6 +12,7 @@
 	"supports": {
 		"html": false,
 		"inserter": false,
-		"customClassName": false
+		"customClassName": false,
+		"__experimentalToolbar": false
 	}
 }
diff --git a/packages/edit-widgets/src/components/sidebar/block-areas.js b/packages/edit-widgets/src/components/sidebar/block-areas.js
@@ -2,25 +2,37 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { widget } from '@wordpress/icons';
+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 } = useSelect(
+	const { name, selectedBlock } = useSelect(
 		( select ) => {
-			return select( 'core/block-editor' ).getBlockAttributes( clientId );
+			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
-				onClick={ () => {
-					selectBlock( clientId );
-				} }
+				aria-expanded={ isSelected }
+				onClick={
+					isSelected
+						? undefined
+						: () => {
+								selectBlock( clientId );
+						  }
+				}
 			>
 				{ name }
 				<span className="edit-widgets-block-areas__edit">
@@ -40,22 +52,20 @@ export default function BlockAreas() {
 		<>
 			<div className="edit-widgets-block-areas">
 				<div className="edit-widgets-block-areas__top-container">
-					<BlockIcon icon={ widget } />
+					<BlockIcon icon={ blockDefault } />
 					<div>
 						<p>
 							{ __(
-								'Block areas (also known as “Widget Areas”) are global locations in your site’s layout that can accept blocks. These vary by theme, but are typically places like your sidebar or footer.'
+								'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>
-						<span>
-							{ hasBlockAreas
-								? __(
-										'Your theme contains the following block areas:'
-								  )
-								: __(
-										'Your theme does not contain block areas.'
-								  ) }
-						</span>
+						{ ! hasBlockAreas && (
+							<p>
+								{ __(
+									'Your theme does not contain block areas.'
+								) }
+							</p>
+						) }
 					</div>
 				</div>
 				{ hasBlockAreas && (

diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js
@@ -65,36 +65,40 @@ function ComplementaryAreaHeader( { activeComplementaryArea } ) {
 
 export default function Sidebar() {
 	const { enableComplementaryArea } = useDispatch( 'core/interface' );
-	const { currentArea, hasBlockSelected, isGeneralSidebarOpen } = useSelect(
-		( select ) => {
-			let activeArea = select(
-				'core/interface'
-			).getActiveComplementaryArea( 'core/edit-widgets' );
-			const isSidebarOpen = !! activeArea;
-			const selectionStart = select(
-				'core/block-editor'
-			).getBlockSelectionStart();
-			if ( ! CORE_WIDGET_COMPLEMENTARY_AREAS[ activeArea ] ) {
-				if ( ! selectionStart ) {
-					activeArea = 'edit-widgets/block-areas';
-				} else {
-					activeArea = 'edit-widgets/block-inspector';
-				}
+	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,
-				hasBlockSelected: !! selectionStart,
-				isGeneralSidebarOpen: isSidebarOpen,
-			};
-		},
-		[]
-	);
+		}
+		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 (
-			hasBlockSelected &&
+			hasSelectedNonAreaBlock &&
 			currentArea === 'edit-widgets/block-areas' &&
 			isGeneralSidebarOpen
 		) {
@@ -104,7 +108,7 @@ export default function Sidebar() {
 			);
 		}
 		if (
-			! hasBlockSelected &&
+			! hasSelectedNonAreaBlock &&
 			currentArea === 'edit-widgets/block-inspector' &&
 			isGeneralSidebarOpen
 		) {
@@ -113,7 +117,7 @@ export default function Sidebar() {
 				'edit-widgets/block-areas'
 			);
 		}
-	}, [ hasBlockSelected, enableComplementaryArea ] );
+	}, [ hasSelectedNonAreaBlock, enableComplementaryArea ] );
 
 	return (
 		<ComplementaryArea