@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/block-mover/index.native.js

@@ -1,193 +0,0 @@
-/**
- * External dependencies
- */
-import { Platform } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Picker, ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { withInstanceId, compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { getMoversSetup } from './mover-description';
-import { store as blockEditorStore } from '../../store';
-
-export const BLOCK_MOVER_DIRECTION_TOP = 'blockPageMoverOptions-moveToTop';
-export const BLOCK_MOVER_DIRECTION_BOTTOM =
-	'blockPageMoverOptions-moveToBottom';
-
-export const BlockMover = ( {
-	isFirst,
-	isLast,
-	canMove,
-	onMoveDown,
-	onMoveUp,
-	onLongMove,
-	firstIndex,
-	numberOfBlocks,
-	rootClientId,
-	isStackedHorizontally,
-} ) => {
-	const pickerRef = useRef();
-	const [ shouldPresentPicker, setShouldPresentPicker ] = useState( false );
-	const [ blockPageMoverState, setBlockPageMoverState ] =
-		useState( undefined );
-	const showBlockPageMover = ( direction ) => () => {
-		if ( ! pickerRef.current ) {
-			setBlockPageMoverState( undefined );
-			return;
-		}
-
-		setBlockPageMoverState( direction );
-		setShouldPresentPicker( true );
-	};
-
-	// Ensure that the picker is only presented after state updates.
-	useEffect( () => {
-		if ( shouldPresentPicker ) {
-			pickerRef.current?.presentPicker();
-			setShouldPresentPicker( false );
-		}
-	}, [ shouldPresentPicker ] );
-
-	const {
-		description: {
-			backwardButtonHint,
-			forwardButtonHint,
-			firstBlockTitle,
-			lastBlockTitle,
-		},
-		icon: { backward: backwardButtonIcon, forward: forwardButtonIcon },
-		title: { backward: backwardButtonTitle, forward: forwardButtonTitle },
-	} = getMoversSetup( isStackedHorizontally, { firstIndex } );
-
-	const blockPageMoverOptions = [
-		{
-			icon: backwardButtonIcon,
-			label: __( 'Move to top' ),
-			value: BLOCK_MOVER_DIRECTION_TOP,
-			onSelect: () => {
-				onLongMove()( 0 );
-			},
-		},
-		{
-			icon: forwardButtonIcon,
-			label: __( 'Move to bottom' ),
-			value: BLOCK_MOVER_DIRECTION_BOTTOM,
-			onSelect: () => {
-				onLongMove()( numberOfBlocks );
-			},
-		},
-	].filter( ( el ) => el.value === blockPageMoverState );
-
-	const onPickerSelect = ( value ) => {
-		const option = blockPageMoverOptions.find(
-			( el ) => el.value === value
-		);
-		if ( option && option.onSelect ) {
-			option.onSelect();
-		}
-	};
-
-	const onLongPressMoveUp = useCallback(
-		showBlockPageMover( BLOCK_MOVER_DIRECTION_TOP ),
-		[]
-	);
-	const onLongPressMoveDown = useCallback(
-		showBlockPageMover( BLOCK_MOVER_DIRECTION_BOTTOM ),
-		[]
-	);
-
-	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
-		return null;
-	}
-
-	return (
-		<ToolbarGroup>
-			<ToolbarButton
-				title={ ! isFirst ? backwardButtonTitle : firstBlockTitle }
-				isDisabled={ isFirst }
-				onClick={ onMoveUp }
-				onLongPress={ onLongPressMoveUp }
-				icon={ backwardButtonIcon }
-				extraProps={ { hint: backwardButtonHint } }
-			/>
-
-			<ToolbarButton
-				title={ ! isLast ? forwardButtonTitle : lastBlockTitle }
-				isDisabled={ isLast }
-				onClick={ onMoveDown }
-				onLongPress={ onLongPressMoveDown }
-				icon={ forwardButtonIcon }
-				extraProps={ {
-					hint: forwardButtonHint,
-				} }
-			/>
-
-			<Picker
-				ref={ pickerRef }
-				options={ blockPageMoverOptions }
-				onChange={ onPickerSelect }
-				title={ __( 'Change block position' ) }
-				leftAlign
-				hideCancelButton={ Platform.OS !== 'ios' }
-			/>
-		</ToolbarGroup>
-	);
-};
-
-export default compose(
-	withSelect( ( select, { clientIds } ) => {
-		const {
-			getBlockIndex,
-			canMoveBlocks,
-			getBlockRootClientId,
-			getBlockOrder,
-		} = select( blockEditorStore );
-		const normalizedClientIds = Array.isArray( clientIds )
-			? clientIds
-			: [ clientIds ];
-		const firstClientId = normalizedClientIds[ 0 ];
-		const rootClientId = getBlockRootClientId( firstClientId );
-		const blockOrder = getBlockOrder( rootClientId );
-		const firstIndex = getBlockIndex( firstClientId );
-		const lastIndex = getBlockIndex(
-			normalizedClientIds[ normalizedClientIds.length - 1 ]
-		);
-
-		return {
-			firstIndex,
-			numberOfBlocks: blockOrder.length - 1,
-			isFirst: firstIndex === 0,
-			isLast: lastIndex === blockOrder.length - 1,
-			canMove: canMoveBlocks( clientIds ),
-			rootClientId,
-		};
-	} ),
-	withDispatch( ( dispatch, { clientIds, rootClientId } ) => {
-		const { moveBlocksDown, moveBlocksUp, moveBlocksToPosition } =
-			dispatch( blockEditorStore );
-		return {
-			onMoveDown: ( ...args ) =>
-				moveBlocksDown( clientIds, rootClientId, ...args ),
-			onMoveUp: ( ...args ) =>
-				moveBlocksUp( clientIds, rootClientId, ...args ),
-			onLongMove:
-				( targetIndex ) =>
-				( ...args ) =>
-					moveBlocksToPosition(
-						clientIds,
-						rootClientId,
-						targetIndex,
-						...args
-					),
-		};
-	} ),
-	withInstanceId
-)( BlockMover );

package/src/components/block-mover/mover-description.native.js

@@ -1,155 +0,0 @@
-/**
- * External dependencies
- */
-import { I18nManager } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { arrowUp, arrowDown, arrowLeft, arrowRight } from '@wordpress/icons';
-
-const horizontalMover = {
-	backwardButtonIcon: arrowLeft,
-	forwardButtonIcon: arrowRight,
-	backwardButtonHint: __( 'Double tap to move the block to the left' ),
-	forwardButtonHint: __( 'Double tap to move the block to the right' ),
-	firstBlockTitle: __( 'Move block left' ),
-	lastBlockTitle: __( 'Move block right' ),
-	/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
-	backwardButtonTitle: __(
-		'Move block left from position %1$s to position %2$s'
-	),
-	/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
-	forwardButtonTitle: __(
-		'Move block right from position %1$s to position %2$s'
-	),
-};
-
-const verticalMover = {
-	backwardButtonIcon: arrowUp,
-	forwardButtonIcon: arrowDown,
-	backwardButtonHint: __( 'Double tap to move the block up' ),
-	forwardButtonHint: __( 'Double tap to move the block down' ),
-	firstBlockTitle: __( 'Move block up' ),
-	lastBlockTitle: __( 'Move block down' ),
-	/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
-	backwardButtonTitle: __( 'Move block up from row %1$s to row %2$s' ),
-	/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
-	forwardButtonTitle: __( 'Move block down from row %1$s to row %2$s' ),
-};
-
-const KEYS = [ 'description', 'icon', 'title', 'actionTitle' ];
-
-const SETUP_GETTER = {
-	description: getMoverDescription,
-	icon: getArrowIcon,
-	title: getMoverButtonTitle,
-	actionTitle: getMoverActionTitle,
-};
-
-export function getMoversSetup(
-	isStackedHorizontally,
-	{ firstIndex, keys = KEYS }
-) {
-	return keys.reduce( ( setup, key ) => {
-		if ( KEYS.includes( key ) ) {
-			Object.assign( setup, {
-				[ key ]: getSetup( key, isStackedHorizontally, {
-					firstIndex,
-				} ),
-			} );
-		}
-		return setup;
-	}, {} );
-}
-
-function switchButtonPropIfRTL(
-	isBackwardButton,
-	forwardButtonProp,
-	backwardButtonProp,
-	isStackedHorizontally
-) {
-	if ( I18nManager.isRTL && isStackedHorizontally ) {
-		// For RTL and horizontal direction switch prop between forward and backward button.
-		if ( isBackwardButton ) {
-			return forwardButtonProp; // Set forwardButtonProp for backward button.
-		}
-		return backwardButtonProp; // Set backwardButtonProp for forward button.
-	}
-
-	return isBackwardButton ? backwardButtonProp : forwardButtonProp;
-}
-
-function getSetup() {
-	const [ key, ...args ] = arguments;
-	return SETUP_GETTER[ key ].apply( null, [ ...args ] );
-}
-
-function applyRTLSetup( isBackwardButton, args ) {
-	return switchButtonPropIfRTL.apply( null, [ isBackwardButton, ...args ] );
-}
-
-function getMoverDescription( isStackedHorizontally ) {
-	return isStackedHorizontally ? horizontalMover : verticalMover;
-}
-
-function getArrowIcon( isStackedHorizontally ) {
-	const { forwardButtonIcon, backwardButtonIcon } = getMoverDescription(
-		isStackedHorizontally
-	);
-
-	const args = [
-		forwardButtonIcon,
-		backwardButtonIcon,
-		isStackedHorizontally,
-	];
-
-	return {
-		backward: applyRTLSetup( true, args ),
-		forward: applyRTLSetup( false, args ),
-	};
-}
-
-function getMoverActionTitle( isStackedHorizontally ) {
-	const { firstBlockTitle, lastBlockTitle } = getMoverDescription(
-		isStackedHorizontally
-	);
-
-	const args = [ lastBlockTitle, firstBlockTitle, isStackedHorizontally ];
-
-	const actionTitlePrev = applyRTLSetup( true, args );
-	const actionTitleNext = applyRTLSetup( false, args );
-
-	return {
-		backward: sprintf( actionTitlePrev, firstBlockTitle ),
-		forward: sprintf( actionTitleNext, lastBlockTitle ),
-	};
-}
-
-function getMoverButtonTitle( isStackedHorizontally, { firstIndex } ) {
-	const getIndexes = ( isBackwardButton ) => {
-		const fromIndex = firstIndex + 1; // Current position based on index
-		// for backwardButton decrease index (move left/up) for forwardButton increase index (move right/down)
-		const direction = isBackwardButton ? -1 : 1;
-		const toIndex = fromIndex + direction; // Position after move.
-		return [ fromIndex, toIndex ];
-	};
-
-	const { backwardButtonTitle, forwardButtonTitle } = getMoverDescription(
-		isStackedHorizontally
-	);
-
-	const args = [
-		forwardButtonTitle,
-		backwardButtonTitle,
-		isStackedHorizontally,
-	];
-
-	const buttonTitlePrev = applyRTLSetup( true, args );
-	const buttonTitleNext = applyRTLSetup( false, args );
-
-	return {
-		backward: sprintf( buttonTitlePrev, ...getIndexes( true ) ),
-		forward: sprintf( buttonTitleNext, ...getIndexes( false ) ),
-	};
-}

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -1,218 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Block Mover Picker moving blocks disables the Move Down button for the last block 1`] = `
-"<!-- wp:paragraph -->
-<p>Hello!</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:spacer -->
-<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
-<!-- wp:heading -->
-<h2 class="wp-block-heading"></h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Block Mover Picker moving blocks disables the Move Up button for the first block 1`] = `
-"<!-- wp:paragraph -->
-<p>Hello!</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:spacer -->
-<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
-<!-- wp:heading -->
-<h2 class="wp-block-heading"></h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
-"<!-- wp:heading -->
-<h2 class="wp-block-heading"></h2>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p>Hello!</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:spacer -->
-<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->"
-`;
-
-exports[`Block Mover Picker should render without crashing and match snapshot 1`] = `
-<View
-  style={
-    [
-      {
-        "height": 44,
-      },
-      {
-        "borderLeftWidth": 0.5,
-      },
-      undefined,
-    ]
-  }
->
-  <View>
-    <View
-      accessibilityHint="Double tap to move the block to the left"
-      accessibilityLabel="Move block left from position 2 to position 1"
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        {
-          "alignItems": "center",
-          "flex": 1,
-          "justifyContent": "center",
-          "opacity": 1,
-          "padding": 3,
-        }
-      }
-    >
-      <View
-        collapsable={false}
-        handlerTag={1}
-        handlerType="LongPressGestureHandler"
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        style={
-          {
-            "alignItems": "center",
-            "aspectRatio": 1,
-            "flex": 1,
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "opacity": 1,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "flexDirection": "row",
-            }
-          }
-        >
-          <Svg
-            height={24}
-            style={{}}
-            viewBox="0 0 24 24"
-            width={24}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            Path
-          </Svg>
-        </View>
-      </View>
-    </View>
-  </View>
-  <View>
-    <View
-      accessibilityHint="Double tap to move the block to the right"
-      accessibilityLabel="Move block right"
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        {
-          "alignItems": "center",
-          "flex": 1,
-          "justifyContent": "center",
-          "opacity": 1,
-          "padding": 3,
-        }
-      }
-    >
-      <View
-        collapsable={false}
-        handlerTag={2}
-        handlerType="LongPressGestureHandler"
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        style={
-          {
-            "alignItems": "center",
-            "aspectRatio": 1,
-            "flex": 1,
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "opacity": 0.3,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "flexDirection": "row",
-            }
-          }
-        >
-          <Svg
-            height={24}
-            style={{}}
-            viewBox="0 0 24 24"
-            width={24}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            Path
-          </Svg>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;