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 <benguella@gmail.com>
WordPress · Jul 2, 2020 · 4dbd8c7 · 4dbd8c7
1 parent 64fa678
commit 4dbd8c7
Show file tree

Hide file tree

Showing 16 changed files with 48 additions and 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
@@ -47,7 +47,6 @@ function BlockPopover( {
 	clientId,
 	rootClientId,
 	isValid,
-	moverDirection,
 	isEmptyDefaultBlock,
 	capturingClientId,
 } ) {
@@ -195,7 +194,6 @@ function BlockPopover( {
 				<BlockSelectionButton
 					clientId={ clientId }
 					rootClientId={ rootClientId }
-					moverDirection={ moverDirection }
 				/>
 			) }
 			{ 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
@@ -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
@@ -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',
 							} ) }
 						/>
 					</AsyncModeProvider>
@@ -122,7 +121,7 @@ function BlockList(
 				className={ classnames( {
 					'is-drop-target': isAppenderDropTarget,
 					'is-dropping-horizontally':
-						isAppenderDropTarget && moverDirection === 'horizontal',
+						isAppenderDropTarget && orientation === 'horizontal',
 				} ) }
 			/>
 		</Container>

diff --git 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
@@ -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
 					) }
 				</span>

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -31,24 +31,19 @@ export default function BlockToolbar( { hideDragHandle } ) {
 		hasFixedToolbar,
 		isValid,
 		isVisual,
-		moverDirection,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
 			getBlockMode,
 			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 }
 							>
 								<BlockSwitcher clientIds={ blockClientIds } />
-								<BlockMover
-									clientIds={ blockClientIds }
-									__experimentalOrientation={ moverDirection }
-								/>
+								<BlockMover clientIds={ blockClientIds } />
 							</div>
 						) }
 					</BlockDraggable>

diff --git 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
@@ -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
@@ -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,15 +20,15 @@ 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(
 	clientId,
 	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,
 	] );
 }