Try a new block controls group - parent

packages/block-editor/src/components/block-controls/fill.js

@@ -15,19 +15,18 @@ import {
 /**
  * Internal dependencies
  */
-import useDisplayBlockControls from '../use-display-block-controls';
-import groups from './groups';
+import useBlockControlsFill from './hook';
 
 export default function BlockControlsFill( {
 	group = 'default',
 	controls,
 	children,
 	__experimentalExposeToChildren = false,
 } ) {
-	if ( ! useDisplayBlockControls( { __experimentalExposeToChildren } ) ) {
+	const Fill = useBlockControlsFill( group, __experimentalExposeToChildren );
+	if ( ! Fill ) {
 		return null;
 	}
-	const Fill = groups[ group ].Fill;
 
 	return (
 		<StyleProvider document={ document }>

packages/block-editor/src/components/block-controls/groups.js

@@ -7,12 +7,14 @@ const BlockControlsDefault = createSlotFill( 'BlockControls' );
 const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
 const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
 const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
+const BlockControlsParent = createSlotFill( 'BlockControlsParent' );
 
 const groups = {
 	default: BlockControlsDefault,
 	block: BlockControlsBlock,
 	inline: BlockControlsInline,
 	other: BlockControlsOther,
+	parent: BlockControlsParent,
 };
 
 export default groups;

packages/block-editor/src/components/block-controls/hook.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import groups from './groups';
+import { store as blockEditorStore } from '../../store';
+import { useBlockEditContext } from '../block-edit/context';
+import useDisplayBlockControls from '../use-display-block-controls';
+
+export default function useBlockControlsFill( group, exposeToChildren ) {
+	const isDisplayed = useDisplayBlockControls();
+	const { clientId } = useBlockEditContext();
+	const isParentDisplayed = useSelect(
+		( select ) => {
+			return (
+				exposeToChildren &&
+				select( blockEditorStore ).hasSelectedInnerBlock( clientId )
+			);
+		},
+		[ exposeToChildren, clientId ]
+	);
+
+	if ( isDisplayed ) {
+		return groups[ group ]?.Fill;
+	}
+	if ( isParentDisplayed ) {
+		return groups.parent.Fill;
+	}
+	return null;
+}

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

@@ -108,7 +108,15 @@ export default function BlockToolbar( { hideDragHandle } ) {
 	return (
 		<div className={ classes }>
 			{ ! isMultiToolbar && ! displayHeaderToolbar && (
-				<BlockParentSelector clientIds={ blockClientIds } />
+				<>
+					<BlockParentSelector clientIds={ blockClientIds } />
+					{ shouldShowVisualToolbar && (
+						<BlockControls.Slot
+							group="parent"
+							className="block-editor-block-toolbar__slot"
+						/>
+					) }
+				</>
 			) }
 			<div ref={ nodeRef } { ...showMoversGestures }>
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (

packages/block-editor/src/components/use-display-block-controls/index.js

@@ -9,11 +9,9 @@ import { useSelect } from '@wordpress/data';
 import { useBlockEditContext } from '../block-edit/context';
 import { store as blockEditorStore } from '../../store';
 
-export default function useDisplayBlockControls( {
-	__experimentalExposeToChildren = false,
-} = {} ) {
+export default function useDisplayBlockControls() {
 	const { isSelected, clientId, name } = useBlockEditContext();
-	const isActive = useSelect(
+	return useSelect(
 		( select ) => {
 			if ( isSelected ) {
 				return true;
@@ -23,22 +21,16 @@ export default function useDisplayBlockControls( {
 				getBlockName,
 				isFirstMultiSelectedBlock,
 				getMultiSelectedBlockClientIds,
-				hasSelectedInnerBlock,
 			} = select( blockEditorStore );
 
 			if ( isFirstMultiSelectedBlock( clientId ) ) {
 				return getMultiSelectedBlockClientIds().every(
 					( id ) => getBlockName( id ) === name
 				);
 			}
-			if ( __experimentalExposeToChildren ) {
-				return hasSelectedInnerBlock( clientId );
-			}
 
 			return false;
 		},
 		[ clientId, isSelected, name ]
 	);
-
-	return isActive;
 }