From d7e21374ad6bc9aef2172ac0982c8588be665895 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 23 Mar 2021 09:08:08 +0100 Subject: [PATCH] Remove alignments from the root level of the site editor (#30079) --- .../components/block-alignment-control/ui.js | 31 ++------------- .../use-available-alignments.js | 39 +++++++++++++++++++ packages/block-editor/src/hooks/align.js | 8 +++- .../src/components/block-editor/index.js | 9 ++++- 4 files changed, 56 insertions(+), 31 deletions(-) create mode 100644 packages/block-editor/src/components/block-alignment-control/use-available-alignments.js diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js index 33682e7bfcee7f..a08f7d1b9ca755 100644 --- 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 new file mode 100644 index 00000000000000..64b85323a4c526 --- /dev/null +++ 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 index f550d9c80e53b1..d2bf0b2b428b8a 100644 --- 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 index fa07ae90b70faf..a119fc490f8769 100644 --- 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 } ) { > - +