From 4dbd8c7f87651d12898a55ae853b1458a0d6e406 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 2 Jul 2020 09:52:40 +0800 Subject: [PATCH] Stabilize __experimentalMoverDirection InnerBlocks prop and rename to orientation (#23416) * Rename mover direction to block list orientation * Rename to orientation and stabilize * Remove moverDirection prop from BlockSelectionButton. Use selector instead. * Use double-quotes for string prop value Co-authored-by: Riad Benguella --- .../components/block-list/block-popover.js | 9 --------- .../block-list/block-selection-button.js | 20 ++++++++++--------- .../src/components/block-list/index.js | 9 ++++----- .../src/components/block-list/index.native.js | 11 ++++------ .../src/components/block-mover/button.js | 20 +++++++------------ .../src/components/block-toolbar/index.js | 11 +--------- .../src/components/inner-blocks/index.js | 4 ++-- .../components/inner-blocks/index.native.js | 4 ++-- .../use-nested-settings-update.js | 14 ++++++------- .../components/use-block-drop-zone/index.js | 8 ++++---- packages/block-library/src/buttons/edit.js | 2 +- .../block-library/src/buttons/edit.native.js | 2 +- packages/block-library/src/columns/edit.js | 2 +- .../block-library/src/columns/edit.native.js | 2 +- packages/block-library/src/navigation/edit.js | 2 +- .../block-library/src/social-links/edit.js | 2 +- 16 files changed, 48 insertions(+), 74 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js index 7a45d1fe61d37a..87ca8ebd55a555 100644 --- a/packages/block-editor/src/components/block-list/block-popover.js +++ b/packages/block-editor/src/components/block-list/block-popover.js @@ -47,7 +47,6 @@ function BlockPopover( { clientId, rootClientId, isValid, - moverDirection, isEmptyDefaultBlock, capturingClientId, } ) { @@ -195,7 +194,6 @@ function BlockPopover( { ) } { showEmptyBlockSideInserter && ( @@ -219,7 +217,6 @@ function wrapperSelector( select ) { getBlockRootClientId, __unstableGetBlockWithoutInnerBlocks, getBlockParents, - getBlockListSettings, __experimentalGetBlockListSettingsForBlocks, } = select( 'core/block-editor' ); @@ -230,12 +227,9 @@ function wrapperSelector( select ) { return; } - const rootClientId = getBlockRootClientId( clientId ); const { name, attributes = {}, isValid } = __unstableGetBlockWithoutInnerBlocks( clientId ) || {}; const blockParentsClientIds = getBlockParents( clientId ); - const { __experimentalMoverDirection } = - getBlockListSettings( rootClientId ) || {}; // Get Block List Settings for all ancestors of the current Block clientId const ancestorBlockListSettings = __experimentalGetBlockListSettingsForBlocks( @@ -263,7 +257,6 @@ function wrapperSelector( select ) { rootClientId: getBlockRootClientId( clientId ), name, isValid, - moverDirection: __experimentalMoverDirection, isEmptyDefaultBlock: name && isUnmodifiedDefaultBlock( { name, attributes } ), capturingClientId, @@ -282,7 +275,6 @@ export default function WrappedBlockPopover() { rootClientId, name, isValid, - moverDirection, isEmptyDefaultBlock, capturingClientId, } = selected; @@ -296,7 +288,6 @@ export default function WrappedBlockPopover() { clientId={ clientId } rootClientId={ rootClientId } isValid={ isValid } - moverDirection={ moverDirection } isEmptyDefaultBlock={ isEmptyDefaultBlock } capturingClientId={ capturingClientId } /> diff --git a/packages/block-editor/src/components/block-list/block-selection-button.js b/packages/block-editor/src/components/block-list/block-selection-button.js index 75cfe961690a6a..5e9f9326cacb05 100644 --- a/packages/block-editor/src/components/block-list/block-selection-button.js +++ b/packages/block-editor/src/components/block-list/block-selection-button.js @@ -30,29 +30,31 @@ import BlockTitle from '../block-title'; * * @return {WPComponent} The component to be rendered. */ -function BlockSelectionButton( { - clientId, - rootClientId, - moverDirection, - ...props -} ) { +function BlockSelectionButton( { clientId, rootClientId, ...props } ) { const selected = useSelect( ( select ) => { const { __unstableGetBlockWithoutInnerBlocks, getBlockIndex, hasBlockMovingClientId, + getBlockListSettings, } = select( 'core/block-editor' ); const index = getBlockIndex( clientId, rootClientId ); const { name, attributes } = __unstableGetBlockWithoutInnerBlocks( clientId ); const blockMovingMode = hasBlockMovingClientId(); - return { index, name, attributes, blockMovingMode }; + return { + index, + name, + attributes, + blockMovingMode, + orientation: getBlockListSettings( rootClientId )?.orientation, + }; }, [ clientId, rootClientId ] ); - const { index, name, attributes, blockMovingMode } = selected; + const { index, name, attributes, blockMovingMode, orientation } = selected; const { setNavigationMode, removeBlock } = useDispatch( 'core/block-editor' ); @@ -77,7 +79,7 @@ function BlockSelectionButton( { blockType, attributes, index + 1, - moverDirection + orientation ); const classNames = classnames( diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 92eb185ee4bd4c..48acece1a9fa66 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -49,8 +49,7 @@ function BlockList( blockClientIds: getBlockOrder( rootClientId ), selectedBlockClientId: getSelectedBlockClientId(), multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(), - moverDirection: getBlockListSettings( rootClientId ) - ?.__experimentalMoverDirection, + orientation: getBlockListSettings( rootClientId )?.orientation, hasMultiSelection: hasMultiSelection(), enableAnimation: ! isTyping() && @@ -62,7 +61,7 @@ function BlockList( blockClientIds, selectedBlockClientId, multiSelectedBlockClientIds, - moverDirection, + orientation, hasMultiSelection, enableAnimation, } = useSelect( selector, [ rootClientId ] ); @@ -109,7 +108,7 @@ function BlockList( 'is-drop-target': isDropTarget, 'is-dropping-horizontally': isDropTarget && - moverDirection === 'horizontal', + orientation === 'horizontal', } ) } /> @@ -122,7 +121,7 @@ function BlockList( className={ classnames( { 'is-drop-target': isAppenderDropTarget, 'is-dropping-horizontally': - isAppenderDropTarget && moverDirection === 'horizontal', + isAppenderDropTarget && orientation === 'horizontal', } ) } /> diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 189b261a67eb98..7a5fff6af34d57 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -311,7 +311,7 @@ export class BlockList extends Component { } export default compose( [ - withSelect( ( select, { rootClientId, __experimentalMoverDirection } ) => { + withSelect( ( select, { rootClientId, orientation } ) => { const { getBlockCount, getBlockOrder, @@ -321,8 +321,7 @@ export default compose( [ getBlockHierarchyRootClientId, } = select( 'core/block-editor' ); - const isStackedHorizontally = - __experimentalMoverDirection === 'horizontal'; + const isStackedHorizontally = orientation === 'horizontal'; const selectedBlockClientId = getSelectedBlockClientId(); const blockClientIds = getBlockOrder( rootClientId ); @@ -383,16 +382,14 @@ class EmptyListComponent extends Component { } const EmptyListComponentCompose = compose( [ - withSelect( ( select, { rootClientId, __experimentalMoverDirection } ) => { + withSelect( ( select, { rootClientId, orientation } ) => { const { getBlockOrder, getBlockInsertionPoint, isBlockInsertionPointVisible, } = select( 'core/block-editor' ); - const isStackedHorizontally = - __experimentalMoverDirection === 'horizontal'; - + const isStackedHorizontally = orientation === 'horizontal'; const blockClientIds = getBlockOrder( rootClientId ); const insertionPoint = getBlockInsertionPoint(); const blockInsertionPointIsVisible = isBlockInsertionPointVisible(); diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js index 41ff9e859a0939..d1b4f4b5df2cbb 100644 --- a/packages/block-editor/src/components/block-mover/button.js +++ b/packages/block-editor/src/components/block-mover/button.js @@ -57,12 +57,7 @@ const getMovementDirectionLabel = ( moveDirection, orientation, isRTL ) => { const BlockMoverButton = forwardRef( ( - { - clientIds, - direction, - __experimentalOrientation: orientation, - ...props - }, + { clientIds, direction, orientation: moverOrientation, ...props }, ref ) => { const instanceId = useInstanceId( BlockMoverButton ); @@ -76,7 +71,7 @@ const BlockMoverButton = forwardRef( isLast, firstIndex, isRTL, - moverOrientation, + orientation = 'vertical', } = useSelect( ( select ) => { const { @@ -102,7 +97,7 @@ const BlockMoverButton = forwardRef( const block = getBlock( firstClientId ); const isFirstBlock = firstBlockIndex === 0; const isLastBlock = lastBlockIndex === blockOrder.length - 1; - const { __experimentalMoverDirection = 'vertical' } = + const { orientation: blockListOrientation } = getBlockListSettings( blockRootClientId ) || {}; return { @@ -113,8 +108,7 @@ const BlockMoverButton = forwardRef( isFirst: isFirstBlock, isLast: isLastBlock, isRTL: getSettings().isRTL, - moverOrientation: - orientation || __experimentalMoverDirection, + orientation: moverOrientation || blockListOrientation, }; }, [ clientIds, direction ] @@ -143,10 +137,10 @@ const BlockMoverButton = forwardRef( 'block-editor-block-mover-button', `is-${ direction }-button` ) } - icon={ getArrowIcon( direction, moverOrientation, isRTL ) } + icon={ getArrowIcon( direction, orientation, isRTL ) } label={ getMovementDirectionLabel( direction, - moverOrientation, + orientation, isRTL ) } aria-describedby={ descriptionId } @@ -165,7 +159,7 @@ const BlockMoverButton = forwardRef( isFirst, isLast, direction === 'up' ? -1 : 1, - moverOrientation, + orientation, isRTL ) } diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index f4014ff2fe4294..daab7d6fe91db7 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -31,7 +31,6 @@ export default function BlockToolbar( { hideDragHandle } ) { hasFixedToolbar, isValid, isVisual, - moverDirection, } = useSelect( ( select ) => { const { getBlockName, @@ -39,16 +38,12 @@ export default function BlockToolbar( { hideDragHandle } ) { getSelectedBlockClientIds, isBlockValid, getBlockRootClientId, - getBlockListSettings, getSettings, } = select( 'core/block-editor' ); const selectedBlockClientIds = getSelectedBlockClientIds(); const selectedBlockClientId = selectedBlockClientIds[ 0 ]; const blockRootClientId = getBlockRootClientId( selectedBlockClientId ); - const { __experimentalMoverDirection } = - getBlockListSettings( blockRootClientId ) || {}; - return { blockClientIds: selectedBlockClientIds, blockClientId: selectedBlockClientId, @@ -63,7 +58,6 @@ export default function BlockToolbar( { hideDragHandle } ) { isVisual: selectedBlockClientIds.every( ( id ) => getBlockMode( id ) === 'visual' ), - moverDirection: __experimentalMoverDirection, }; }, [] ); @@ -130,10 +124,7 @@ export default function BlockToolbar( { hideDragHandle } ) { onDragEnd={ onDraggableEnd } > - + ) } diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index aa365171b94c31..668c6c5e89a07e 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -45,7 +45,7 @@ function UncontrolledInnerBlocks( props ) { forwardedRef, templateInsertUpdatesSelection, __experimentalCaptureToolbars: captureToolbars, - __experimentalMoverDirection, + orientation, } = props; const isSmallScreen = useViewportMatch( 'medium', '<' ); @@ -73,7 +73,7 @@ function UncontrolledInnerBlocks( props ) { allowedBlocks, templateLock, captureToolbars, - __experimentalMoverDirection + orientation ); useInnerBlockTemplateSync( diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js index e1a472b870f780..c2c0a0025c4a81 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -36,7 +36,7 @@ function UncontrolledInnerBlocks( props ) { template, templateLock, templateInsertUpdatesSelection, - __experimentalMoverDirection, + orientation, renderAppender, renderFooterAppender, parentWidth, @@ -72,7 +72,7 @@ function UncontrolledInnerBlocks( props ) { renderAppender={ renderAppender } renderFooterAppender={ renderFooterAppender } withFooter={ false } - __experimentalMoverDirection={ __experimentalMoverDirection } + orientation={ orientation } parentWidth={ parentWidth } horizontalAlignment={ horizontalAlignment } horizontal={ horizontal } diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js index cdc207e9bd2b74..fce14520c414d2 100644 --- a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js +++ b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js @@ -6,10 +6,10 @@ import { useSelect, useDispatch } from '@wordpress/data'; import isShallowEqual from '@wordpress/is-shallow-equal'; /** - * This hook is a side efect which updates the block-editor store when changes + * This hook is a side effect which updates the block-editor store when changes * happen to inner block settings. The given props are transformed into a * settings object, and if that is different from the current settings object in - * the block-ediotr store, then the store is updated with the new settings which + * the block-editor store, then the store is updated with the new settings which * came from props. * * @param {string} clientId The client ID of the block to update. @@ -20,7 +20,7 @@ import isShallowEqual from '@wordpress/is-shallow-equal'; * @param {boolean} captureToolbars Whether or children toolbars should be shown * in the inner blocks component rather than on * the child block. - * @param {string} __experimentalMoverDirection The direction in which the block + * @param {string} orientation The direction in which the block * should face. */ export default function useNestedSettingsUpdate( @@ -28,7 +28,7 @@ export default function useNestedSettingsUpdate( allowedBlocks, templateLock, captureToolbars, - __experimentalMoverDirection + orientation ) { const { updateBlockListSettings } = useDispatch( 'core/block-editor' ); @@ -62,8 +62,8 @@ export default function useNestedSettingsUpdate( newSettings.__experimentalCaptureToolbars = captureToolbars; } - if ( __experimentalMoverDirection !== undefined ) { - newSettings.__experimentalMoverDirection = __experimentalMoverDirection; + if ( orientation !== undefined ) { + newSettings.orientation = orientation; } if ( ! isShallowEqual( blockListSettings, newSettings ) ) { @@ -76,7 +76,7 @@ export default function useNestedSettingsUpdate( templateLock, parentLock, captureToolbars, - __experimentalMoverDirection, + orientation, updateBlockListSettings, ] ); } diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js index 3a4d04b1d97171..f1c1b057354ba4 100644 --- a/packages/block-editor/src/components/use-block-drop-zone/index.js +++ b/packages/block-editor/src/components/use-block-drop-zone/index.js @@ -173,8 +173,8 @@ export default function useBlockDropZone( { } = select( 'core/block-editor' ); return { getBlockIndex, - moverDirection: getBlockListSettings( targetRootClientId ) - ?.__experimentalMoverDirection, + orientation: getBlockListSettings( targetRootClientId ) + ?.orientation, getClientIdsOfDescendants, hasUploadPermissions: !! getSettings().mediaUpload, isLockedAll: getTemplateLock( targetRootClientId ) === 'all', @@ -186,7 +186,7 @@ export default function useBlockDropZone( { getClientIdsOfDescendants, hasUploadPermissions, isLockedAll, - moverDirection, + orientation, } = useSelect( selector, [ targetRootClientId ] ); const { insertBlocks, @@ -311,7 +311,7 @@ export default function useBlockDropZone( { const targetIndex = getNearestBlockIndex( blockElements, position, - moverDirection + orientation ); if ( targetIndex === undefined ) { diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js index f6aa94582b3a6c..8c32ba26e72061 100644 --- a/packages/block-library/src/buttons/edit.js +++ b/packages/block-library/src/buttons/edit.js @@ -27,7 +27,7 @@ function ButtonsEdit() { diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 9e28f7c3e0b6a5..9fdee71920b60f 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -68,7 +68,7 @@ function ButtonsEdit( { renderFooterAppender={ shouldRenderFooterAppender && renderFooterAppender.current } - __experimentalMoverDirection="horizontal" + orientation="horizontal" horizontalAlignment={ align } onDeleteBlock={ shouldDelete ? onDelete : undefined } onAddBlock={ onAddNextButton } diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index f5f3fc619f0d5a..23f5e4e2bc7a8f 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -91,7 +91,7 @@ function ColumnsEditContainer( { 1 ? 'horizontal' : undefined } horizontal={ true } diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 965cae3a1b8501..9663d471788c95 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -202,7 +202,7 @@ function Navigation( { : false } templateInsertUpdatesSelection={ false } - __experimentalMoverDirection={ + orientation={ attributes.orientation || 'horizontal' } __experimentalTagName="ul" diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 22985c919e3aa8..041b0816839f62 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -28,7 +28,7 @@ export function SocialLinksEdit() { allowedBlocks={ ALLOWED_BLOCKS } templateLock={ false } template={ TEMPLATE } - __experimentalMoverDirection={ 'horizontal' } + orientation="horizontal" __experimentalTagName={ Block.ul } __experimentalAppenderTagName="li" />