From 40be8a5888510769318b3da9aa71747fd4a63d05 Mon Sep 17 00:00:00 2001 From: Luke Walczak Date: Mon, 29 Jun 2020 20:18:44 +0200 Subject: [PATCH] [RNMobile] Some tweaks in block picker (#23465) --- .../block-actions-menu.native.js | 10 ++++---- .../block-mobile-toolbar/index.native.js | 17 ++++++++------ .../block-mover/mover-description.native.js | 23 ++++++++----------- .../src/mobile/picker/index.android.js | 7 +++--- .../src/mobile/picker/styles.native.scss | 5 ++++ .../__device-tests__/pages/editor-page.js | 2 +- 6 files changed, 34 insertions(+), 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 index a15578d1e91c81..f8f5fdf34dce94 100644 --- 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 index 6168f56ca098fe..0712b27688b912 100644 --- 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 = ( { - { ! wrapBlockSettings && ( - - { /* Render only one settings icon even if we have more than one fill - need for hooks with controls */ } - { ( fills = [ null ] ) => fills[ 0 ] } - - ) } + + { /* 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 ]; + } } + { 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 index e380309df3b27e..5a6bbfbf08ef2b 100644 --- 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 > - + { options.map( ( option, index ) => ( <> { options.length > 1 && option.separated && ( @@ -89,7 +90,7 @@ export default class Picker extends Component { separatorType={ 'none' } /> ) } - + ); } diff --git a/packages/components/src/mobile/picker/styles.native.scss b/packages/components/src/mobile/picker/styles.native.scss index fea1095b0a471d..f2da6f50524741 100644 --- 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 index 18976667843510..6e3b93d26c02fc 100644 --- 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