[RNMobile] Inner Block Navigate upward through hierarchy (#17496)

* add navigate up button on floating toolbar
WordPress · Oct 8, 2019 · 7a393af · 7a393af
1 parent 9de487d
commit 7a393af
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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;