From 4008678a9cd086f5bfeb8ae6b614692299f162d4 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Mon, 13 Feb 2023 09:38:24 +0200
Subject: [PATCH] [Layout]: Fix align controls for hybrid themes (#47961)

---
 .../use-available-alignments.js               | 29 +++++++++++--------
 packages/block-editor/src/layouts/flow.js     | 17 ++++++++++-
 .../provider/use-block-editor-settings.js     |  1 +
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
index ab6213b4389282..d77eb2af2a5976 100644
--- a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
+++ b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
@@ -19,20 +19,25 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	if ( ! controls.includes( 'none' ) ) {
 		controls = [ 'none', ...controls ];
 	}
-	const { wideControlsEnabled = false, themeSupportsLayout } = useSelect(
-		( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			const settings = getSettings();
-			return {
-				wideControlsEnabled: settings.alignWide,
-				themeSupportsLayout: settings.supportsLayout,
-			};
-		},
-		[]
-	);
+	const {
+		wideControlsEnabled = false,
+		themeSupportsLayout,
+		isBlockBasedTheme,
+	} = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+		return {
+			wideControlsEnabled: settings.alignWide,
+			themeSupportsLayout: settings.supportsLayout,
+			isBlockBasedTheme: settings.__unstableIsBlockBasedTheme,
+		};
+	}, [] );
 	const layout = useLayout();
 	const layoutType = getLayoutType( layout?.type );
-	const layoutAlignments = layoutType.getAlignments( layout );
+	const layoutAlignments = layoutType.getAlignments(
+		layout,
+		isBlockBasedTheme
+	);
 
 	if ( themeSupportsLayout ) {
 		const alignments = layoutAlignments.filter(
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index 9367d5b91508a7..d064edce65fedc 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -56,7 +56,7 @@ export default {
 	getOrientation() {
 		return 'vertical';
 	},
-	getAlignments( layout ) {
+	getAlignments( layout, isBlockBasedTheme ) {
 		const alignmentInfo = getAlignmentsInfo( layout );
 		if ( layout.alignments !== undefined ) {
 			if ( ! layout.alignments.includes( 'none' ) ) {
@@ -74,6 +74,21 @@ export default {
 			{ name: 'right' },
 		];
 
+		// This is for backwards compatibility with hybrid themes.
+		if ( ! isBlockBasedTheme ) {
+			const { contentSize, wideSize } = layout;
+			if ( contentSize ) {
+				alignments.unshift( { name: 'full' } );
+			}
+
+			if ( wideSize ) {
+				alignments.unshift( {
+					name: 'wide',
+					info: alignmentInfo.wide,
+				} );
+			}
+		}
+
 		alignments.unshift( { name: 'none', info: alignmentInfo.none } );
 
 		return alignments;
diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
index 8b9d9e5ba86d77..4c5c431e5915f1 100644
--- a/packages/editor/src/components/provider/use-block-editor-settings.js
+++ b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -73,6 +73,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__unstableHasCustomAppender',
 	'__unstableIsPreviewMode',
 	'__unstableResolvedAssets',
+	'__unstableIsBlockBasedTheme',
 ];
 
 /**