Implemented button in the block toolbar that allows to move selection…

… to the parent.
WordPress · May 2, 2018 · cb5a05c · cb5a05c
1 parent 187a643
commit cb5a05c
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 40 deletions.
diff --git 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,45 +47,22 @@ export class BlockBreadcrumb extends Component {
 	}
 
 	render( ) {
-		const { uid, rootUID, selectRootBlock, isHidden } = this.props;
+		const { uid, isHidden } = this.props;
 		const { isFocused } = this.state;
 
 		return (
 			<div className={ classnames( 'editor-block-list__breadcrumb', {
 				'is-visible': ! isHidden || isFocused,
 			} ) }>
 				<Toolbar>
-					{ rootUID && (
-						<IconButton
-							onClick={ selectRootBlock }
-							onFocus={ this.onFocus }
-							onBlur={ this.onBlur }
-							label={ __( 'Select parent block' ) }
-							icon="arrow-left-alt"
-						/>
-					) }
+					<BlockSelectParent
+						uid={ uid }
+						onFocus={ this.onFocus }
+						onBlur={ this.onBlur }
+					/>
 					<BlockTitle uid={ uid } />
 				</Toolbar>
 			</div>
 		);
 	}
 }
-
-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
@@ -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 (
+		<IconButton
+			onClick={ selectRootBlock }
+			onFocus={ onFocusHandler }
+			label={ selectParentLabel }
+			icon="arrow-left-alt"
+			{ ...omit( props, [ 'rootUID' ] ) }
+		/>
+	);
+}
+
+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
@@ -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 (
 		<div className="editor-block-toolbar">
+			<Toolbar><BlockSelectParent uid={ block.uid } /></Toolbar>
 			<BlockControls.Slot />
 			<BlockFormatControls.Slot />
 		</div>