[rnmobile] Breadcrumbs (#17471)

* Add breadcrumbs to floating toolbar

* Add dark mode support

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

@@ -10,21 +10,23 @@ import styles from './block-mobile-floating-toolbar.scss';
 /**
  * WordPress dependencies
  */
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { createSlotFill } from '@wordpress/components';
 
 const { Fill, Slot } = createSlotFill( 'FloatingToolbar' );
 
-function FloatingToolbar( { children } ) {
+const FloatingToolbarFill = ( { children, getStylesFromColorScheme } ) => {
 	return (
 		<Fill>
 			{ ( { innerFloatingToolbar } ) => {
+				const fillStyle = getStylesFromColorScheme( styles.floatingToolbarFillColor, styles.floatingToolbarFillColorDark );
 				return (
 					<TouchableWithoutFeedback>
 						<View
 						// Issue: `FloatingToolbar` placed above the first item in group is not touchable on Android.
 						// Temporary solution: Use `innerFloatingToolbar` to place `FloatingToolbar` over the first item in group.
 						// TODO: `{ top: innerFloatingToolbar ? 0 : -44 }` along with `innerFloatingToolbar` should be removed once issue is fixed.
-							style={ [ styles.floatingToolbarFill, { top: innerFloatingToolbar ? 0 : -44 } ] }
+							style={ [ fillStyle, styles.floatingToolbarFill, { top: innerFloatingToolbar ? 0 : -44 } ] }
 						>{ children }
 						</View>
 					</TouchableWithoutFeedback>
@@ -33,8 +35,9 @@ function FloatingToolbar( { children } ) {
 
 		</Fill>
 	);
-}
+};
 
+const FloatingToolbar = compose( withPreferredColorScheme )( FloatingToolbarFill );
 FloatingToolbar.Slot = Slot;
 
 export default FloatingToolbar;

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

@@ -1,5 +1,4 @@
 .floatingToolbarFill {
-	background-color: $dark-gray-500;
 	margin: auto;
 	min-width: 100;
 	max-height: $floating-toolbar-height;
@@ -13,3 +12,11 @@
 	justify-content: center;
 	align-self: center;
 }
+
+.floatingToolbarFillColor {
+	background-color: rgba(#1d2327, 0.85);
+}
+
+.floatingToolbarFillColorDark {
+	background-color: rgba(#3c434a, 0.85);
+}

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: $light-opacity-light-700;
+	margin-top: -4px;
+	margin-left: 4;
+	margin-right: 4;
+}

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

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