diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index 8f1284eedb2587..f9804e876ad326 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/packages/block-editor/src/hooks/align.js
@@ -108,6 +108,50 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
+function BlockEditAlignmentToolbarControls( {
+	blockName,
+	attributes,
+	setAttributes,
+} ) {
+	// 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 blockEditingMode = useBlockEditingMode();
+	if ( ! validAlignments.length || blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	const updateAlignment = ( nextAlign ) => {
+		if ( ! nextAlign ) {
+			const blockType = getBlockType( blockName );
+			const blockDefaultAlign = blockType?.attributes?.align?.default;
+			if ( blockDefaultAlign ) {
+				nextAlign = '';
+			}
+		}
+		setAttributes( { align: nextAlign } );
+	};
+
+	return (
+		<BlockControls group="block" __experimentalShareWithChildBlocks>
+			<BlockAlignmentControl
+				value={ attributes.align }
+				onChange={ updateAlignment }
+				controls={ validAlignments }
+			/>
+		</BlockControls>
+	);
+}
+
 /**
  * Override the default edit UI to include new toolbar controls for block
  * alignment, if block defines support.
@@ -118,46 +162,22 @@ 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 hasAlignmentSupport = hasBlockSupport(
+			props.name,
+			'align',
+			false
 		);
 
-		const validAlignments = useAvailableAlignments(
-			blockAllowedAlignments
-		).map( ( { name } ) => name );
-		const blockEditingMode = useBlockEditingMode();
-		if ( ! validAlignments.length || blockEditingMode !== 'default' ) {
-			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 } );
-		};
-
 		return (
 			<>
-				<BlockControls group="block" __experimentalShareWithChildBlocks>
-					<BlockAlignmentControl
-						value={ props.attributes.align }
-						onChange={ updateAlignment }
-						controls={ validAlignments }
+				{ hasAlignmentSupport && (
+					<BlockEditAlignmentToolbarControls
+						blockName={ props.name }
+						attributes={ props.attributes }
+						setAttributes={ props.setAttributes }
 					/>
-				</BlockControls>
-				{ blockEdit }
+				) }
+				<BlockEdit key="edit" { ...props } />
 			</>
 		);
 	},