Add new Parent block selector to child blocks (mahjong) (#21056)

* First pass.

* Adding the BlockIcon

* Adjust the position to match the overall grid.

* Removing the delay on the Parent button transition.

* Update the tooltip to display the parent block's title.

Cleaning a bunch of stuff from pre-commit hooks I had been ignoring.

* Adjust code indentation.

* Don't show the Parent button if multiple blocks are selected.

* Some auto spacing nonsense.

* Moving the parent button to change its tab order.

* Clean up the spacing in the code to make the code-gods happy.

* Cleaning up some CSS.

* Using a className for shouldShowMovers instead of the inline styles.

* Hide the Parent button in Top Toolbar mode.

* Moving the z-index for the block toolbar so it renders above the top bar. Adjusting the position so it appears centered in the top bar.

* Use the CSS variables for the spacing.

* Update the tooltip to use the word "parent" at a hope of making it more helpful.

* Renaming the component to be more descriptive by adding "Selector".

This component isn't the block's parent, its a way to select the block's parent.

* Updating the padding a height of the parent button so it matches the size of other toolbar buttons.

* Making Travis CI happy.

* Cleaning up some unused code, and fixing some copy/paste mistakes in the code comments.

* Moving some padding around so the focus state of the button appears more like other toolbar buttons.

* Making the d lowercase.

* Sentence case, and a short way to do the check.

* Reducing down to a single useSelect.

* Using the `firstParentClientId` rather than `parents` to do the return check.

* No need to prefix parents with an underscore since it's not conflicting with anything in the upper scope.

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>

* Adding an explicit undefined check.

* Adding the reduce-motion mixin to respect user settings around animations.

* This shouldn't be needed.

* I've been told this should be a Component not an Element.

* Fix BlockSwitch tooltip

* Update BlockSwitch test snapshot

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>
Co-authored-by: Jon Q <hello@jonquach.com>

packages/base-styles/_z-index.scss

@@ -88,8 +88,8 @@ $z-layers: (
 	// .edit-post-header { z-index: 30 }
 	".components-notice-list": 29,
 
-	// Above the block list, under the header.
-	".block-editor-block-list__block-popover": 29,
+	// Above the block list and the header.
+	".block-editor-block-list__block-popover": 31,
 
 	// Under the block popover (block toolbar).
 	".block-editor-block-list__insertion-point-popover": 28,

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

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+
+/**
+ * Block parent selector component, displaying the hierarchy of the
+ * current block selection as a single icon to "go up" a level.
+ *
+ * @return {WPComponent} Parent block selector.
+ */
+export default function BlockParentSelector() {
+	const { selectBlock } = useDispatch( 'core/block-editor' );
+	const { parentBlockType, firstParentClientId } = useSelect( ( select ) => {
+		const {
+			getBlockName,
+			getBlockParents,
+			getSelectedBlockClientId,
+		} = select( 'core/block-editor' );
+		const selectedBlockClientId = getSelectedBlockClientId();
+		const parents = getBlockParents( selectedBlockClientId );
+		const _firstParentClientId = parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( _firstParentClientId );
+		return {
+			parentBlockType: getBlockType( parentBlockName ),
+			firstParentClientId: _firstParentClientId,
+		};
+	}, [] );
+
+	if ( firstParentClientId !== undefined ) {
+		return (
+			<div
+				className="block-editor-block-parent-selector"
+				key={ firstParentClientId }
+			>
+				<Button
+					className="block-editor-block-parent-selector__button"
+					onClick={ () => selectBlock( firstParentClientId ) }
+					label={ sprintf(
+						/* translators: %s: Name of the block's parent. */
+						__( 'Select parent (%s)' ),
+						parentBlockType.title
+					) }
+					showTooltip
+					icon={ <BlockIcon icon={ parentBlockType.icon } /> }
+				/>
+			</div>
+		);
+	}
+
+	return null;
+}

packages/block-editor/src/components/block-parent-selector/style.scss

@@ -0,0 +1,14 @@
+.block-editor-block-parent-selector {
+	background: $white;
+	border: 1px solid $dark-gray-primary;
+	border-radius: $radius-block-ui;
+	padding: 8px;
+	line-height: 1;
+
+	.block-editor-block-parent-selector__button {
+		width: 32px;
+		min-width: auto;
+		height: 32px;
+		padding: 0;
+	}
+}

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

@@ -98,7 +98,7 @@ export class BlockSwitcher extends Component {
 					<ToolbarButton
 						disabled
 						className="block-editor-block-switcher__no-switcher-icon"
-						label={ __( 'Block icon' ) }
+						title={ __( 'Block icon' ) }
 						icon={ <BlockIcon icon={ icon } showColors /> }
 					/>
 				</ToolbarGroup>
@@ -138,7 +138,7 @@ export class BlockSwitcher extends Component {
 								onClick={ onToggle }
 								aria-haspopup="true"
 								aria-expanded={ isOpen }
-								label={ label }
+								title={ label }
 								onKeyDown={ openOnArrowDown }
 								showTooltip
 								icon={ <BlockIcon icon={ icon } showColors /> }

packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap

@@ -20,7 +20,7 @@ exports[`BlockSwitcher should render disabled block switcher with multi block of
         showColors={true}
       />
     }
-    label="Block icon"
+    title="Block icon"
   />
 </ToolbarGroup>
 `;

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

@@ -12,6 +12,7 @@ import { useViewportMatch } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockMover from '../block-mover';
+import BlockParentSelector from '../block-parent-selector';
 import BlockSwitcher from '../block-switcher';
 import BlockControls from '../block-controls';
 import BlockFormatControls from '../block-format-controls';
@@ -88,6 +89,7 @@ export default function BlockToolbar( { hideDragHandle } ) {
 
 	const classes = classnames(
 		'block-editor-block-toolbar',
+		shouldShowMovers && 'is-showing-movers',
 		! displayHeaderToolbar && 'has-responsive-movers'
 	);
 
@@ -97,6 +99,12 @@ export default function BlockToolbar( { hideDragHandle } ) {
 				className="block-editor-block-toolbar__mover-switcher-container"
 				ref={ nodeRef }
 			>
+				{ ! isMultiToolbar && (
+					<div className="block-editor-block-toolbar__block-parent-selector-wrapper">
+						<BlockParentSelector clientIds={ blockClientIds } />
+					</div>
+				) }
+
 				<div
 					className="block-editor-block-toolbar__mover-trigger-container"
 					{ ...showMoversGestures }
@@ -112,6 +120,7 @@ export default function BlockToolbar( { hideDragHandle } ) {
 						/>
 					</div>
 				</div>
+
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
 					<div
 						{ ...showMoversGestures }
@@ -121,6 +130,7 @@ export default function BlockToolbar( { hideDragHandle } ) {
 					</div>
 				) }
 			</div>
+
 			{ shouldShowVisualToolbar && ! isMultiToolbar && (
 				<>
 					<BlockControls.Slot

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

@@ -66,6 +66,27 @@
 	}
 }
 
+.block-editor-block-toolbar__block-parent-selector-wrapper {
+	position: absolute;
+	top: -1px;
+	left: -1px;
+	opacity: 0;
+	transition: all 60ms linear;
+	z-index: -1; // This makes it slide out from underneath the toolbar.
+
+	@include reduce-motion("transition");
+
+	.is-showing-movers & {
+		opacity: 1;
+		transform: translateY(-($block-toolbar-height + $grid-unit-15));
+	}
+
+	// Hide the Parent button in Top Toolbar mode.
+	.edit-post-header-toolbar__block-toolbar & {
+		display: none;
+	}
+}
+
 .block-editor-block-toolbar__mover-switcher-container {
 	display: flex;
 }
@@ -112,4 +133,3 @@
 		@include reduce-motion("transition");
 	}
 }
-

packages/block-editor/src/style.scss

@@ -17,6 +17,7 @@
 @import "./components/block-mobile-toolbar/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
+@import "./components/block-parent-selector/style.scss";
 @import "./components/block-preview/style.scss";
 @import "./components/block-settings-menu/style.scss";
 @import "./components/block-styles/style.scss";