From 8acbb4f9646f6b3ad8687f60e7816bf88c13ae14 Mon Sep 17 00:00:00 2001
From: jbinda <jakub.binda@gmail.com>
Date: Wed, 22 Apr 2020 08:38:45 +0200
Subject: [PATCH] [RNMobile] Fixed position of `FloatingToolbar` on the bottom
 of the screen (#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
---
 packages/base-styles/_variables.scss          |  2 +
 .../block-mobile-floating-toolbar.native.js   | 19 -----
 .../block-mobile-floating-toolbar.native.scss | 24 ------
 .../src/components/block-list/block.native.js | 33 --------
 .../components/block-list/block.native.scss   | 17 ----
 .../block-list/breadcrumb.native.js           | 11 ++-
 .../src/components/block-list/index.native.js | 25 +++++-
 .../components/block-list/style.native.scss   |  4 +
 .../block-list/subdirectory-icon.js           |  7 +-
 .../floatingToolbar.android.scss              |  4 +
 .../floating-toolbar/floatingToolbar.ios.scss |  3 +
 .../floating-toolbar/index.native.js          | 77 +++++++++++++++++++
 .../nav-up-icon.js                            |  3 +-
 .../floating-toolbar/styles.native.scss       | 43 +++++++++++
 .../src/components/index.native.js            |  1 +
 .../src/components/layout/index.native.js     |  5 ++
 16 files changed, 176 insertions(+), 102 deletions(-)
 delete mode 100644 packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.js
 delete mode 100644 packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.scss
 create mode 100644 packages/block-editor/src/components/floating-toolbar/floatingToolbar.android.scss
 create mode 100644 packages/block-editor/src/components/floating-toolbar/floatingToolbar.ios.scss
 create mode 100644 packages/block-editor/src/components/floating-toolbar/index.native.js
 rename packages/block-editor/src/components/{block-list => floating-toolbar}/nav-up-icon.js (80%)
 create mode 100644 packages/block-editor/src/components/floating-toolbar/styles.native.scss

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 8935761075ed9a..276bd120ab0b59 100644
--- 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
deleted file mode 100644
index fc8876253734c2..00000000000000
--- a/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-import { View, TouchableWithoutFeedback } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import styles from './block-mobile-floating-toolbar.scss';
-
-const FloatingToolbar = ( { children } ) => {
-	return (
-		<TouchableWithoutFeedback accessible={ false }>
-			<View style={ styles.floatingToolbar }>{ children }</View>
-		</TouchableWithoutFeedback>
-	);
-};
-
-export default FloatingToolbar;
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
deleted file mode 100644
index 5b12591ec44361..00000000000000
--- a/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-$floating-toolbar-height: 44;
-
-.floatingToolbar {
-	background-color: $dark-gray-500;
-	margin: auto;
-	min-width: 100;
-	max-height: $floating-toolbar-height;
-	border-radius: 22px;
-	flex-direction: row;
-	z-index: 100;
-	height: $floating-toolbar-height;
-	align-items: center;
-	justify-content: center;
-	align-self: center;
-	margin-bottom: 8px;
-}
-
-.floatingToolbarFillColor {
-	background-color: rgba(#1d2327, 0.85);
-}
-
-.floatingToolbarFillColorDark {
-	background-color: rgba(#3c434a, 0.85);
-}
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index 5e138de2e909ec..773c6d19fb9913 100644
--- 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
index 0d1c60fe4f1f19..aa3d6d1248f595 100644
--- 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
index 0084d8485a326b..027b93abf6b7d3 100644
--- 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
index 56f68221b4dcfd..a1c1a9ee376184 100644
--- 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
index 146dd9463336a6..f2b07c5226916e 100644
--- 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
index f024c51880e4b2..432f545e4524d8 100644
--- a/packages/block-editor/src/components/block-list/subdirectory-icon.js
+++ b/packages/block-editor/src/components/block-list/subdirectory-icon.js
@@ -3,7 +3,7 @@
  */
 import { SVG, Path } from '@wordpress/components';
 
-const Subdirectory = ( { ...extraProps } ) => (
+const Subdirectory = ( { isRTL, ...extraProps } ) => (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"
 		width={ 14 }
@@ -11,7 +11,10 @@ const Subdirectory = ( { ...extraProps } ) => (
 		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
new file mode 100644
index 00000000000000..e593022f0db97e
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..c25157540286d0
--- /dev/null
+++ 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);
+}
diff --git a/packages/block-editor/src/components/floating-toolbar/index.native.js b/packages/block-editor/src/components/floating-toolbar/index.native.js
new file mode 100644
index 00000000000000..3d3b49f0d9471d
--- /dev/null
+++ b/packages/block-editor/src/components/floating-toolbar/index.native.js
@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import { View, TouchableWithoutFeedback, I18nManager } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton, Toolbar } from '@wordpress/components';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+import NavigateUpSVG from './nav-up-icon';
+import Breadcrumb from '../block-list/breadcrumb.native';
+
+const FloatingToolbar = ( {
+	selectedClientId,
+	parentId,
+	showFloatingToolbar,
+	onNavigateUp,
+} ) =>
+	!! showFloatingToolbar && (
+		<TouchableWithoutFeedback accessible={ false }>
+			<View style={ styles.floatingToolbar }>
+				{ !! parentId && (
+					<Toolbar passedStyle={ styles.toolbar }>
+						<ToolbarButton
+							title={ __( 'Navigate Up' ) }
+							onClick={ () => onNavigateUp( parentId ) }
+							icon={
+								<NavigateUpSVG isRTL={ I18nManager.isRTL } />
+							}
+						/>
+						<View style={ styles.pipe } />
+					</Toolbar>
+				) }
+				<Breadcrumb clientId={ selectedClientId } />
+			</View>
+		</TouchableWithoutFeedback>
+	);
+
+export default compose( [
+	withSelect( ( select ) => {
+		const {
+			getSelectedBlockClientId,
+			getBlockHierarchyRootClientId,
+			getBlockRootClientId,
+			getBlockCount,
+		} = select( 'core/block-editor' );
+
+		const selectedClientId = getSelectedBlockClientId();
+
+		if ( ! selectedClientId ) return;
+
+		const rootBlockId = getBlockHierarchyRootClientId( selectedClientId );
+
+		return {
+			selectedClientId,
+			showFloatingToolbar: !! getBlockCount( rootBlockId ),
+			parentId: getBlockRootClientId( selectedClientId ),
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const { selectBlock } = dispatch( 'core/block-editor' );
+
+		return {
+			onNavigateUp( clientId, initialPosition ) {
+				selectBlock( clientId, initialPosition );
+			},
+		};
+	} ),
+] )( FloatingToolbar );
diff --git a/packages/block-editor/src/components/block-list/nav-up-icon.js b/packages/block-editor/src/components/floating-toolbar/nav-up-icon.js
similarity index 80%
rename from packages/block-editor/src/components/block-list/nav-up-icon.js
rename to packages/block-editor/src/components/floating-toolbar/nav-up-icon.js
index ae1d897660af7b..029b667dfb498c 100644
--- a/packages/block-editor/src/components/block-list/nav-up-icon.js
+++ b/packages/block-editor/src/components/floating-toolbar/nav-up-icon.js
@@ -3,7 +3,7 @@
  */
 import { SVG, Path } from '@wordpress/components';
 
-const NavigateUp = (
+const NavigateUp = ( { isRTL } ) => (
 	<SVG
 		width="24"
 		height="24"
@@ -16,6 +16,7 @@ const NavigateUp = (
 			fillRule="evenodd"
 			clipRule="evenodd"
 			d="M17,11  z L15.58,12.42 L12,8.83 L12,18 L22,18 L22,20 L10,20 L10,8.83 L6.42,12.42 L5,11 L11,5 L17,11"
+			transform={ isRTL ? 'scale(-1,1) translate(-24,0)' : undefined }
 		/>
 	</SVG>
 );
diff --git a/packages/block-editor/src/components/floating-toolbar/styles.native.scss b/packages/block-editor/src/components/floating-toolbar/styles.native.scss
new file mode 100644
index 00000000000000..8a4b7a1f821374
--- /dev/null
+++ b/packages/block-editor/src/components/floating-toolbar/styles.native.scss
@@ -0,0 +1,43 @@
+@import "floatingToolbar";
+
+.floatingToolbar {
+	position: absolute;
+	@extend .floatingToolbarOffset;
+	background-color: $background-dark-elevated;
+	margin-left: auto;
+	margin-right: auto;
+	min-width: 100;
+	max-height: $mobile-floating-toolbar-height;
+	border-radius: 22px;
+	flex-direction: row;
+	z-index: 100;
+	height: $mobile-floating-toolbar-height;
+	align-items: center;
+	justify-content: center;
+	align-self: center;
+}
+
+.floatingToolbarFillColor {
+	background-color: $background-dark-elevated;
+}
+
+.floatingToolbarFillColorDark {
+	background-color: $background-dark-elevated;
+}
+
+.toolbar {
+	border-left-width: 0;
+	margin-right: auto;
+	padding-left: 2px;
+	height: $mobile-floating-toolbar-height;
+}
+
+.pipe {
+	margin-top: auto;
+	margin-bottom: auto;
+	margin-left: 2px;
+	height: 28px;
+	width: 1px;
+	background-color: #e9eff3;
+	opacity: 0.4;
+}
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index d859f6d65b6f67..f2e9e2ed82c688 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/packages/block-editor/src/components/index.native.js
@@ -49,6 +49,7 @@ export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { Block as __experimentalBlock } from './block-list/block-wrapper';
+export { default as FloatingToolbar } from './floating-toolbar';
 
 // State Related Components
 export { default as BlockEditorProvider } from './provider';
diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js
index 9384a0da52b2c0..94291b0db06e35 100644
--- a/packages/edit-post/src/components/layout/index.native.js
+++ b/packages/edit-post/src/components/layout/index.native.js
@@ -14,6 +14,7 @@ import {
 	BottomSheetSettings,
 	__experimentalPageTemplatePicker,
 	__experimentalWithPageTemplatePicker,
+	FloatingToolbar,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { HTMLTextInput, KeyboardAvoidingView } from '@wordpress/components';
@@ -131,6 +132,9 @@ class Layout extends Component {
 					) }
 				>
 					{ isHtmlView ? this.renderHTML() : this.renderVisual() }
+					{ ! isHtmlView && Platform.OS === 'android' && (
+						<FloatingToolbar />
+					) }
 				</View>
 				<View
 					style={ {
@@ -149,6 +153,7 @@ class Layout extends Component {
 								visible={ isTemplatePickerVisible }
 							/>
 						) }
+						{ Platform.OS === 'ios' && <FloatingToolbar /> }
 						<Header />
 						<BottomSheetSettings />
 					</KeyboardAvoidingView>