Alignments should work for classic themes

WordPress · Aug 4, 2022 · ef50b1c · ef50b1c
1 parent 87d964a
commit ef50b1c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 39 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
@@ -46,7 +46,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
-	if ( layoutType.name !== 'default' ) {
+	if ( layoutType.name !== 'column' ) {
 		return [];
 	}
 	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -123,11 +123,14 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	const usedLayout = layout || defaultBlockLayout || {};
 	const { inherit = false, type = 'default' } = usedLayout;
 	/**
-	 * `themeSupportsLayout` is only relevant to the `default/flow`
-	 * layout and it should not be taken into account when other
+	 * `themeSupportsLayout` is only relevant to the `default/flow` or
+	 * `column` layouts and it should not be taken into account when other
 	 * `layout` types are used.
 	 */
-	if ( type === 'default' && ! themeSupportsLayout ) {
+	if (
+		( type === 'default' || type === 'column' ) &&
+		! themeSupportsLayout
+	) {
 		return null;
 	}
 	const layoutType = getLayoutType( type );

diff --git a/packages/block-editor/src/layouts/column.js b/packages/block-editor/src/layouts/column.js
@@ -6,15 +6,15 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 import { getCSSRules } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
  */
 import useSetting from '../components/use-setting';
-import { appendSelectors, getBlockGapCSS } from './utils';
+import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';
 import { getGapBoxControlValueFromStyle } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 
@@ -215,32 +215,3 @@ export default {
 		return alignments;
 	},
 };
-
-/**
- * Helper method to assign contextual info to clarify
- * alignment settings.
- *
- * Besides checking if `contentSize` and `wideSize` have a
- * value, we now show this information only if their values
- * are not a `css var`. This needs to change when parsing
- * css variables land.
- *
- * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752
- *
- * @param {Object} layout The layout object.
- * @return {Object} An object with contextual info per alignment.
- */
-function getAlignmentsInfo( layout ) {
-	const { contentSize, wideSize } = layout;
-	const alignmentInfo = {};
-	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
-	if ( sizeRegex.test( contentSize ) ) {
-		// translators: %s: container size (i.e. 600px etc)
-		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );
-	}
-	if ( sizeRegex.test( wideSize ) ) {
-		// translators: %s: container size (i.e. 600px etc)
-		alignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize );
-	}
-	return alignmentInfo;
-}
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -181,10 +181,12 @@ export default function VisualEditor( { styles } ) {
 		}
 
 		if ( themeSupportsLayout ) {
-			return defaultLayout;
+			// We need to ensure support for wide and full alignments,
+			// so we add the column type.
+			return { ...defaultLayout, type: 'column' };
 		}
-
-		return undefined;
+		// Set column layout for classic themes so all alignments are supported.
+		return { type: 'column' };
 	}, [ isTemplateMode, themeSupportsLayout, defaultLayout ] );
 
 	const titleRef = useRef();
@@ -265,7 +267,7 @@ export default function VisualEditor( { styles } ) {
 								className={
 									isTemplateMode
 										? 'wp-site-blocks'
-										: 'is-layout-flow' // Ensure root level blocks receive default/flow blockGap styling rules.
+										: 'is-layout-column' // Ensure root level blocks receive default/flow blockGap styling rules.
 								}
 								__experimentalLayout={ layout }
 							/>