[Mobile] Moves block settings and more button to the toolbar (#52289)

* Remove BlockMobileToolbar

* Refactor BlockSettingsButton

* Update BlockToolbar with new order for buttons

* Clean up BlockMobileToolbar refactor

* Update EditorPage with new swipeToolbarToElement and updates removeBlock, toggleFormatting and addBlock helpers

* Update E2E Tests

* Update BlockList to remove inline block settings options

* Update Gallery test

* Update BlockDraggable test

* Update BlockMover

* EditorPage utils - Update swipeToolbarToElement to take into account swiping to the right

Author: Gerardo Pacheco

packages/block-editor/src/components/block-draggable/test/index.native.js

@@ -133,16 +133,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						paragraphBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 
 			it( 'does not enable drag mode when selected and editing text', async () =>
@@ -243,16 +233,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						imageBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 
@@ -301,16 +281,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						galleryBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 
 			it( 'enables drag mode when nested block is selected', async () =>
@@ -336,20 +306,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// After dropping the block, the gallery item gets automatically selected.
-					// Hence, we have to select the gallery item again.
-					fireEvent.press( galleryItem );
-
-					// Start dragging from nested block's mobile toolbar
-					fireLongPress(
-						galleryItem,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 
@@ -390,16 +346,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						spacerBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 	} );

packages/block-editor/src/components/block-list/block.native.js

@@ -6,12 +6,11 @@ import { Pressable, useWindowDimensions, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo, useRef, useState } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
 import {
 	GlobalStylesContext,
 	getMergedGlobalStyles,
 	useMobileGlobalStylesColors,
-	alignmentHelpers,
 	useGlobalStyles,
 } from '@wordpress/components';
 import {
@@ -36,9 +35,7 @@ import { compose, ifCondition, pure } from '@wordpress/compose';
 import BlockEdit from '../block-edit';
 import BlockDraggable from '../block-draggable';
 import BlockInvalidWarning from './block-invalid-warning';
-import BlockMobileToolbar from '../block-mobile-toolbar';
 import BlockOutline from './block-outline';
-import styles from './block.scss';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
 import useSetting from '../use-setting';
@@ -63,27 +60,19 @@ function getWrapperProps( value, getWrapperPropsFunction ) {
 
 function BlockWrapper( {
 	accessibilityLabel,
-	align,
-	blockWidth,
 	children,
 	clientId,
 	draggingClientId,
 	draggingEnabled,
 	isDescendentBlockSelected,
 	isParentSelected,
 	isSelected,
-	isStackedHorizontally,
 	isTouchable,
 	marginHorizontal,
 	marginVertical,
-	onDeleteBlock,
 	onFocus,
 } ) {
 	const { width: screenWidth } = useWindowDimensions();
-	const anchorNodeRef = useRef();
-	const { isFullWidth } = alignmentHelpers;
-	const isScreenWidthEqual = blockWidth === screenWidth;
-	const isFullWidthToolbar = isFullWidth( align ) || isScreenWidthEqual;
 	const blockWrapperStyles = { flex: 1 };
 	const blockWrapperStyle = [
 		blockWrapperStyles,
@@ -116,19 +105,6 @@ function BlockWrapper( {
 			>
 				{ children }
 			</BlockDraggable>
-			<View style={ styles.neutralToolbar } ref={ anchorNodeRef }>
-				{ isSelected && (
-					<BlockMobileToolbar
-						anchorNodeRef={ anchorNodeRef.current }
-						blockWidth={ blockWidth }
-						clientId={ clientId }
-						draggingClientId={ draggingClientId }
-						isFullWidth={ isFullWidthToolbar }
-						isStackedHorizontally={ isStackedHorizontally }
-						onDelete={ onDeleteBlock }
-					/>
-				) }
-			</View>
 		</Pressable>
 	);
 }
@@ -295,7 +271,6 @@ function BlockListBlock( {
 		),
 	] );
 
-	const { align } = attributes;
 	const isFocused = isSelected || isDescendentBlockSelected;
 	const isTouchable =
 		isSelected ||
@@ -312,8 +287,6 @@ function BlockListBlock( {
 	return (
 		<BlockWrapper
 			accessibilityLabel={ accessibilityLabel }
-			align={ align }
-			blockWidth={ blockWidth }
 			clientId={ clientId }
 			draggingClientId={ draggingClientId }
 			draggingEnabled={ draggingEnabled }
@@ -325,7 +298,6 @@ function BlockListBlock( {
 			isTouchable={ isTouchable }
 			marginHorizontal={ marginHorizontal }
 			marginVertical={ marginVertical }
-			onDeleteBlock={ onDeleteBlock }
 			onFocus={ onFocus }
 		>
 			{ () =>

packages/block-editor/src/components/block-list/block.native.scss

@@ -51,15 +51,10 @@
 	min-height: 50px;
 }
 
-.neutralToolbar {
-	margin-left: -$block-edge-to-content;
-	margin-right: -$block-edge-to-content;
-}
-
 .solidBorder {
 	position: absolute;
 	top: -$solid-border-space;
-	bottom: 0;
+	bottom: -$solid-border-space;
 	left: -$solid-border-space;
 	right: -$solid-border-space;
 	border-width: $block-selected-border-width;

packages/block-editor/src/components/block-mobile-toolbar/index.native.js

@@ -7,7 +7,7 @@ import { Platform } from 'react-native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Picker, ToolbarButton } from '@wordpress/components';
+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';
@@ -107,7 +107,7 @@ export const BlockMover = ( {
 	}
 
 	return (
-		<>
+		<ToolbarGroup>
 			<ToolbarButton
 				title={ ! isFirst ? backwardButtonTitle : firstBlockTitle }
 				isDisabled={ isFirst }
@@ -136,7 +136,7 @@ export const BlockMover = ( {
 				leftAlign={ true }
 				hideCancelButton={ Platform.OS !== 'ios' }
 			/>
-		</>
+		</ToolbarGroup>
 	);
 };