From 7a393af4c2a231b8c3e0648b5edce0a37dc10133 Mon Sep 17 00:00:00 2001
From: jbinda <jakub.binda@gmail.com>
Date: Tue, 8 Oct 2019 10:47:08 +0200
Subject: [PATCH] [RNMobile] Inner Block Navigate upward through hierarchy
 (#17496)

* add navigate up button on floating toolbar
---
 .../src/components/block-list/block.native.js   | 15 ++++++++++++++-
 .../src/components/block-list/block.native.scss | 17 +++++++++++++++++
 .../src/components/block-list/nav-up-icon.js    |  8 ++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 packages/block-editor/src/components/block-list/nav-up-icon.js

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 eac9c7be152062..456c5fad6ac2ab 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -11,6 +11,7 @@ import {
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+import { ToolbarButton, Toolbar } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { getBlockType } from '@wordpress/blocks';
@@ -24,6 +25,7 @@ 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 NavigateUpSVG from './nav-up-icon';
 
 class BlockListBlock extends Component {
 	constructor() {
@@ -124,7 +126,18 @@ class BlockListBlock extends Component {
 		return (
 			<>
 				{ showFloatingToolbar && ( ! isFirstBlock || parentId === '' ) && <FloatingToolbar.Slot /> }
-				{ showFloatingToolbar && <FloatingToolbar /> }
+				{ showFloatingToolbar &&
+					( <FloatingToolbar>
+						<Toolbar passedStyle={ styles.toolbar }>
+							<ToolbarButton
+								title={ __( 'Navigate Up' ) }
+								onClick={ () => this.props.onSelect( parentId ) }
+								icon={ NavigateUpSVG }
+							/>
+							<View style={ styles.pipe } />
+						</Toolbar>
+					</FloatingToolbar>
+					) }
 				<TouchableWithoutFeedback
 					onPress={ this.onFocus }
 					accessible={ ! isSelected }
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 a7dbae3b46516b..e3d18ba3f7c640 100644
--- a/packages/block-editor/src/components/block-list/block.native.scss
+++ b/packages/block-editor/src/components/block-list/block.native.scss
@@ -34,3 +34,20 @@
 .blockText {
 	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;
+}
diff --git a/packages/block-editor/src/components/block-list/nav-up-icon.js b/packages/block-editor/src/components/block-list/nav-up-icon.js
new file mode 100644
index 00000000000000..8fa1c8d20bd761
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/nav-up-icon.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+const NavigateUp = <SVG width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><Path fill="white" 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" /></SVG>;
+
+export default NavigateUp;