[Block Editor]: Fix displaying only none alignment option (#35822)

packages/block-editor/src/components/block-alignment-control/use-available-alignments.js

@@ -16,7 +16,7 @@ const WIDE_CONTROLS = [ 'wide', 'full' ];
 export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	// Always add the `none` option if not exists.
 	if ( ! controls.includes( 'none' ) ) {
-		controls.unshift( 'none' );
+		controls = [ 'none', ...controls ];
 	}
 	const { wideControlsEnabled = false, themeSupportsLayout } = useSelect(
 		( select ) => {
@@ -34,9 +34,15 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	const layoutAlignments = layoutType.getAlignments( layout );
 
 	if ( themeSupportsLayout ) {
-		return layoutAlignments.filter( ( { name: alignmentName } ) =>
-			controls.includes( alignmentName )
+		const alignments = layoutAlignments.filter(
+			( { name: alignmentName } ) => controls.includes( alignmentName )
 		);
+		// While we treat `none` as an alignment, we shouldn't return it if no
+		// other alignments exist.
+		if ( alignments.length === 1 && alignments[ 0 ].name === 'none' ) {
+			return [];
+		}
+		return alignments;
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
@@ -54,5 +60,14 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		)
 		.map( ( enabledControl ) => ( { name: enabledControl } ) );
 
+	// While we treat `none` as an alignment, we shouldn't return it if no
+	// other alignments exist.
+	if (
+		enabledControls.length === 1 &&
+		enabledControls[ 0 ].name === 'none'
+	) {
+		return [];
+	}
+
 	return enabledControls;
 }

packages/block-editor/src/hooks/align.js

@@ -63,7 +63,7 @@ export function getValidAlignments(
 		);
 	} else if ( blockAlign === true ) {
 		// `true` includes all alignments...
-		validAlignments = ALL_ALIGNMENTS;
+		validAlignments = [ ...ALL_ALIGNMENTS ];
 	} else {
 		validAlignments = [];
 	}
@@ -117,15 +117,19 @@ export function addAttribute( settings ) {
 export const withToolbarControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { name: blockName } = props;
-		// Compute the block allowed alignments without taking into account,
-		// if the theme supports wide alignments or not
-		// and without checking the layout for availble alignments.
-		// BlockAlignmentToolbar takes both of these into account.
+		// 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 updateAlignment = ( nextAlign ) => {
 			if ( ! nextAlign ) {
 				const blockType = getBlockType( props.name );
@@ -139,15 +143,15 @@ export const withToolbarControls = createHigherOrderComponent(
 
 		return (
 			<>
-				{ blockAllowedAlignments.length > 0 && (
+				{ !! validAlignments.length && (
 					<BlockControls
 						group="block"
 						__experimentalShareWithChildBlocks
 					>
 						<BlockAlignmentControl
 							value={ props.attributes.align }
 							onChange={ updateAlignment }
-							controls={ blockAllowedAlignments }
+							controls={ validAlignments }
 						/>
 					</BlockControls>
 				) }