[rnmobile] Breadcrumbs

packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.scss

@@ -1,5 +1,5 @@
 .floatingToolbarFill {
-	background-color: $dark-gray-500;
+	background-color: rgba(29, 35, 39, 0.85);
 	margin: auto;
 	min-width: 100;
 	max-height: $floating-toolbar-height;

packages/block-editor/src/components/block-list/block.native.js

@@ -25,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 Breadcrumbs from './breadcrumb';
 import NavigateUpSVG from './nav-up-icon';
 
 class BlockListBlock extends Component {
@@ -136,6 +137,7 @@ class BlockListBlock extends Component {
 							/>
 							<View style={ styles.pipe } />
 						</Toolbar>
+						<Breadcrumbs clientId={ clientId } />
 					</FloatingToolbar>
 					) }
 				<TouchableWithoutFeedback

packages/block-editor/src/components/block-list/breadcrumb.native.js

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { getBlockType } from '@wordpress/blocks';
+
+/**
+ * External dependencies
+ */
+import { View, Text, TouchableOpacity } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import BlockTitle from '../block-title';
+import SubdirectorSVG from './subdirectory-icon';
+
+import styles from './breadcrumb.scss';
+
+const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon } ) => {
+	return (
+		<View style={ styles.breadcrumbContainer }>
+			<TouchableOpacity style={ styles.button } onPress={ () => {/* Open BottomSheet with markup */} }>
+				{ rootClientId && rootBlockIcon && (
+					[ <Icon key="parent-icon" size={ 20 } icon={ rootBlockIcon.src } fill={ styles.icon.color } />,
+						<View key="subdirectory-icon" style={ styles.arrow }><SubdirectorSVG fill={ styles.arrow.color } /></View>,
+					]
+				) }
+				<Icon size={ 24 } icon={ blockIcon.src } fill={ styles.icon.color } />
+				<Text style={ styles.breadcrumbTitle }><BlockTitle clientId={ clientId } /></Text>
+			</TouchableOpacity>
+		</View>
+	);
+};
+
+export default compose( [
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getBlockRootClientId,
+			getBlockName,
+		} = select( 'core/block-editor' );
+
+		const blockName = getBlockName( clientId );
+		const blockType = getBlockType( blockName );
+		const blockIcon = blockType.icon;
+
+		const rootClientId = getBlockRootClientId( clientId );
+
+		if ( ! rootClientId ) {
+			return {
+				clientId,
+				blockIcon,
+			};
+		}
+		const rootBlockName = getBlockName( rootClientId );
+		const rootBlockType = getBlockType( rootBlockName );
+		const rootBlockIcon = rootBlockType.icon;
+
+		return {
+			clientId,
+			blockIcon,
+			rootClientId,
+			rootBlockIcon,
+		};
+	} ),
+] )( BlockBreadcrumb );

packages/block-editor/src/components/block-list/breadcrumb.native.scss

@@ -0,0 +1,28 @@
+.breadcrumbContainer {
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	padding-left: 5;
+	padding-right: 15;
+}
+
+.breadcrumbTitle {
+	color: $white;
+	margin-left: 4;
+}
+
+.icon {
+	color: $white;
+}
+
+.button {
+	flex-direction: row;
+	align-items: center;
+}
+
+.arrow {
+	color: rgba(255, 255, 255, 0.4);
+	margin-top: -4px;
+	margin-left: 4;
+	margin-right: 4;
+}

packages/block-editor/src/components/block-list/subdirectory-icon.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+const Subdirectory = ( { ...extraProps } ) => (
+	<SVG
+		aria-hidden
+		role="img"
+		focusable="false"
+		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" />
+	</SVG> )
+;
+
+export default Subdirectory;