Add a block selection breadcrumb to the bottom of the editor

assets/stylesheets/_z-index.scss

@@ -24,6 +24,7 @@ $z-layers: (
 	".block-editor-warning": 5,
 	".block-library-gallery-item__inline-menu": 20,
 	".block-editor-url-input__suggestions": 30,
+	".edit-post-layout__footer": 30,
 	".edit-post-header": 30,
 	".edit-widgets-header": 30,
 	".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter

packages/block-editor/README.md

@@ -82,6 +82,20 @@ _Related_
 
 Undocumented declaration.
 
+<a name="BlockBreadcrumb" href="#BlockBreadcrumb">#</a> **BlockBreadcrumb**
+
+Block breadcrumb component, displaying the label of the block. If the block
+descends from a root block, a button is displayed enabling the user to select
+the root block.
+
+_Parameters_
+
+-   _props.clientId_ `string`: Client ID of block.
+
+_Returns_
+
+-   `WPElement`: Block Breadcrumb.
+
 <a name="BlockControls" href="#BlockControls">#</a> **BlockControls**
 
 Undocumented declaration.

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

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockTitle from '../block-title';
+
+/**
+ * Block breadcrumb component, displaying the label of the block. If the block
+ * descends from a root block, a button is displayed enabling the user to select
+ * the root block.
+ *
+ * @param {string}   props.clientId        Client ID of block.
+ * @return {WPElement} Block Breadcrumb.
+ */
+const BlockBreadcrumb = function() {
+	const { selectBlock } = useDispatch( 'core/block-editor' );
+	const { clientId, parents } = useSelect( ( select ) => {
+		const selectedBlockClientId = select( 'core/block-editor' ).getSelectedBlockClientId();
+		return {
+			parents: select( 'core/block-editor' ).getBlockParents( selectedBlockClientId ),
+			clientId: selectedBlockClientId,
+		};
+	}, [] );
+
+	return (
+		<ul className="block-editor-block-breadcrumb">
+			{ parents.map( ( parent ) => (
+				<li key={ parent }>
+					<Button
+						className="block-editor-block-breadcrumb__button"
+						isTertiary
+						onClick={ () => selectBlock( parent ) }
+					>
+						<BlockTitle clientId={ parent } />
+					</Button>
+				</li>
+			) ) }
+			{ !! clientId && (
+				<li className="block-editor-block-breadcrumb__current">
+					<BlockTitle clientId={ clientId } />
+				</li>
+			) }
+		</ul>
+	);
+};
+
+export default BlockBreadcrumb;

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

@@ -0,0 +1,24 @@
+.block-editor-block-breadcrumb {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+
+	li {
+		display: inline-block;
+		margin: 0;
+
+		&:not(.block-editor-block-breadcrumb__current)::after {
+			content: "▸";
+		}
+	}
+}
+
+.block-editor-block-breadcrumb__button.components-button {
+	color: inherit;
+	font-size: inherit;
+}
+
+.block-editor-block-breadcrumb__current {
+	padding: 0 10px;
+	font-size: inherit;
+}

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

@@ -7,6 +7,7 @@ export * from './font-sizes';
 export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as Autocomplete } from './autocomplete';
 export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
+export { default as BlockBreadcrumb } from './block-breadcrumb';
 export { default as BlockControls } from './block-controls';
 export { default as BlockEdit } from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';

packages/block-editor/src/store/selectors.js

@@ -418,6 +418,22 @@ export function getBlockRootClientId( state, clientId ) {
 		null;
 }
 
+export const getBlockParents = createSelector(
+	( state, clientId ) => {
+		const parents = [];
+		let current = clientId;
+		while ( !! state.blocks.parents[ current ] ) {
+			current = state.blocks.parents[ current ];
+			parents.push( current );
+		}
+
+		return parents.reverse();
+	},
+	( state ) => [
+		state.blocks.parents,
+	]
+);
+
 /**
  * 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.
  *

packages/block-editor/src/style.scss

@@ -3,6 +3,7 @@
 @import "./components/block-inspector/style.scss";
 @import "./components/block-list/style.scss";
 @import "./components/block-list-appender/style.scss";
+@import "./components/block-breadcrumb/style.scss";
 @import "./components/block-card/style.scss";
 @import "./components/block-compare/style.scss";
 @import "./components/block-mover/style.scss";

packages/edit-post/src/components/layout/index.js

@@ -21,6 +21,7 @@ import {
 	EditorNotices,
 	PostPublishPanel,
 } from '@wordpress/editor';
+import { BlockBreadcrumb } from '@wordpress/block-editor';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { PluginArea } from '@wordpress/plugins';
 import { withViewportMatch } from '@wordpress/viewport';
@@ -56,6 +57,7 @@ function Layout( {
 	isSaving,
 	isMobileViewport,
 	isRichEditingEnabled,
+	showFooter,
 } ) {
 	const sidebarIsOpened = editorSidebarOpened || pluginSidebarOpened || publishSidebarOpened;
 
@@ -92,7 +94,16 @@ function Layout( {
 				<ManageBlocksModal />
 				<OptionsModal />
 				{ ( mode === 'text' || ! isRichEditingEnabled ) && <TextEditor /> }
-				{ isRichEditingEnabled && mode === 'visual' && <VisualEditor /> }
+				{ isRichEditingEnabled && mode === 'visual' && (
+					<>
+						<VisualEditor />
+						{ showFooter && (
+							<div className="edit-post-layout__footer">
+								<BlockBreadcrumb />
+							</div>
+						) }
+					</>
+				) }
 				<div className="edit-post-layout__metaboxes">
 					<MetaBoxes location="normal" />
 				</div>
@@ -145,6 +156,7 @@ export default compose(
 		hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
 		isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
 		isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled,
+		showFooter: !! select( 'core/block-editor' ).getSelectedBlockClientId(),
 	} ) ),
 	withDispatch( ( dispatch ) => {
 		const { closePublishSidebar, togglePublishSidebar } = dispatch( 'core/edit-post' );

packages/edit-post/src/components/layout/style.scss

@@ -234,3 +234,28 @@
 		}
 	}
 }
+
+.edit-post-layout__footer {
+	display: none;
+	z-index: z-index(".edit-post-layout__footer");
+
+	// Stretch to mimic outline padding on desktop.
+	@include break-medium() {
+		display: inline-flex;
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		background: $white;
+		height: 30px;
+		padding: 0 10px;
+		align-items: center;
+		border-top: $border-width solid $light-gray-500;
+		font-size: 12px;
+
+		.edit-post-layout.is-sidebar-opened & {
+			right: $sidebar-width;
+		}
+	}
+}
+@include editor-left(".edit-post-layout__footer");
+