Block List: Show block breadcrumb prior to block

editor/components/block-list/block.js

@@ -39,6 +39,7 @@ import InvalidBlockWarning from './invalid-block-warning';
 import BlockCrashWarning from './block-crash-warning';
 import BlockCrashBoundary from './block-crash-boundary';
 import BlockHtml from './block-html';
+import BlockBreadcrumb from './breadcrumb';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import BlockMultiControls from './multi-controls';
 import BlockMobileToolbar from './block-mobile-toolbar';
@@ -521,6 +522,7 @@ export class BlockListBlock extends Component {
 						renderBlockMenu={ renderBlockMenu }
 					/>
 				) }
+				{ isHovered && <BlockBreadcrumb uid={ block.uid } /> }
 				{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
 				{ isFirstMultiSelected && <BlockMultiControls rootUID={ rootUID } /> }
 				<IgnoreNestedEvents

editor/components/block-list/breadcrumb.js

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/element';
+import { Dashicon, Tooltip, Toolbar, Button } from '@wordpress/components';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import NavigableToolbar from '../navigable-toolbar';
+import BlockTitle from '../block-title';
+
+/**
+ * Stops propagation of the given event argument. Assumes that the event has
+ * been completely handled and no other listeners should be informed.
+ *
+ * For the breadcrumb component, this is used for improved interoperability
+ * with the block's `onFocus` handler which selects the block, thus conflicting
+ * with the intention to select the root block.
+ *
+ * @param {Event} event Event for which propagation should be stopped.
+ */
+function stopPropagation( event ) {
+	event.stopPropagation();
+}
+
+/**
+ * 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.uid             UID of block.
+ * @param {string}   props.rootUID         UID of block's root.
+ * @param {Function} props.selectRootBlock Callback to select root block.
+ *
+ * @return {WPElement} Breadcrumb element.
+ */
+function BlockBreadcrumb( { uid, rootUID, selectRootBlock } ) {
+	return (
+		<NavigableToolbar className="editor-block-breadcrumb">
+			<Toolbar>
+				{ rootUID && (
+					<Tooltip text={ __( 'Select parent block' ) }>
+						<Button
+							onClick={ selectRootBlock }
+							onFocus={ stopPropagation }
+						>
+							<Dashicon icon="arrow-left" uid={ uid } />
+						</Button>
+					</Tooltip>
+				) }
+				<BlockTitle uid={ uid } />
+			</Toolbar>
+		</NavigableToolbar>
+	);
+}
+
+export default compose( [
+	withSelect( ( select, ownProps ) => {
+		const { getBlockRootUID } = select( 'core/editor' );
+		const { uid } = ownProps;
+
+		return {
+			rootUID: getBlockRootUID( uid ),
+		};
+	} ),
+	withDispatch( ( dispatch, ownProps ) => {
+		const { rootUID } = ownProps;
+		const { selectBlock } = dispatch( 'core/editor' );
+
+		return {
+			selectRootBlock: () => selectBlock( rootUID ),
+		};
+	} ),
+] )( BlockBreadcrumb );

editor/components/block-list/style.scss

@@ -526,7 +526,8 @@
  * Block Toolbar
  */
 
-.editor-block-contextual-toolbar {
+.editor-block-contextual-toolbar,
+.editor-block-breadcrumb {
 	position: sticky;
 	z-index: z-index( '.editor-block-contextual-toolbar' );
 	white-space: nowrap;
@@ -560,35 +561,53 @@
 		top: -1px;	// stack borders
 	}
 
-	.editor-block-toolbar {
-		border: 1px solid $light-gray-500;
-		width: 100%;
+	// Reset pointer-events on children.
+	& > * {
+		pointer-events: auto;
+	}
+}
 
-		// this prevents floats from messing up the position
-		position: absolute;
-		left: 0;
+.editor-block-contextual-toolbar .editor-block-toolbar,
+.editor-block-breadcrumb .components-toolbar {
+	border: 1px solid $light-gray-500;
+	width: 100%;
 
-		.editor-block-list__block[data-align="right"] & {
-			left: auto;
-			right: 0;
-		}
+	// this prevents floats from messing up the position
+	position: absolute;
+	left: 0;
 
-		// remove stacked borders in inline toolbar
-		> div:first-child {
-			margin-left: -1px;
-		}
+	.editor-block-list__block[data-align="right"] & {
+		left: auto;
+		right: 0;
+	}
 
-		> .editor-block-switcher:first-child {
-			margin-left: -2px;
-		}
+	// remove stacked borders in inline toolbar
+	> div:first-child {
+		margin-left: -1px;
+	}
 
-		@include break-small() {
-			width: auto;
-		}
+	> .editor-block-switcher:first-child {
+		margin-left: -2px;
 	}
 
-	// Reset pointer-events on children.
-	& > * {
-		pointer-events: auto;
+	@include break-small() {
+		width: auto;
+	}
+}
+
+.editor-block-breadcrumb .components-toolbar {
+	padding: 0px 12px;
+	line-height: $block-toolbar-height - 1px;
+	font-family: $default-font;
+	font-size: $default-font-size;
+	color: $dark-gray-500;
+	cursor: default;
+
+	.components-button {
+		margin-left: -12px;
+		margin-right: 12px;
+		border-right: 1px solid $light-gray-500;
+		color: $dark-gray-500;
+		padding-top: 6px;
 	}
 }

editor/components/block-title/README.md

@@ -0,0 +1,10 @@
+Block Title
+===========
+
+Renders the block's configured title as a string, or empty if the title cannot be determined.
+
+## Usage
+
+```jsx
+<BlockTitle uid="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
+```

editor/components/block-title/index.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { withSelect } from '@wordpress/data';
+import { getBlockType } from '@wordpress/blocks';
+
+/**
+ * Renders the block's configured title as a string, or empty if the title
+ * cannot be determined.
+ *
+ * @example
+ *
+ * ```jsx
+ * <BlockTitle uid="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
+ * ```
+ *
+ * @param {?string} props.name Block name.
+ *
+ * @return {?string} Block title.
+ */
+export function BlockTitle( { name } ) {
+	if ( ! name ) {
+		return null;
+	}
+
+	const blockType = getBlockType( name );
+	if ( ! blockType ) {
+		return null;
+	}
+
+	return blockType.title;
+}
+
+export default withSelect( ( select, ownProps ) => {
+	const { getBlockName } = select( 'core/editor' );
+	const { uid } = ownProps;
+
+	return {
+		name: getBlockName( uid ),
+	};
+} )( BlockTitle );

editor/components/block-title/test/index.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { BlockTitle } from '../';
+
+jest.mock( '@wordpress/blocks', () => {
+	return {
+		getBlockType( name ) {
+			switch ( name ) {
+				case 'name-not-exists':
+					return null;
+
+				case 'name-exists':
+					return { title: 'Block Title' };
+			}
+		},
+	};
+} );
+
+describe( 'BlockTitle', () => {
+	it( 'renders nothing if name is falsey', () => {
+		const wrapper = shallow( <BlockTitle /> );
+
+		expect( wrapper.type() ).toBe( null );
+	} );
+
+	it( 'renders nothing if block type does not exist', () => {
+		const wrapper = shallow( <BlockTitle name="name-not-exists" /> );
+
+		expect( wrapper.type() ).toBe( null );
+	} );
+
+	it( 'renders title if block type exists', () => {
+		const wrapper = shallow( <BlockTitle name="name-exists" /> );
+
+		expect( wrapper.text() ).toBe( 'Block Title' );
+	} );
+} );

editor/store/selectors.js

@@ -357,6 +357,20 @@ export const getBlockDependantsCacheBust = createSelector(
 	),
 );
 
+/**
+ * Returns a block's name given its UID, or null if no block exists with the
+ * UID.
+ *
+ * @param {Object} state Editor state.
+ * @param {string} uid   Block unique ID.
+ *
+ * @return {string} Block name.
+ */
+export function getBlockName( state, uid ) {
+	const block = state.editor.present.blocksByUid[ uid ];
+	return block ? block.name : null;
+}
+
 /**
  * Returns a block given its unique ID. This is a parsed copy of the block,
  * containing its `blockName`, identifier (`uid`), and current `attributes`

editor/store/test/selectors.js

@@ -37,6 +37,7 @@ const {
 	isEditedPostBeingScheduled,
 	getEditedPostPreviewLink,
 	getBlockDependantsCacheBust,
+	getBlockName,
 	getBlock,
 	getBlocks,
 	getBlockCount,
@@ -1147,6 +1148,51 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'getBlockName', () => {
+		it( 'returns null if no block by uid', () => {
+			const state = {
+				currentPost: {},
+				editor: {
+					present: {
+						blocksByUid: {},
+						blockOrder: {},
+						edits: {},
+					},
+				},
+			};
+
+			const name = getBlockName( state, 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' );
+
+			expect( name ).toBe( null );
+		} );
+
+		it( 'returns block name', () => {
+			const state = {
+				currentPost: {},
+				editor: {
+					present: {
+						blocksByUid: {
+							'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': {
+								uid: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1',
+								name: 'core/paragraph',
+								attributes: {},
+							},
+						},
+						blockOrder: {
+							'': [ 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' ],
+							'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': [],
+						},
+						edits: {},
+					},
+				},
+			};
+
+			const name = getBlockName( state, 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' );
+
+			expect( name ).toBe( 'core/paragraph' );
+		} );
+	} );
+
 	describe( 'getBlock', () => {
 		it( 'should return the block', () => {
 			const state = {