Add new Parent block selector to child blocks (mahjong)

packages/base-styles/_z-index.scss

@@ -87,8 +87,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 {WPElement} 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

@@ -143,6 +143,7 @@ export class BlockSwitcher extends Component {
 								label={ label }
 								onKeyDown={ openOnArrowDown }
 								showTooltip
+								tooltipPosition="bottom"
 								icon={ <BlockIcon icon={ icon } showColors /> }
 							/>
 						</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,25 @@
 	}
 }
 
+.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.
+
+	.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 +131,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";