[Layout]: Fix align controls for hybrid themes (#47961)

WordPress · Feb 13, 2023 · 4008678 · 4008678 · github-actions · Feb 13, 2023
1 parent b019306
commit 4008678
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 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
@@ -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
@@ -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
@@ -73,6 +73,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__unstableHasCustomAppender',
 	'__unstableIsPreviewMode',
 	'__unstableResolvedAssets',
+	'__unstableIsBlockBasedTheme',
 ];
 
 /**