Applied design feedback

WordPress · May 20, 2020 · 82752d0 · 82752d0
1 parent 1a50027
commit 82752d0
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 29 deletions.
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,7 @@ 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
  */
@@ -26,6 +27,7 @@ export default function BlockToolbar( { hideDragHandle } ) {
 		isValid,
 		mode,
 		moverDirection,
+		blockType,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockMode,
@@ -34,7 +36,9 @@ export default function BlockToolbar( { hideDragHandle } ) {
 			getBlockRootClientId,
 			getBlockListSettings,
 			getSettings,
+			getBlockName,
 		} = select( 'core/block-editor' );
+		const { getBlockType } = select( 'core/blocks' );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
 		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
@@ -56,6 +60,9 @@ export default function BlockToolbar( { hideDragHandle } ) {
 					? getBlockMode( selectedBlockClientIds[ 0 ] )
 					: null,
 			moverDirection: __experimentalMoverDirection,
+			blockType:
+				selectedBlockClientId &&
+				getBlockType( getBlockName( selectedBlockClientId ) ),
 		};
 	}, [] );
 
@@ -74,6 +81,12 @@ export default function BlockToolbar( { hideDragHandle } ) {
 
 	const shouldShowMovers = displayHeaderToolbar || showMovers;
 
+	if ( blockType ) {
+		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
+			return null;
+		}
+	}
+
 	if ( blockClientIds.length === 0 ) {
 		return null;
 	}

diff --git a/packages/block-library/src/widget-area/index.js b/packages/block-library/src/widget-area/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { layout as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -19,7 +20,9 @@ export const settings = {
 		html: false,
 		inserter: false,
 		customClassName: false,
+		__experimentalToolbar: false,
 	},
 	__experimentalLabel: ( { name: label } ) => label,
 	edit,
+	icon,
 };
diff --git a/packages/edit-widgets/src/components/sidebar/block-areas.js b/packages/edit-widgets/src/components/sidebar/block-areas.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { widget } from '@wordpress/icons';
+import { layout } from '@wordpress/icons';
 import { BlockIcon } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -40,11 +40,11 @@ export default function BlockAreas() {
 		<>
 			<div className="edit-widgets-block-areas">
 				<div className="edit-widgets-block-areas__top-container">
-					<BlockIcon icon={ widget } />
+					<BlockIcon icon={ layout } />
 					<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>

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