diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index e7cb6414121292..2048c343227536 100644
--- a/packages/base-styles/_z-index.scss
+++ b/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,
diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js
new file mode 100644
index 00000000000000..7fb79764bbe477
--- /dev/null
+++ b/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 (
+
+
+ );
+ }
+
+ return null;
+}
diff --git a/packages/block-editor/src/components/block-parent-selector/style.scss b/packages/block-editor/src/components/block-parent-selector/style.scss
new file mode 100644
index 00000000000000..ffe18863d8d1bc
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index cc1c1b5d8d548c..85c868702d4364 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -100,7 +100,7 @@ export class BlockSwitcher extends Component {
}
/>
@@ -140,7 +140,7 @@ export class BlockSwitcher extends Component {
onClick={ onToggle }
aria-haspopup="true"
aria-expanded={ isOpen }
- label={ label }
+ title={ label }
onKeyDown={ openOnArrowDown }
showTooltip
icon={ }
diff --git a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
index 0c98e6d00431bd..5dc22def8ff0af 100644
--- a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
+++ b/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"
/>
`;
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index d2dc21fff63c20..a96b3aa123b71b 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/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 && (
+
+
+
+ ) }
+
+
{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
) }
+
{ shouldShowVisualToolbar && ! isMultiToolbar && (
<>