Remove alignments from the root level of the site editor (#30079)

WordPress · Mar 23, 2021 · d7e2137 · d7e2137
1 parent 39953e6
commit d7e2137
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 31 deletions.
diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { DropdownMenu, ToolbarGroup } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import {
 	positionCenter,
 	positionLeft,
@@ -15,8 +14,7 @@ import {
 /**
  * Internal dependencies
  */
-import { useLayout } from '../block-list/layout';
-import { store as blockEditorStore } from '../../store';
+import useAvailableAlignments from './use-available-alignments';
 
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	left: {
@@ -41,9 +39,7 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 	},
 };
 
-const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ];
 const DEFAULT_CONTROL = 'center';
-const WIDE_CONTROLS = [ 'wide', 'full' ];
 
 const POPOVER_PROPS = {
 	isAlternate: true,
@@ -52,33 +48,12 @@ const POPOVER_PROPS = {
 function BlockAlignmentUI( {
 	value,
 	onChange,
-	controls = DEFAULT_CONTROLS,
+	controls,
 	isToolbar,
 	isCollapsed = true,
 	isToolbarButton = true,
 } ) {
-	const { wideControlsEnabled = false } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-		return {
-			wideControlsEnabled: settings.alignWide,
-		};
-	}, [] );
-	const layout = useLayout();
-	const supportsAlignments = layout.type === 'default';
-
-	if ( ! supportsAlignments ) {
-		return null;
-	}
-	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
-	const enabledControls = controls.filter(
-		( control ) =>
-			( layout.alignments || // Ignore the global wideAlignment check if the layout explicitely defines alignments.
-				wideControlsEnabled ||
-				! WIDE_CONTROLS.includes( control ) ) &&
-			availableAlignments.includes( control )
-	);
-
+	const enabledControls = useAvailableAlignments( controls );
 	if ( enabledControls.length === 0 ) {
 		return null;
 	}

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
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useLayout } from '../block-list/layout';
+import { store as blockEditorStore } from '../../store';
+
+const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ];
+const WIDE_CONTROLS = [ 'wide', 'full' ];
+
+export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
+	const { wideControlsEnabled = false } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+		return {
+			wideControlsEnabled: settings.alignWide,
+		};
+	}, [] );
+	const layout = useLayout();
+	const supportsAlignments = layout.type === 'default';
+
+	if ( ! supportsAlignments ) {
+		return [];
+	}
+	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
+	const enabledControls = controls.filter(
+		( control ) =>
+			( layout.alignments || // Ignore the global wideAlignment check if the layout explicitely defines alignments.
+				wideControlsEnabled ||
+				! WIDE_CONTROLS.includes( control ) ) &&
+			availableAlignments.includes( control )
+	);
+
+	return enabledControls;
+}
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
@@ -21,6 +21,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { BlockControls, BlockAlignmentControl } from '../components';
 import { store as blockEditorStore } from '../store';
+import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';
 
 /**
  * An array which includes all possible valid alignments,
@@ -116,14 +117,17 @@ export function addAttribute( settings ) {
 export const withToolbarControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { name: blockName } = props;
-		// Compute valid alignments without taking into account,
+		// 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.
-		const validAlignments = getValidAlignments(
+		const blockAllowedAlignments = getValidAlignments(
 			getBlockSupport( blockName, 'align' ),
 			hasBlockSupport( blockName, 'alignWide', true )
 		);
+		const validAlignments = useAvailableAlignments(
+			blockAllowedAlignments
+		);
 
 		const updateAlignment = ( nextAlign ) => {
 			if ( ! nextAlign ) {

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -103,7 +103,14 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				>
 					<DropZoneProvider>
 						<WritingFlow>
-							<BlockList className="edit-site-block-editor__block-list" />
+							<BlockList
+								className="edit-site-block-editor__block-list"
+								__experimentalLayout={ {
+									type: 'default',
+									// At the root level of the site editor, no alignments should be allowed.
+									alignments: [],
+								} }
+							/>
 						</WritingFlow>
 					</DropZoneProvider>
 				</Iframe>