From 5a40f5f49b149f6ecb35b20ce5b51da890b3611f Mon Sep 17 00:00:00 2001 From: Siobhan Bamber Date: Wed, 13 Apr 2022 11:02:20 +0100 Subject: [PATCH] [RNMobile] Update "add block" button style in default editor view (#39726) This PR seeks to make the block inserter more visible in the "default view" of the editor. For the purposes of this PR, "default view" has been interpreted as the view of the editor when no blocks (including the editor's title) are selected. --- packages/base-styles/_variables.scss | 1 + .../src/components/inserter/index.native.js | 85 +++++++++++++------ .../src/components/inserter/style.native.scss | 27 +++++- .../header/header-toolbar/index.native.js | 58 +++++++++++-- .../header/header-toolbar/style.native.scss | 12 ++- .../src/components/layout/index.native.js | 2 +- packages/react-native-editor/CHANGELOG.md | 1 + test/native/__mocks__/styleMock.js | 3 + 8 files changed, 147 insertions(+), 42 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 8539e6a22fd4db..d1d6cb848876ee 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -111,6 +111,7 @@ $block-bg-padding--h: 2.375em; // Dimensions. $mobile-header-toolbar-height: 44px; +$mobile-header-toolbar-expanded-height: 52px; $mobile-floating-toolbar-height: 44px; $mobile-floating-toolbar-margin: 8px; $mobile-color-swatch: 48px; diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js index 04085f5e57b50e..8667ccc3cd8665 100644 --- a/packages/block-editor/src/components/inserter/index.native.js +++ b/packages/block-editor/src/components/inserter/index.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { AccessibilityInfo, Platform } from 'react-native'; +import { AccessibilityInfo, Platform, Text } from 'react-native'; import { delay } from 'lodash'; /** @@ -15,6 +15,7 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose'; import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; import { Icon, + plus, plusCircle, plusCircleFilled, insertAfter, @@ -32,27 +33,51 @@ import { store as blockEditorStore } from '../../store'; const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000; -const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => ( - - } - onClick={ onToggle } - extraProps={ { - hint: __( 'Double tap to add a block' ), - // testID is present to disambiguate this element for native UI tests. It's not - // usually required for components. See: https://git.io/JeQ7G. - testID: 'add-block-button', - onLongPress, - } } - isDisabled={ disabled } - /> -); +const defaultRenderToggle = ( { + onToggle, + disabled, + style, + containerStyle, + onLongPress, + useExpandedMode, +} ) => { + // The "expanded mode" refers to the editor's appearance when no blocks + // are currently selected. The "add block" button has a separate style + // for the "expanded mode", which are added via the below "expandedModeViewProps" + // and "expandedModeViewText" variables. + const expandedModeViewProps = useExpandedMode && { + icon: , + customContainerStyles: containerStyle, + fixedRatio: false, + }; + const expandedModeViewText = ( + + { __( 'Add Blocks' ) } + + ); + + return ( + } + onClick={ onToggle } + extraProps={ { + hint: __( 'Double tap to add a block' ), + // testID is present to disambiguate this element for native UI tests. It's not + // usually required for components. See: https://git.io/JeQ7G. + testID: 'add-block-button', + onLongPress, + } } + isDisabled={ disabled } + { ...expandedModeViewProps } + > + { useExpandedMode && expandedModeViewText } + + ); +}; export class Inserter extends Component { constructor() { @@ -219,13 +244,21 @@ export class Inserter extends Component { renderToggle = defaultRenderToggle, getStylesFromColorScheme, showSeparator, + useExpandedMode, } = this.props; if ( showSeparator && isOpen ) { return ; } - const style = getStylesFromColorScheme( - styles.addBlockButton, - styles.addBlockButtonDark + const style = useExpandedMode + ? styles[ 'inserter-menu__add-block-button-icon--expanded' ] + : getStylesFromColorScheme( + styles[ 'inserter-menu__add-block-button-icon' ], + styles[ 'inserter-menu__add-block-button-icon--dark' ] + ); + + const containerStyle = getStylesFromColorScheme( + styles[ 'inserter-menu__add-block-button' ], + styles[ 'inserter-menu__add-block-button--dark' ] ); const onPress = () => { @@ -265,7 +298,9 @@ export class Inserter extends Component { isOpen, disabled, style, + containerStyle, onLongPress, + useExpandedMode, } ) } ( this.picker = instance ) } diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index 105af1f72b7d91..d132adf72ed9b8 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -1,13 +1,34 @@ /** @format */ -.addBlockButton { - color: $blue-wordpress; +.inserter-menu__add-block-button-icon { + color: $blue-50; } -.addBlockButtonDark { +.inserter-menu__add-block-button-icon--dark { color: $blue-30; } +.inserter-menu__add-block-button-icon--expanded { + color: $white; +} + +.inserter-menu__add-block-button { + border-radius: 22px; + background-color: $blue-50; + margin: 8px; + padding: 6px 16px 6px 12px; +} + +.inserter-menu__add-block-button--dark { + background-color: $blue-30; +} + +.inserter-menu__add-block-button-text { + color: $white; + font-weight: 500; + align-self: center; +} + .inserter-menu__list-wrapper { flex: 1; } diff --git a/packages/edit-post/src/components/header/header-toolbar/index.native.js b/packages/edit-post/src/components/header/header-toolbar/index.native.js index 3a3d1ad1f7875b..1a9ded1a63dcd5 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.native.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.native.js @@ -6,7 +6,7 @@ import { Platform, ScrollView, View } from 'react-native'; /** * WordPress dependencies */ -import { useRef } from '@wordpress/element'; +import { useCallback, useRef, useState } from '@wordpress/element'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; import { withViewportMatch } from '@wordpress/viewport'; @@ -40,7 +40,11 @@ function HeaderToolbar( { getStylesFromColorScheme, onHideKeyboard, isRTL, + noContentSelected, } ) { + const wasNoContentSelected = useRef( noContentSelected ); + const [ isInserterOpen, setIsInserterOpen ] = useState( false ); + const scrollViewRef = useRef( null ); const scrollToStart = () => { // scrollview doesn't seem to automatically adjust to RTL on Android so, scroll to end when Android @@ -79,12 +83,32 @@ function HeaderToolbar( { return isRTL ? buttons.reverse() : buttons; }; + const onToggleInserter = useCallback( + ( isOpen ) => { + if ( isOpen ) { + wasNoContentSelected.current = noContentSelected; + } + setIsInserterOpen( isOpen ); + }, + [ noContentSelected ] + ); + + // Expanded mode should be preserved while the inserter is open. + // This way we prevent style updates during the opening transition. + const useExpandedMode = isInserterOpen + ? wasNoContentSelected.current + : noContentSelected; + return ( - + { renderHistoryButtons() } { showKeyboardHideButton && ( - + { diff --git a/packages/edit-post/src/components/header/header-toolbar/style.native.scss b/packages/edit-post/src/components/header/header-toolbar/style.native.scss index 7087d3c2cdef78..031d082706656a 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.native.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.native.scss @@ -1,5 +1,5 @@ -.container { +.header-toolbar__container { height: $mobile-header-toolbar-height; flex-direction: row; background-color: $app-background; @@ -7,16 +7,20 @@ border-top-width: 1px; } -.containerDark { +.header-toolbar__container--dark { background-color: $app-background-dark-alt; border-top-color: $background-dark-elevated; } -.scrollableContent { +.header-toolbar__container--expanded { + height: $mobile-header-toolbar-expanded-height; +} + +.header-toolbar__scrollable-content { flex-grow: 1; // Fixes RTL issue on Android. } -.keyboardHideContainer { +.header-toolbar__keyboard-hide-container { padding-right: 0; padding-left: 0; padding-top: 4px; diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js index 8e137b18987b42..27c743ed31bed6 100644 --- a/packages/edit-post/src/components/layout/index.native.js +++ b/packages/edit-post/src/components/layout/index.native.js @@ -115,7 +115,7 @@ class Layout extends Component { // Add a margin view at the bottom for the header. const marginBottom = Platform.OS === 'android' && ! isHtmlView - ? headerToolbarStyles.container.height + ? headerToolbarStyles[ 'header-toolbar__container' ].height : 0; const toolbarKeyboardAvoidingViewStyle = { diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index a017db6b70cf91..e39d51bd962031 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label to i ## Unreleased +- [**] Update "add block" button's style in default editor view. [#39726] - [*] Remove banner error notification on upload failure [#39694] ## 1.73.1 diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js index 4e08af483885f0..873fa71bb2de0c 100644 --- a/test/native/__mocks__/styleMock.js +++ b/test/native/__mocks__/styleMock.js @@ -156,4 +156,7 @@ module.exports = { addMediaButton: { color: 'white', }, + 'header-toolbar__container': { + height: 44, + }, };