Adds the block hierarchy navigation menu to the header

docs/data/data-core-editor.md

@@ -565,6 +565,20 @@ exist.
 
 Root client ID, if exists
 
+### getBlockHierarchyRootClientId
+
+Given a block client ID, returns the root of the hierarchy from which the block is
+nested, return the block itself for root level blocks.
+
+*Parameters*
+
+ * state: Editor state.
+ * clientId: Block from which to find root client ID.
+
+*Returns*
+
+Root client ID
+
 ### getAdjacentBlockClientId
 
 Returns the client ID of the block adjacent one at the given reference

packages/block-library/src/columns/column.js

@@ -11,7 +11,7 @@ export const settings = {
 
 	parent: [ 'core/columns' ],
 
-	icon: 'columns',
+	icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16zm0-11.47L17.74 9 12 13.47 6.26 9 12 4.53z" /></svg>,
 
 	description: __( 'A single column within a columns block.' ),
 

packages/components/src/menu-group/index.js

@@ -25,7 +25,13 @@ export function MenuGroup( {
 	}
 
 	const labelId = `components-menu-group-label-${ instanceId }`;
-	const classNames = classnames( className, 'components-menu-group' );
+	const classNames = classnames(
+		className,
+		'components-menu-group',
+		{
+			'has-label': !! label,
+		}
+	);
 
 	return (
 		<div className={ classNames }>

packages/components/src/menu-group/test/__snapshots__/index.js.snap

@@ -2,7 +2,7 @@
 
 exports[`MenuGroup should match snapshot 1`] = `
 <div
-  className="components-menu-group"
+  className="components-menu-group has-label"
 >
   <div
     className="components-menu-group__label"

packages/components/src/menu-item/style.scss

@@ -3,7 +3,6 @@
 	width: 100%;
 	padding: 8px;
 	text-align: left;
-	padding-left: 2rem;
 	color: $dark-gray-500;
 
 	// Target plugin icons that can have arbitrary classes by using an aggressive selector.
@@ -18,10 +17,6 @@
 		flex: 0 0 auto;
 	}
 
-	&.has-icon {
-		padding-left: 0.5rem;
-	}
-
 	&:hover:not(:disabled):not([aria-disabled="true"]) {
 		@include menu-style__hover;
 	}
@@ -30,18 +25,6 @@
 		@include menu-style__focus;
 	}
 
-	// Colorize plugin icons to ensure contrast and cohesion, but allow plugin developers to override.
-	svg,
-	svg * {
-		fill: $dark-gray-500;
-	}
-
-	&:hover svg,
-	&:hover svg * {
-		// !important allows icons from plugins to be overriden and given a dark-gray fill
-		fill: $dark-gray-900 !important;
-	}
-
 	// Don't wrap text until viewport is beyond the mobile breakpoint.
 	@include break-mobile() {
 		.components-popover:not(.is-mobile) & {
@@ -65,3 +48,11 @@
 		display: inline;
 	}
 }
+
+.components-menu-group.has-label .components-menu-item__button {
+	padding-left: 2rem;
+
+	&.has-icon {
+		padding-left: 0.5rem;
+	}
+}

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -13,6 +13,7 @@ import {
 	EditorHistoryRedo,
 	EditorHistoryUndo,
 	NavigableToolbar,
+	BlockHierarchyDropdown,
 } from '@wordpress/editor';
 
 /**
@@ -36,6 +37,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, mode } ) {
 			<EditorHistoryUndo />
 			<EditorHistoryRedo />
 			<TableOfContents />
+			<BlockHierarchyDropdown />
 			{ hasFixedToolbar && isLargeViewport && (
 				<div className="edit-post-header-toolbar__block-toolbar">
 					<BlockToolbar />

packages/editor/src/components/block-hierarchy/dropdown.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { IconButton, Dropdown, SVG } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockHierarchy from './';
+
+const menuIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20">
+		<path d="M5 5H3v2h2V5zm3 8h11v-2H8v2zm9-8H6v2h11V5zM7 11H5v2h2v-2zm0 8h2v-2H7v2zm3-2v2h11v-2H10z" />
+	</SVG>
+);
+
+function BlockHierarchyDropdown( { rootClientId, selectedBlockClientId, countInnerBlocks } ) {
+	if ( rootClientId === selectedBlockClientId && countInnerBlocks === 0 ) {
+		return null;
+	}
+
+	return	(
+		<Dropdown
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<IconButton
+					icon={ menuIcon }
+					aria-expanded={ isOpen }
+					onClick={ onToggle }
+					label={ __( 'Block Hierarchy' ) }
+				/>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<BlockHierarchy onSelect={ onClose } />
+			) }
+		/>
+	);
+}
+
+export default withSelect( ( select ) => {
+	const {
+		getSelectedBlockClientId,
+		getBlockHierarchyRootClientId,
+		getBlockCount,
+	} = select( 'core/editor' );
+	const selectedBlockClientId = getSelectedBlockClientId();
+	const rootClientId = selectedBlockClientId && getBlockHierarchyRootClientId( selectedBlockClientId );
+	return {
+		countInnerBlocks: rootClientId ? getBlockCount( rootClientId ) : 0,
+		rootClientId,
+		selectedBlockClientId,
+	};
+} )( BlockHierarchyDropdown );

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

@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import { map, noop } from 'lodash';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { withSelect, withDispatch } from '@wordpress/data';
+import { MenuItem, MenuGroup } from '@wordpress/components';
+import { getBlockType } from '@wordpress/blocks';
+import { compose } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+
+function BlockHierarchyList( { blocks, selectedBlockClientId, selectBlock } ) {
+	return (
+		<ul className="editor-block-hierarchy__list">
+			{ map( blocks, ( block ) => {
+				const blockType = getBlockType( block.name );
+				return (
+					<li key={ block.clientId }>
+						<div role="presentation" className="editor-block-hierarchy__item">
+							<MenuItem
+								className={ classnames( 'editor-block-hierarchy__item-button', {
+									'is-selected': block.clientId === selectedBlockClientId,
+								} ) }
+								onClick={ () => selectBlock( block.clientId ) }
+								isSelected={ block.clientId === selectedBlockClientId }
+							>
+								<BlockIcon icon={ blockType.icon } showColors />
+								{ blockType.title }
+							</MenuItem>
+						</div>
+						{ !! block.innerBlocks && !! block.innerBlocks.length && (
+							<BlockHierarchyList
+								blocks={ block.innerBlocks }
+								selectedBlockClientId={ selectedBlockClientId }
+								selectBlock={ selectBlock }
+							/>
+						) }
+					</li>
+				);
+			} ) }
+		</ul>
+	);
+}
+
+function BlockHierarchy( { rootBlock, selectedBlockClientId, selectBlock } ) {
+	if ( ! rootBlock ) {
+		return null;
+	}
+	return (
+		<MenuGroup>
+			<BlockHierarchyList
+				blocks={ [ rootBlock ] }
+				selectedBlockClientId={ selectedBlockClientId }
+				selectBlock={ selectBlock }
+			/>
+		</MenuGroup>
+	);
+}
+
+export default compose(
+	withSelect( ( select ) => {
+		const {
+			getSelectedBlockClientId,
+			getBlockHierarchyRootClientId,
+			getBlock,
+		} = select( 'core/editor' );
+		const selectedBlockClientId = getSelectedBlockClientId();
+		return {
+			rootBlock: selectedBlockClientId ? getBlock( getBlockHierarchyRootClientId( selectedBlockClientId ) ) : null,
+			selectedBlockClientId,
+		};
+	} ),
+	withDispatch( ( dispatch, { onSelect = noop } ) => {
+		return {
+			selectBlock( clientId ) {
+				dispatch( 'core/editor' ).selectBlock( clientId );
+				onSelect( clientId );
+			},
+		};
+	} )
+)( BlockHierarchy );

packages/editor/src/components/block-hierarchy/style.scss

@@ -0,0 +1,66 @@
+$tree-border-width: 2px;
+$tree-item-height: 36px;
+
+.editor-block-hierarchy__list {
+	padding: 0;
+	margin: 0;
+}
+
+.editor-block-hierarchy__list .editor-block-hierarchy__list {
+	margin-top: 2px;
+	border-left: $tree-border-width solid $light-gray-900;
+	margin-left: 1em;
+
+	.editor-block-hierarchy__list {
+		margin-left: 1.5em;
+	}
+
+	.editor-block-hierarchy__item {
+		position: relative;
+
+		&::before {
+			position: absolute;
+			left: 0;
+			background: $light-gray-900;
+			width: 0.5em;
+			height: $tree-border-width;
+			content: "";
+			top: calc(50% - #{ $tree-border-width / 2 });
+		}
+	}
+
+	.editor-block-hierarchy__item-button {
+		margin-left: 0.8em;
+		width: calc(100% - 0.8em);
+	}
+
+	& > li:last-child {
+		position: relative;
+		&::after {
+			position: absolute;
+			content: "";
+			background: $white;
+			top: ($tree-item-height + $tree-border-width ) / 2;
+			bottom: 0;
+			left: -$tree-border-width;
+			width: $tree-border-width;
+		}
+	}
+}
+
+.editor-block-hierarchy__item-button {
+	padding: 6px;
+	display: flex;
+	align-items: center;
+	border-radius: 4px;
+
+	.editor-block-icon {
+		margin-right: 6px;
+	}
+
+	&.is-selected,
+	&.is-selected:focus {
+		color: $dark-gray-700;
+		background: $light-gray-300;
+	}
+}