From 9db2619870e0b500a08c9ac7c8a1c35c6c8b4eff Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 22 Oct 2020 09:05:25 +0100 Subject: [PATCH] Introduce the layout prop to InnerBlocks --- .../block-alignment-toolbar/index.js | 50 ++++++++++++------- .../src/components/inner-blocks/index.js | 24 +++++---- .../src/components/inner-blocks/layout.js | 20 ++++++++ packages/block-editor/src/hooks/align.js | 24 +++------ .../block-editor/src/hooks/align.native.js | 2 - packages/block-editor/src/hooks/index.js | 4 +- .../block-editor/src/hooks/index.native.js | 4 +- packages/block-editor/src/index.js | 3 +- packages/block-library/src/buttons/edit.js | 16 ++---- .../block-library/src/buttons/edit.native.js | 15 ++---- 10 files changed, 86 insertions(+), 76 deletions(-) create mode 100644 packages/block-editor/src/components/inner-blocks/layout.js diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js index 2e4ac8ea7556d..b47f0642d2e3e 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/index.js +++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js @@ -3,8 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { ToolbarGroup } from '@wordpress/components'; -import { withSelect } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; +import { useSelect } from '@wordpress/data'; import { positionCenter, positionLeft, @@ -13,6 +12,11 @@ import { stretchWide, } from '@wordpress/icons'; +/** + * Internal dependencies + */ +import { useLayout } from '../inner-blocks/layout'; + const BLOCK_ALIGNMENTS_CONTROLS = { left: { icon: positionLeft, @@ -49,18 +53,36 @@ export function BlockAlignmentToolbar( { onChange, controls = DEFAULT_CONTROLS, isCollapsed = true, - wideControlsEnabled = false, } ) { + const { wideControlsEnabled = false } = useSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); + 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 ) => + ( wideControlsEnabled || WIDE_CONTROLS.includes( control ) ) && + availableAlignments.includes( control ) + ); + + if ( enabledControls.length === 0 ) { + return null; + } + function applyOrUnset( align ) { return () => onChange( value === align ? undefined : align ); } - const enabledControls = wideControlsEnabled - ? controls - : controls.filter( - ( control ) => WIDE_CONTROLS.indexOf( control ) === -1 - ); - const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ]; const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ]; @@ -87,12 +109,4 @@ export function BlockAlignmentToolbar( { ); } -export default compose( - withSelect( ( select ) => { - const { getSettings } = select( 'core/block-editor' ); - const settings = getSettings(); - return { - wideControlsEnabled: settings.alignWide, - }; - } ) -)( BlockAlignmentToolbar ); +export default BlockAlignmentToolbar; diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 18a38801eb740..3f0df33961dcc 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -27,6 +27,7 @@ import { BlockListItems } from '../block-list'; import { BlockContextProvider } from '../block-context'; import { useBlockEditContext } from '../block-edit/context'; import useBlockSync from '../provider/use-block-sync'; +import { defaultLayout, LayoutProvider } from './layout'; /** * InnerBlocks is a component which allows a single block to have multiple blocks @@ -49,6 +50,7 @@ function UncontrolledInnerBlocks( props ) { renderAppender, orientation, placeholder, + __experimentalLayout: layout = defaultLayout, } = props; useNestedSettingsUpdate( @@ -83,15 +85,19 @@ function UncontrolledInnerBlocks( props ) { // This component needs to always be synchronous as it's the one changing // the async mode depending on the block selection. return ( - - - + + + + + ); } diff --git a/packages/block-editor/src/components/inner-blocks/layout.js b/packages/block-editor/src/components/inner-blocks/layout.js new file mode 100644 index 0000000000000..745b59945ea61 --- /dev/null +++ b/packages/block-editor/src/components/inner-blocks/layout.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { createContext, useContext } from '@wordpress/element'; + +export const defaultLayout = { type: 'default' }; + +const Layout = createContext( defaultLayout ); + +/** + * Allows to define the layout. + */ +export const LayoutProvider = Layout.Provider; + +/** + * React hook used to retrieve the layout config. + */ +export function useLayout() { + return useContext( Layout ); +} diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js index f5f82c4d754c4..67b8e80367333 100644 --- a/packages/block-editor/src/hooks/align.js +++ b/packages/block-editor/src/hooks/align.js @@ -7,7 +7,6 @@ import { has, without } from 'lodash'; /** * WordPress dependencies */ -import { createContext, useContext } from '@wordpress/element'; import { createHigherOrderComponent } from '@wordpress/compose'; import { addFilter } from '@wordpress/hooks'; import { @@ -106,13 +105,6 @@ export function addAttribute( settings ) { return settings; } -const AlignmentHookSettings = createContext( {} ); - -/** - * Allows to pass additional settings to the alignment hook. - */ -export const AlignmentHookSettingsProvider = AlignmentHookSettings.Provider; - /** * Override the default edit UI to include new toolbar controls for block * alignment, if block defines support. @@ -122,17 +114,15 @@ export const AlignmentHookSettingsProvider = AlignmentHookSettings.Provider; */ export const withToolbarControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const { isEmbedButton } = useContext( AlignmentHookSettings ); const { name: blockName } = props; // Compute valid alignments without taking into account, - // if the theme supports wide alignments or not. - // BlockAlignmentToolbar takes into account the theme support. - const validAlignments = isEmbedButton - ? [] - : getValidAlignments( - getBlockSupport( blockName, 'align' ), - hasBlockSupport( blockName, 'alignWide', true ) - ); + // 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( + getBlockSupport( blockName, 'align' ), + hasBlockSupport( blockName, 'alignWide', true ) + ); const updateAlignment = ( nextAlign ) => { if ( ! nextAlign ) { diff --git a/packages/block-editor/src/hooks/align.native.js b/packages/block-editor/src/hooks/align.native.js index 8fb3f6e2be93c..2eaa4bc747b29 100644 --- a/packages/block-editor/src/hooks/align.native.js +++ b/packages/block-editor/src/hooks/align.native.js @@ -12,8 +12,6 @@ import { WIDE_ALIGNMENTS } from '@wordpress/components'; const ALIGNMENTS = [ 'left', 'center', 'right' ]; -export { AlignmentHookSettingsProvider } from './align.js'; - // Used to filter out blocks that don't support wide/full alignment on mobile addFilter( 'blocks.registerBlockType', diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 5d9b2f5393a8d..6aa2b76fc1d1f 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -1,12 +1,10 @@ /** * Internal dependencies */ -import { AlignmentHookSettingsProvider } from './align'; +import './align'; import './anchor'; import './custom-class-name'; import './generated-class-name'; import './style'; import './color'; import './font-size'; - -export { AlignmentHookSettingsProvider }; diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index 5d9b2f5393a8d..6aa2b76fc1d1f 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/packages/block-editor/src/hooks/index.native.js @@ -1,12 +1,10 @@ /** * Internal dependencies */ -import { AlignmentHookSettingsProvider } from './align'; +import './align'; import './anchor'; import './custom-class-name'; import './generated-class-name'; import './style'; import './color'; import './font-size'; - -export { AlignmentHookSettingsProvider }; diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index add6f5a5f9910..037b0f8fad5f1 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -10,8 +10,7 @@ import '@wordpress/notices'; /** * Internal dependencies */ -import { AlignmentHookSettingsProvider as __experimentalAlignmentHookSettingsProvider } from './hooks'; -export { __experimentalAlignmentHookSettingsProvider }; +import './hooks'; export * from './components'; export * from './utils'; export { storeConfig } from './store'; diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js index 6cc9d69f8efb1..5e1abc01582a0 100644 --- a/packages/block-library/src/buttons/edit.js +++ b/packages/block-library/src/buttons/edit.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { - __experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider, __experimentalUseInnerBlocksProps as useInnerBlocksProps, useBlockProps, } from '@wordpress/block-editor'; @@ -15,23 +14,18 @@ import { name as buttonBlockName } from '../button/'; const ALLOWED_BLOCKS = [ buttonBlockName ]; const BUTTONS_TEMPLATE = [ [ 'core/button' ] ]; -// Inside buttons block alignment options are not supported. -const alignmentHooksSetting = { - isEmbedButton: true, -}; - function ButtonsEdit() { const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( blockProps, { allowedBlocks: ALLOWED_BLOCKS, template: BUTTONS_TEMPLATE, orientation: 'horizontal', + __experimentalLayout: { + type: 'default', + alignments: [], + }, } ); - return ( - -
- - ); + return
; } export default ButtonsEdit; diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 307a8b19634aa..7c35a762935c9 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -7,10 +7,7 @@ import { View } from 'react-native'; /** * WordPress dependencies */ -import { - __experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider, - InnerBlocks, -} from '@wordpress/block-editor'; +import { InnerBlocks } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { useResizeObserver } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -97,15 +94,10 @@ export default function ButtonsEdit( { ) ); - // Inside buttons block alignment options are not supported. - const alignmentHooksSetting = { - isEmbedButton: true, - }; - const shouldRenderFooterAppender = isSelected || isInnerButtonSelected; return ( - + <> { resizeObserver } - + ); }