diff --git a/packages/block-editor/src/components/block-controls/hook.js b/packages/block-editor/src/components/block-controls/hook.js
index 8f4940a8597da..35d62bc7fc862 100644
--- a/packages/block-editor/src/components/block-controls/hook.js
+++ b/packages/block-editor/src/components/block-controls/hook.js
@@ -1,42 +1,17 @@
-/**
- * WordPress dependencies
- */
-import { store as blocksStore } from '@wordpress/blocks';
-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, shareWithChildBlocks ) {
-	const isDisplayed = useDisplayBlockControls();
-	const { clientId } = useBlockEditContext();
-	const isParentDisplayed = useSelect(
-		( select ) => {
-			const { getBlockName, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			const { hasBlockSupport } = select( blocksStore );
-			return (
-				shareWithChildBlocks &&
-				hasBlockSupport(
-					getBlockName( clientId ),
-					'__experimentalExposeControlsToChildren',
-					false
-				) &&
-				hasSelectedInnerBlock( clientId )
-			);
-		},
-		[ shareWithChildBlocks, clientId ]
-	);
+	const { shouldDisplayControls, shouldDisplayControlsWithinChildren } =
+		useBlockEditContext();
 
-	if ( isDisplayed ) {
+	if ( shouldDisplayControls ) {
 		return groups[ group ]?.Fill;
 	}
-	if ( isParentDisplayed ) {
+	if ( shareWithChildBlocks && shouldDisplayControlsWithinChildren ) {
 		return groups.parent.Fill;
 	}
 	return null;
diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js
index d24f8301c85fb..2b76d03998073 100644
--- a/packages/block-editor/src/components/block-edit/index.js
+++ b/packages/block-editor/src/components/block-edit/index.js
@@ -4,11 +4,14 @@
 import { useMemo } from '@wordpress/element';
 
 import { hasBlockSupport } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import Edit from './edit';
 import { BlockEditContextProvider, useBlockEditContext } from './context';
+import { store as blockEditorStore } from '../../store';
 
 /**
  * The `useBlockEditContext` hook provides information about the block this hook is being used in.
@@ -34,12 +37,50 @@ export default function BlockEdit( props ) {
 		'__experimentalLayout',
 		false
 	);
+	const shouldDisplayControls = useSelect(
+		( select ) => {
+			if ( isSelected ) {
+				return true;
+			}
+
+			const {
+				getBlockName,
+				isFirstMultiSelectedBlock,
+				getMultiSelectedBlockClientIds,
+			} = select( blockEditorStore );
+
+			if ( isFirstMultiSelectedBlock( clientId ) ) {
+				return getMultiSelectedBlockClientIds().every(
+					( id ) => getBlockName( id ) === name
+				);
+			}
+
+			return false;
+		},
+		[ clientId, isSelected, name ]
+	);
+	const shouldDisplayControlsWithinChildren = useSelect(
+		( select ) => {
+			const { getBlockName, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			return (
+				hasBlockSupport(
+					getBlockName( clientId ),
+					'__experimentalExposeControlsToChildren',
+					false
+				) && hasSelectedInnerBlock( clientId )
+			);
+		},
+		[ clientId, isSelected, name ]
+	);
 	const context = {
 		name,
 		isSelected,
 		clientId,
 		layout: layoutSupport ? layout : null,
 		__unstableLayoutClassNames,
+		shouldDisplayControls,
+		shouldDisplayControlsWithinChildren,
 	};
 	return (
 		<BlockEditContextProvider
diff --git a/packages/block-editor/src/components/use-display-block-controls/index.js b/packages/block-editor/src/components/use-display-block-controls/index.js
index 605556f295b96..b702c5fee9be2 100644
--- a/packages/block-editor/src/components/use-display-block-controls/index.js
+++ b/packages/block-editor/src/components/use-display-block-controls/index.js
@@ -1,36 +1,8 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
 /**
  * Internal dependencies
  */
 import { useBlockEditContext } from '../block-edit/context';
-import { store as blockEditorStore } from '../../store';
 
 export default function useDisplayBlockControls() {
-	const { isSelected, clientId, name } = useBlockEditContext();
-	return useSelect(
-		( select ) => {
-			if ( isSelected ) {
-				return true;
-			}
-
-			const {
-				getBlockName,
-				isFirstMultiSelectedBlock,
-				getMultiSelectedBlockClientIds,
-			} = select( blockEditorStore );
-
-			if ( isFirstMultiSelectedBlock( clientId ) ) {
-				return getMultiSelectedBlockClientIds().every(
-					( id ) => getBlockName( id ) === name
-				);
-			}
-
-			return false;
-		},
-		[ clientId, isSelected, name ]
-	);
+	return useBlockEditContext().shouldDisplayControls;
 }
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index 8d5c7f850e89b..be981706bf54c 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/packages/block-editor/src/hooks/align.js
@@ -21,6 +21,7 @@ import { useSelect } from '@wordpress/data';
 import { BlockControls, BlockAlignmentControl } from '../components';
 import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';
 import { store as blockEditorStore } from '../store';
+import { useBlockEditContext } from '../components/block-edit/context';
 
 /**
  * An array which includes all possible valid alignments,
@@ -109,6 +110,55 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
+function AlignControls( props ) {
+	const { name: blockName } = props;
+	// Compute the block valid alignments by taking into account,
+	// if the theme supports wide alignments or not and the layout's
+	// availble alignments. We do that for conditionally rendering
+	// Slot.
+	const blockAllowedAlignments = getValidAlignments(
+		getBlockSupport( blockName, 'align' ),
+		hasBlockSupport( blockName, 'alignWide', true )
+	);
+
+	const validAlignments = useAvailableAlignments(
+		blockAllowedAlignments
+	).map( ( { name } ) => name );
+	const isContentLocked = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).__unstableGetContentLockingParent(
+				props.clientId
+			);
+		},
+		[ props.clientId ]
+	);
+
+	if ( ! validAlignments.length || isContentLocked ) {
+		return null;
+	}
+
+	const updateAlignment = ( nextAlign ) => {
+		if ( ! nextAlign ) {
+			const blockType = getBlockType( props.name );
+			const blockDefaultAlign = blockType?.attributes?.align?.default;
+			if ( blockDefaultAlign ) {
+				nextAlign = '';
+			}
+		}
+		props.setAttributes( { align: nextAlign } );
+	};
+
+	return (
+		<BlockControls group="block" __experimentalShareWithChildBlocks>
+			<BlockAlignmentControl
+				value={ props.attributes.align }
+				onChange={ updateAlignment }
+				controls={ validAlignments }
+			/>
+		</BlockControls>
+	);
+}
+
 /**
  * Override the default edit UI to include new toolbar controls for block
  * alignment, if block defines support.
@@ -119,53 +169,16 @@ export function addAttribute( settings ) {
  */
 export const withToolbarControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const blockEdit = <BlockEdit key="edit" { ...props } />;
-		const { name: blockName } = props;
-		// Compute the block valid alignments by taking into account,
-		// if the theme supports wide alignments or not and the layout's
-		// availble alignments. We do that for conditionally rendering
-		// Slot.
-		const blockAllowedAlignments = getValidAlignments(
-			getBlockSupport( blockName, 'align' ),
-			hasBlockSupport( blockName, 'alignWide', true )
-		);
-
-		const validAlignments = useAvailableAlignments(
-			blockAllowedAlignments
-		).map( ( { name } ) => name );
-		const isContentLocked = useSelect(
-			( select ) => {
-				return select(
-					blockEditorStore
-				).__unstableGetContentLockingParent( props.clientId );
-			},
-			[ props.clientId ]
-		);
-		if ( ! validAlignments.length || isContentLocked ) {
-			return blockEdit;
-		}
-
-		const updateAlignment = ( nextAlign ) => {
-			if ( ! nextAlign ) {
-				const blockType = getBlockType( props.name );
-				const blockDefaultAlign = blockType?.attributes?.align?.default;
-				if ( blockDefaultAlign ) {
-					nextAlign = '';
-				}
-			}
-			props.setAttributes( { align: nextAlign } );
-		};
-
+		const { shouldDisplayControls, shouldDisplayControlsWithinChildren } =
+			useBlockEditContext();
 		return (
 			<>
-				<BlockControls group="block" __experimentalShareWithChildBlocks>
-					<BlockAlignmentControl
-						value={ props.attributes.align }
-						onChange={ updateAlignment }
-						controls={ validAlignments }
-					/>
-				</BlockControls>
-				{ blockEdit }
+				{ ( shouldDisplayControls ||
+					shouldDisplayControlsWithinChildren ) &&
+					hasBlockSupport( props.name, 'align' ) && (
+						<AlignControls { ...props } />
+					) }
+				<BlockEdit { ...props } />
 			</>
 		);
 	},