diff --git a/editor/components/block-list/breadcrumb.js b/editor/components/block-list/breadcrumb.js
index 528e69db07330a..af04c3acafe739 100644
--- a/editor/components/block-list/breadcrumb.js
+++ b/editor/components/block-list/breadcrumb.js
@@ -6,15 +6,14 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { compose, Component } from '@wordpress/element';
-import { IconButton, Toolbar } from '@wordpress/components';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { Toolbar } from '@wordpress/components';
/**
* Internal dependencies
*/
import BlockTitle from '../block-title';
+import BlockSelectParent from '../block-select-parent';
/**
* Block breadcrumb component, displaying the label of the block. If the block
@@ -25,7 +24,7 @@ import BlockTitle from '../block-title';
* @param {string} props.rootUID UID of block's root.
* @param {Function} props.selectRootBlock Callback to select root block.
*/
-export class BlockBreadcrumb extends Component {
+export default class BlockBreadcrumb extends Component {
constructor() {
super( ...arguments );
this.state = {
@@ -35,15 +34,10 @@ export class BlockBreadcrumb extends Component {
this.onBlur = this.onBlur.bind( this );
}
- onFocus( event ) {
+ onFocus( ) {
this.setState( {
isFocused: true,
} );
-
- // 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.
- event.stopPropagation();
}
onBlur() {
@@ -53,7 +47,7 @@ export class BlockBreadcrumb extends Component {
}
render( ) {
- const { uid, rootUID, selectRootBlock, isHidden } = this.props;
+ const { uid, isHidden } = this.props;
const { isFocused } = this.state;
return (
@@ -61,37 +55,14 @@ export class BlockBreadcrumb extends Component {
'is-visible': ! isHidden || isFocused,
} ) }>
- { rootUID && (
-
- ) }
+
);
}
}
-
-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 );
diff --git a/editor/components/block-select-parent/index.js b/editor/components/block-select-parent/index.js
new file mode 100644
index 00000000000000..6e79bee2d45204
--- /dev/null
+++ b/editor/components/block-select-parent/index.js
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/element';
+import { ifCondition, IconButton } from '@wordpress/components';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { getBlockFocusableWrapper } from '../../utils/dom';
+import { __ } from '@wordpress/i18n';
+
+export function BlockSelectParent( { selectRootBlock, onFocus, ...props } ) {
+ const selectParentLabel = __( 'Select parent block' );
+ const onFocusHandler = ( event ) => {
+ if ( onFocus ) {
+ onFocus( event );
+ }
+ // 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.
+ event.stopPropagation();
+ };
+
+ return (
+
+ );
+}
+
+export default compose( [
+ withSelect( ( select, ownProps ) => {
+ const { getBlockRootUID } = select( 'core/editor' );
+ const { uid } = ownProps;
+
+ return {
+ rootUID: getBlockRootUID( uid ),
+ };
+ } ),
+ ifCondition( ( { rootUID } ) => rootUID ),
+ withDispatch( ( dispatch, ownProps ) => {
+ const { rootUID } = ownProps;
+ const { selectBlock } = dispatch( 'core/editor' );
+
+ return {
+ selectRootBlock: () => {
+ selectBlock( rootUID );
+ const selectedBlockElement = getBlockFocusableWrapper( rootUID );
+ selectedBlockElement.focus();
+ },
+ };
+ } ),
+] )( BlockSelectParent );
diff --git a/editor/components/block-toolbar/index.js b/editor/components/block-toolbar/index.js
index 72adadb2f67bd2..a4f77d47429b91 100644
--- a/editor/components/block-toolbar/index.js
+++ b/editor/components/block-toolbar/index.js
@@ -3,11 +3,13 @@
*/
import { BlockControls, BlockFormatControls } from '@wordpress/blocks';
import { withSelect } from '@wordpress/data';
+import { Toolbar } from '@wordpress/components';
/**
* Internal Dependencies
*/
import './style.scss';
+import BlockSelectParent from '../block-select-parent';
function BlockToolbar( { block, mode } ) {
if ( ! block || ! block.isValid || mode !== 'visual' ) {
@@ -16,6 +18,7 @@ function BlockToolbar( { block, mode } ) {
return (
+