[RNMobile] Some tweaks in block picker (#23465)

WordPress · Jun 29, 2020 · 40be8a5 · 40be8a5
1 parent 46aae04
commit 40be8a5
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 30 deletions.
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
@@ -33,7 +33,7 @@ const BlockActionsMenu = ( {
 	anchorNodeRef,
 } ) => {
 	const pickerRef = useRef();
-	const moversOptions = { keys: [ 'icon', 'actionTitle' ], blockTitle };
+	const moversOptions = { keys: [ 'icon', 'actionTitle' ] };
 
 	const {
 		icon: { backward: backwardButtonIcon, forward: forwardButtonIcon },
@@ -45,8 +45,7 @@ const BlockActionsMenu = ( {
 
 	const deleteOption = {
 		id: 'deleteOption',
-		// translators: %s: block title e.g: "Paragraph".
-		label: sprintf( __( 'Remove %s' ), blockTitle ),
+		label: __( 'Remove block' ),
 		value: 'deleteOption',
 		icon: trash,
 		separated: true,
@@ -55,8 +54,7 @@ const BlockActionsMenu = ( {
 
 	const settingsOption = {
 		id: 'settingsOption',
-		// translators: %s: block title e.g: "Paragraph".
-		label: sprintf( __( '%s Settings' ), blockTitle ),
+		label: __( 'Block settings' ),
 		value: 'settingsOption',
 		icon: cog,
 	};
@@ -136,6 +134,8 @@ const BlockActionsMenu = ( {
 				anchor={
 					anchorNodeRef ? findNodeHandle( anchorNodeRef ) : undefined
 				}
+				// translators: %s: block title e.g: "Paragraph".
+				title={ sprintf( __( '%s block options' ), blockTitle ) }
 			/>
 		</>
 	);

diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
@@ -8,6 +8,7 @@ import { View } from 'react-native';
  */
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -31,6 +32,7 @@ const BlockMobileToolbar = ( {
 	blockWidth,
 	anchorNodeRef,
 } ) => {
+	const [ fillsLength, setFillsLength ] = useState( null );
 	const wrapBlockSettings = blockWidth < BREAKPOINTS.wrapSettings;
 	const wrapBlockMover = blockWidth <= BREAKPOINTS.wrapMover;
 
@@ -45,17 +47,18 @@ const BlockMobileToolbar = ( {
 
 			<View style={ styles.spacer } />
 
-			{ ! wrapBlockSettings && (
-				<BlockSettingsButton.Slot>
-					{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls */ }
-					{ ( fills = [ null ] ) => fills[ 0 ] }
-				</BlockSettingsButton.Slot>
-			) }
+			<BlockSettingsButton.Slot>
+				{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls */ }
+				{ ( fills = [ null ] ) => {
+					setFillsLength( fills.length );
+					return wrapBlockSettings ? null : fills[ 0 ];
+				} }
+			</BlockSettingsButton.Slot>
 
 			<BlockActionsMenu
 				clientIds={ [ clientId ] }
 				wrapBlockMover={ wrapBlockMover }
-				wrapBlockSettings={ wrapBlockSettings }
+				wrapBlockSettings={ wrapBlockSettings && fillsLength }
 				isStackedHorizontally={ isStackedHorizontally }
 				onDelete={ onDelete }
 				anchorNodeRef={ anchorNodeRef }

diff --git a/packages/block-editor/src/components/block-mover/mover-description.native.js b/packages/block-editor/src/components/block-mover/mover-description.native.js
@@ -13,10 +13,8 @@ const horizontalMover = {
 	forwardButtonIcon: arrowRight,
 	backwardButtonHint: __( 'Double tap to move the block to the left' ),
 	forwardButtonHint: __( 'Double tap to move the block to the right' ),
-	/* translators: %s: block title e.g: "Paragraph" */
-	firstBlockTitle: __( 'Move %s Left' ),
-	/* translators: %s: block title e.g: "Paragraph" */
-	lastBlockTitle: __( 'Move %s 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'
@@ -32,10 +30,8 @@ const verticalMover = {
 	forwardButtonIcon: arrowDown,
 	backwardButtonHint: __( 'Double tap to move the block up' ),
 	forwardButtonHint: __( 'Double tap to move the block down' ),
-	/* translators: %s: block title e.g: "Paragraph" */
-	firstBlockTitle: __( 'Move %s Up' ),
-	/* translators: %s: block title e.g: "Paragraph" */
-	lastBlockTitle: __( 'Move %s 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) */
@@ -53,14 +49,13 @@ const SETUP_GETTER = {
 
 export function getMoversSetup(
 	isStackedHorizontally,
-	{ firstIndex, keys = KEYS, blockTitle }
+	{ firstIndex, keys = KEYS }
 ) {
 	return keys.reduce( ( setup, key ) => {
 		if ( KEYS.includes( key ) ) {
 			Object.assign( setup, {
 				[ key ]: getSetup( key, isStackedHorizontally, {
 					firstIndex,
-					blockTitle,
 				} ),
 			} );
 		}
@@ -115,7 +110,7 @@ function getArrowIcon( isStackedHorizontally ) {
 	};
 }
 
-function getMoverActionTitle( isStackedHorizontally, { blockTitle } ) {
+function getMoverActionTitle( isStackedHorizontally ) {
 	const { firstBlockTitle, lastBlockTitle } = getMoverDescription(
 		isStackedHorizontally
 	);
@@ -126,8 +121,8 @@ function getMoverActionTitle( isStackedHorizontally, { blockTitle } ) {
 	const actionTitleNext = applyRTLSetup( false, args );
 
 	return {
-		backward: sprintf( actionTitlePrev, blockTitle ),
-		forward: sprintf( actionTitleNext, blockTitle ),
+		backward: sprintf( actionTitlePrev, firstBlockTitle ),
+		forward: sprintf( actionTitleNext, lastBlockTitle ),
 	};
 }
 
@@ -145,8 +140,8 @@ function getMoverButtonTitle( isStackedHorizontally, { firstIndex } ) {
 	);
 
 	const args = [
-		backwardButtonTitle,
 		forwardButtonTitle,
+		backwardButtonTitle,
 		isStackedHorizontally,
 	];
 

diff --git a/packages/components/src/mobile/picker/index.android.js b/packages/components/src/mobile/picker/index.android.js
@@ -10,6 +10,7 @@ import { View } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { PanelBody } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -52,7 +53,7 @@ export default class Picker extends Component {
 	}
 
 	render() {
-		const { options, leftAlign, hideCancelButton } = this.props;
+		const { options, leftAlign, hideCancelButton, title } = this.props;
 		const { isVisible } = this.state;
 
 		return (
@@ -62,7 +63,7 @@ export default class Picker extends Component {
 				style={ { paddingBottom: 20 } }
 				hideHeader
 			>
-				<View>
+				<PanelBody title={ title } style={ styles.panelBody }>
 					{ options.map( ( option, index ) => (
 						<>
 							{ options.length > 1 && option.separated && (
@@ -89,7 +90,7 @@ export default class Picker extends Component {
 							separatorType={ 'none' }
 						/>
 					) }
-				</View>
+				</PanelBody>
 			</BottomSheet>
 		);
 	}

diff --git a/packages/components/src/mobile/picker/styles.native.scss b/packages/components/src/mobile/picker/styles.native.scss
@@ -14,3 +14,8 @@
 .disabled {
 	opacity: 0.3;
 }
+
+.panelBody {
+	padding-left: 0;
+	padding-right: 0;
+}
diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -300,7 +300,7 @@ export default class EditorPage {
 		);
 		await blockActionsMenuButton.click();
 
-		const removeActionButtonIdentifier = `Remove ${ blockName }`;
+		const removeActionButtonIdentifier = 'Remove block';
 		const removeActionButtonLocator = `${ buttonElementName }[contains(@${ this.accessibilityIdXPathAttrib }, "${ removeActionButtonIdentifier }")]`;
 		const removeActionButton = await this.driver.elementByXPath(
 			removeActionButtonLocator