[RNMobile] Fixed position of FloatingToolbar on the bottom of the s…

…creen (#21446) * handle FloatingToolbar absolute positioning * support RTL mode by rotate the icons * move FloatingToolbar to packages/components/src/mobile/floating-toolbar * render FloatingToolbar on top for Android and on bottom for iOS * change FloatingToolbar backgroundColor to #e2e2e2
WordPress · Apr 22, 2020 · 8acbb4f · 8acbb4f
1 parent 8885eec
commit 8acbb4f
Show file tree

Hide file tree

Showing 16 changed files with 176 additions and 102 deletions.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -52,6 +52,8 @@ $admin-sidebar-width-collapsed: 36px;
 $modal-min-width: 360px;
 $spinner-size: 18px;
 $mobile-header-toolbar-height: 44px;
+$mobile-floating-toolbar-height: 44px;
+$mobile-floating-toolbar-margin: 8px;
 
 
 /**

diff --git a/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.js b/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.js
diff --git a/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.scss b/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.scss
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -7,14 +7,12 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { ToolbarButton, Toolbar } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import {
 	getBlockType,
 	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
 } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -23,9 +21,6 @@ import styles from './block.scss';
 import BlockEdit from '../block-edit';
 import BlockInvalidWarning from './block-invalid-warning';
 import BlockMobileToolbar from '../block-mobile-toolbar';
-import FloatingToolbar from './block-mobile-floating-toolbar';
-import Breadcrumbs from './breadcrumb';
-import NavigateUpSVG from './nav-up-icon';
 
 class BlockListBlock extends Component {
 	constructor() {
@@ -91,15 +86,11 @@ class BlockListBlock extends Component {
 			isValid,
 			order,
 			title,
-			parentId,
 			isDimmed,
 			isTouchable,
 			onDeleteBlock,
 			isStackedHorizontally,
-			hasParent,
 			isParentSelected,
-			onSelect,
-			showFloatingToolbar,
 			getStylesFromColorScheme,
 			marginVertical,
 			marginHorizontal,
@@ -124,21 +115,6 @@ class BlockListBlock extends Component {
 					style={ { flex: 1 } }
 					accessibilityLabel={ accessibilityLabel }
 				>
-					{ showFloatingToolbar && (
-						<FloatingToolbar>
-							{ hasParent && (
-								<Toolbar passedStyle={ styles.toolbar }>
-									<ToolbarButton
-										title={ __( 'Navigate Up' ) }
-										onClick={ () => onSelect( parentId ) }
-										icon={ NavigateUpSVG }
-									/>
-									<View style={ styles.pipe } />
-								</Toolbar>
-							) }
-							<Breadcrumbs clientId={ clientId } />
-						</FloatingToolbar>
-					) }
 					<View
 						pointerEvents={ isTouchable ? 'auto' : 'box-only' }
 						accessibilityLabel={ accessibilityLabel }
@@ -203,7 +179,6 @@ export default compose( [
 			__unstableGetBlockWithoutInnerBlocks,
 			getBlockHierarchyRootClientId,
 			getSelectedBlockClientId,
-			getBlock,
 			getBlockRootClientId,
 			getLowestCommonAncestorWithSelectedBlock,
 			getBlockParents,
@@ -224,10 +199,6 @@ export default compose( [
 		const parentId = parents[ 0 ] || '';
 
 		const rootBlockId = getBlockHierarchyRootClientId( clientId );
-		const rootBlock = getBlock( rootBlockId );
-		const hasRootInnerBlocks = rootBlock.innerBlocks.length !== 0;
-
-		const showFloatingToolbar = isSelected && hasRootInnerBlocks;
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 
@@ -239,7 +210,6 @@ export default compose( [
 			? parents[ commonAncestorIndex ]
 			: parents[ parents.length - 1 ];
 
-		const hasParent = !! parentId;
 		const isParentSelected =
 			selectedBlockClientId && selectedBlockClientId === parentId;
 		const isAncestorSelected =
@@ -277,14 +247,11 @@ export default compose( [
 			isSelected,
 			isInnerBlockSelected,
 			isValid,
-			parentId,
 			isParentSelected,
 			firstToSelectId,
-			hasParent,
 			isAncestorSelected,
 			isTouchable,
 			isDimmed,
-			showFloatingToolbar,
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => {

diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss
@@ -41,23 +41,6 @@
 	min-height: 50px;
 }
 
-.toolbar {
-	border-left-width: 0;
-	margin-right: auto;
-	padding-left: 2px;
-	height: 44px;
-}
-
-.pipe {
-	margin-top: auto;
-	margin-bottom: auto;
-	margin-left: 2px;
-	height: 28px;
-	width: 1px;
-	background-color: #e9eff3;
-	opacity: 0.4;
-}
-
 .neutralToolbar {
 	margin-left: -$block-edge-to-content;
 	margin-right: -$block-edge-to-content;

diff --git a/packages/block-editor/src/components/block-list/breadcrumb.native.js b/packages/block-editor/src/components/block-list/breadcrumb.native.js
@@ -9,7 +9,7 @@ import { getBlockType } from '@wordpress/blocks';
 /**
  * External dependencies
  */
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, I18nManager } from 'react-native';
 
 /**
  * Internal dependencies
@@ -50,7 +50,10 @@ const BlockBreadcrumb = ( {
 							fill={ styles.icon.color }
 						/>,
 						<View key="subdirectory-icon" style={ styles.arrow }>
-							<SubdirectorSVG fill={ styles.arrow.color } />
+							<SubdirectorSVG
+								fill={ styles.arrow.color }
+								isRTL={ I18nManager.isRTL }
+							/>
 						</View>,
 					] }
 				<Icon
@@ -79,7 +82,7 @@ export default compose( [
 
 		const blockName = getBlockName( clientId );
 		const blockType = getBlockType( blockName );
-		const blockIcon = blockType.icon;
+		const blockIcon = blockType ? blockType.icon : {};
 
 		const rootClientId = getBlockRootClientId( clientId );
 
@@ -91,7 +94,7 @@ export default compose( [
 		}
 		const rootBlockName = getBlockName( rootClientId );
 		const rootBlockType = getBlockType( rootBlockName );
-		const rootBlockIcon = rootBlockType.icon;
+		const rootBlockIcon = rootBlockType ? rootBlockType.icon : {};
 
 		return {
 			clientId,

diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -103,11 +103,17 @@ export class BlockList extends Component {
 			shouldShowInsertionPointAfter,
 			marginVertical = styles.defaultBlock.marginTop,
 			marginHorizontal = styles.defaultBlock.marginLeft,
+			isFloatingToolbarVisible,
 			isStackedHorizontally,
 			horizontalAlignment,
 		} = this.props;
 
-		const { blockToolbar, blockBorder, headerToolbar } = styles;
+		const {
+			blockToolbar,
+			blockBorder,
+			headerToolbar,
+			floatingToolbar,
+		} = styles;
 
 		const forceRefresh =
 			shouldShowInsertionPointBefore || shouldShowInsertionPointAfter;
@@ -134,7 +140,12 @@ export class BlockList extends Component {
 					extraScrollHeight={
 						blockToolbar.height + blockBorder.width
 					}
-					inputAccessoryViewHeight={ headerToolbar.height }
+					inputAccessoryViewHeight={
+						headerToolbar.height +
+						( isFloatingToolbarVisible
+							? floatingToolbar.height
+							: 0 )
+					}
 					keyboardShouldPersistTaps="always"
 					scrollViewStyle={ [
 						{ flex: isRootList ? 1 : 0 },
@@ -274,6 +285,7 @@ export default compose( [
 			getBlockInsertionPoint,
 			isBlockInsertionPointVisible,
 			getSettings,
+			getBlockHierarchyRootClientId,
 		} = select( 'core/block-editor' );
 
 		const isStackedHorizontally =
@@ -308,6 +320,14 @@ export default compose( [
 
 		const isReadOnly = getSettings().readOnly;
 
+		const rootBlockId = getBlockHierarchyRootClientId(
+			selectedBlockClientId
+		);
+		const hasRootInnerBlocks = !! getBlockCount( rootBlockId );
+
+		const isFloatingToolbarVisible =
+			!! selectedBlockClientId && hasRootInnerBlocks;
+
 		return {
 			blockClientIds,
 			blockCount: getBlockCount( rootClientId ),
@@ -317,6 +337,7 @@ export default compose( [
 			selectedBlockClientId,
 			isReadOnly,
 			isRootList: rootClientId === undefined,
+			isFloatingToolbarVisible,
 			isStackedHorizontally,
 		};
 	} ),

diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss
@@ -81,6 +81,10 @@
 	height: $mobile-block-toolbar-height;
 }
 
+.floatingToolbar {
+	height: $mobile-floating-toolbar-height + 2 * $mobile-floating-toolbar-margin;
+}
+
 .horizontal {
 	flex-direction: row;
 	flex-wrap: wrap;

diff --git a/packages/block-editor/src/components/block-list/subdirectory-icon.js b/packages/block-editor/src/components/block-list/subdirectory-icon.js
@@ -3,15 +3,18 @@
  */
 import { SVG, Path } from '@wordpress/components';
 
-const Subdirectory = ( { ...extraProps } ) => (
+const Subdirectory = ( { isRTL, ...extraProps } ) => (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"
 		width={ 14 }
 		height={ 14 }
 		viewBox="0 0 20 20"
 		{ ...extraProps }
 	>
-		<Path d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z" />
+		<Path
+			d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z"
+			transform={ isRTL ? 'scale(-1,1) translate(-20,0)' : undefined }
+		/>
 	</SVG>
 );
 export default Subdirectory;
diff --git a/packages/block-editor/src/components/floating-toolbar/floatingToolbar.android.scss b/packages/block-editor/src/components/floating-toolbar/floatingToolbar.android.scss
@@ -0,0 +1,4 @@
+.floatingToolbarOffset {
+	top: 0;
+	margin-top: 8px;
+}
diff --git a/packages/block-editor/src/components/floating-toolbar/floatingToolbar.ios.scss b/packages/block-editor/src/components/floating-toolbar/floatingToolbar.ios.scss
@@ -0,0 +1,3 @@
+.floatingToolbarOffset {
+	top: - ($mobile-floating-toolbar-height + $mobile-floating-toolbar-margin);
+}