From 36c856bd6d0f4e89c772005355d4e7bc5260fb60 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 30 Oct 2023 12:33:15 +0400
Subject: [PATCH] Block Editor: Avoid rendering empty Slot for block alignments

---
 packages/block-editor/src/hooks/align.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index f266bb32e18197..8f1284eedb2587 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/packages/block-editor/src/hooks/align.js
@@ -120,17 +120,20 @@ export const withToolbarControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const blockEdit = <BlockEdit key="edit" { ...props } />;
 		const { name: blockName } = props;
-
-		const blockEditingMode = useBlockEditingMode();
-		if ( blockEditingMode !== 'default' ) {
-			return blockEdit;
-		}
-
+		// 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 )
 		);
-		if ( blockAllowedAlignments.length === 0 ) {
+
+		const validAlignments = useAvailableAlignments(
+			blockAllowedAlignments
+		).map( ( { name } ) => name );
+		const blockEditingMode = useBlockEditingMode();
+		if ( ! validAlignments.length || blockEditingMode !== 'default' ) {
 			return blockEdit;
 		}
 
@@ -151,7 +154,7 @@ export const withToolbarControls = createHigherOrderComponent(
 					<BlockAlignmentControl
 						value={ props.attributes.align }
 						onChange={ updateAlignment }
-						controls={ blockAllowedAlignments }
+						controls={ validAlignments }
 					/>
 				</BlockControls>
 				{ blockEdit }