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 (
+