[RNMobile] Inner Block Navigate down through hierarchy

docs/designers-developers/developers/data/data-core-block-editor.md

@@ -197,6 +197,7 @@ _Parameters_
 
 -   _state_ `Object`: Editor state.
 -   _clientId_ `string`: Block from which to find root client ID.
+-   _ascending_ `boolean`: Get parent hierarchy in top-most hierarchy first (false) or reversed (true).
 
 _Returns_
 
@@ -390,6 +391,19 @@ _Returns_
 
 -   `?string`: Last block client ID in the multi-selection set.
 
+<a name="getLowestCommonAncestorWithSelectedBlock" href="#getLowestCommonAncestorWithSelectedBlock">#</a> **getLowestCommonAncestorWithSelectedBlock**
+
+Given a block client ID, returns the common ancestor with selected client ID.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+-   _clientId_ `string`: Block from which to find common ancestor client ID.
+
+_Returns_
+
+-   `string`: Common ancestor client ID or undefined
+
 <a name="getMultiSelectedBlockClientIds" href="#getMultiSelectedBlockClientIds">#</a> **getMultiSelectedBlockClientIds**
 
 Returns the current multi-selection set of block client IDs, or an empty

packages/base-styles/_variables.scss

@@ -63,6 +63,17 @@ $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $bloc
 $block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group)
 $block-bg-padding--h: $block-side-ui-width + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group)
 
+$block-edge-to-content: 16px;
+$block-selected-margin: 3px;
+$block-selected-border-width: 1px;
+$block-selected-padding: 0;
+$block-selected-child-margin: 5px;
+$block-selected-child-border-width: 1px;
+$block-selected-child-padding: 0;
+$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
+$block-selected-child-to-content: $block-selected-to-content - $block-selected-child-margin - $block-selected-child-border-width;
+$block-custom-appender-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-child-margin + $block-selected-border-width;
+
 // Buttons & UI Widgets
 $radius-round-rectangle: 4px;
 $radius-round: 50%;

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

@@ -7,37 +7,16 @@ import { View, TouchableWithoutFeedback } from 'react-native';
  * Internal dependencies
  */
 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' );
 
-const FloatingToolbarFill = ( { children, getStylesFromColorScheme } ) => {
+const FloatingToolbar = ( { children } ) => {
 	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={ [ fillStyle, styles.floatingToolbarFill, { top: innerFloatingToolbar ? 0 : -44 } ] }
-						>{ children }
-						</View>
-					</TouchableWithoutFeedback>
-				);
-			} }
-
-		</Fill>
+		<TouchableWithoutFeedback>
+			<View
+				style={ styles.floatingToolbar }
+			>{ children }
+			</View>
+		</TouchableWithoutFeedback>
 	);
 };
 
-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,16 +1,16 @@
-.floatingToolbarFill {
+.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;
-	top: -$floating-toolbar-height;
 	height: $floating-toolbar-height;
-	position: absolute;
 	align-items: center;
 	justify-content: center;
 	align-self: center;
+	margin-bottom: 8px;
 }
 
 .floatingToolbarFillColor {

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

@@ -13,7 +13,7 @@ import {
 import { Component } from '@wordpress/element';
 import { ToolbarButton, Toolbar } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { getBlockType } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -34,15 +34,12 @@ class BlockListBlock extends Component {
 
 		this.insertBlocksAfter = this.insertBlocksAfter.bind( this );
 		this.onFocus = this.onFocus.bind( this );
-
-		this.state = {
-			isFullyBordered: false,
-		};
 	}
 
 	onFocus() {
-		if ( ! this.props.isSelected ) {
-			this.props.onSelect();
+		const { firstToSelectId, isSelected, onSelect } = this.props;
+		if ( ! isSelected ) {
+			onSelect( firstToSelectId );
 		}
 	}
 
@@ -105,28 +102,108 @@ class BlockListBlock extends Component {
 		return blockName;
 	}
 
+	applySelectedBlockStyle() {
+		const {
+			hasChildren,
+			getStylesFromColorScheme,
+			isSmallScreen,
+			isRootListInnerBlockHolder,
+		} = this.props;
+
+		const fullSolidBorderStyle = { // define style for full border
+			...styles.fullSolidBordered,
+			...getStylesFromColorScheme( styles.solidBorderColor, styles.solidBorderColorDark ),
+		};
+
+		if ( hasChildren ) { // if block has children apply style for selected parent
+			return { ...styles.selectedParent,	...fullSolidBorderStyle	};
+		}
+
+		// apply semi border selected style when screen is in vertical position
+		// and selected block does not have InnerBlock inside
+		if ( isSmallScreen && ! isRootListInnerBlockHolder ) {
+			return {
+				...styles.selectedRootLeaf,
+				...styles.semiSolidBordered,
+				...{ borderColor: fullSolidBorderStyle.borderColor },
+			};
+		}
+
+		/* selected block is one of below:
+				1. does not have children
+				2. is not on root list level
+				3. is an emty group block on root or nested level	*/
+		return { ...styles.selectedLeaf,	...fullSolidBorderStyle	};
+	}
+
+	applyUnSelectedBlockStyle() {
+		const {
+			hasChildren,
+			isParentSelected,
+			isAncestorSelected,
+			hasParent,
+			getStylesFromColorScheme,
+		} = this.props;
+
+		// if block does not have parent apply neutral or full
+		// margins depending if block has children or not
+		if ( ! hasParent ) {
+			return hasChildren ? styles.neutral : styles.full;
+		}
+
+		if ( isParentSelected ) { // parent of a block is selected
+			const dashedBorderStyle = { // define style for dashed border
+				...styles.dashedBordered,
+				...getStylesFromColorScheme( styles.dashedBorderColor, styles.dashedBorderColorDark ),
+			};
+
+			// return apply childOfSelected or childOfSelectedLeaf
+			// margins depending if block has children or not
+			return hasChildren ?
+				{ ...styles.childOfSelected, ...dashedBorderStyle } :
+				{ ...styles.childOfSelectedLeaf, ...dashedBorderStyle };
+		}
+
+		if ( isAncestorSelected ) { // ancestor of a block is selected
+			return {
+				...styles.descendantOfSelectedLeaf,
+				...( hasChildren && styles.marginHorizontalNone ),
+			};
+		}
+
+		// if none of above condition are met return apply neutral or full
+		// margins depending if block has children or not
+		return hasChildren ? styles.neutral : styles.full;
+	}
+
+	applyBlockStyle() {
+		const {
+			isSelected,
+			isDimmed,
+		} = this.props;
+
+		return [
+			isSelected ? this.applySelectedBlockStyle() : this.applyUnSelectedBlockStyle(),
+			isDimmed && styles.dimmed,
+		];
+	}
+
 	render() {
 		const {
-			borderStyle,
 			clientId,
-			focusedBorderColor,
 			icon,
 			isSelected,
 			isValid,
-			showTitle,
 			title,
 			showFloatingToolbar,
 			parentId,
-			isFirstBlock,
+			isTouchable,
 		} = this.props;
 
-		const borderColor = isSelected ? focusedBorderColor : 'transparent';
-
 		const accessibilityLabel = this.getAccessibilityLabel();
 
 		return (
 			<>
-				{ showFloatingToolbar && ( ! isFirstBlock || parentId === '' ) && <FloatingToolbar.Slot /> }
 				{ showFloatingToolbar &&
 					( <FloatingToolbar>
 						<Toolbar passedStyle={ styles.toolbar }>
@@ -145,17 +222,15 @@ class BlockListBlock extends Component {
 					accessible={ ! isSelected }
 					accessibilityRole={ 'button' }
 				>
-					<View style={ [ styles.blockHolder, borderStyle, { borderColor } ] }>
-						{ showTitle && this.renderBlockTitle() }
-						<View
-							accessibilityLabel={ accessibilityLabel }
-							style={ [ ! isSelected && styles.blockContainer, isSelected && styles.blockContainerFocused ] }
-						>
-							{ isValid && this.getBlockForType() }
-							{ ! isValid &&
+					<View
+						pointerEvents={ isTouchable ? 'auto' : 'box-only' }
+						accessibilityLabel={ accessibilityLabel }
+						style={ this.applyBlockStyle() }
+					>
+						{ isValid && this.getBlockForType() }
+						{ ! isValid &&
 							<BlockInvalidWarning blockTitle={ title } icon={ icon } />
-							}
-						</View>
+						}
 						{ isSelected && <BlockMobileToolbar clientId={ clientId } /> }
 					</View>
 				</TouchableWithoutFeedback>
@@ -172,13 +247,20 @@ export default compose( [
 			isBlockSelected,
 			__unstableGetBlockWithoutInnerBlocks,
 			getBlockHierarchyRootClientId,
+			getSelectedBlockClientId,
 			getBlock,
 			getBlockRootClientId,
-			getSelectedBlock,
+			getLowestCommonAncestorWithSelectedBlock,
+			getBlockParents,
+			getBlockCount,
 		} = select( 'core/block-editor' );
+
+		const {
+			getGroupingBlockName,
+		} = select( 'core/blocks' );
+
 		const order = getBlockIndex( clientId, rootClientId );
 		const isSelected = isBlockSelected( clientId );
-		const isFirstBlock = order === 0;
 		const isLastBlock = order === getBlocks().length - 1;
 		const block = __unstableGetBlockWithoutInnerBlocks( clientId );
 		const { name, attributes, isValid } = block || {};
@@ -187,18 +269,34 @@ export default compose( [
 		const icon = blockType.icon;
 		const getAccessibilityLabelExtra = blockType.__experimentalGetAccessibilityLabel;
 
-		const selectedBlock = getSelectedBlock();
-		const parentId = getBlockRootClientId( clientId );
-		const parentBlock = getBlock( parentId );
-
-		const isMediaText = selectedBlock && selectedBlock.name === 'core/media-text';
-		const isMediaTextParent = parentBlock && parentBlock.name === 'core/media-text';
+		const parents = getBlockParents( clientId, true );
+		const parentId = parents[ 0 ] || '';
 
 		const rootBlockId = getBlockHierarchyRootClientId( clientId );
 		const rootBlock = getBlock( rootBlockId );
 		const hasRootInnerBlocks = rootBlock.innerBlocks.length !== 0;
 
-		const showFloatingToolbar = isSelected && hasRootInnerBlocks && ! isMediaText && ! isMediaTextParent;
+		const showFloatingToolbar = isSelected && hasRootInnerBlocks;
+
+		const selectedBlockClientId = getSelectedBlockClientId();
+
+		const commonAncestor = getLowestCommonAncestorWithSelectedBlock( clientId );
+		const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1;
+		const firstToSelectId = commonAncestor ? parents[ commonAncestorIndex ] : parents[ parents.length - 1 ];
+
+		const hasChildren = !! getBlockCount( clientId );
+		const hasParent = !! parents[ 0 ];
+		const isParentSelected = selectedBlockClientId && selectedBlockClientId === parents[ 0 ];
+		const isAncestorSelected = selectedBlockClientId && parents.includes( selectedBlockClientId );
+		const isSelectedBlockNested = !! getBlockRootClientId( selectedBlockClientId );
+
+		const isDescendantSelected = selectedBlockClientId && getBlockParents( selectedBlockClientId ).includes( clientId );
+		const isDescendantOfParentSelected = selectedBlockClientId && getBlockParents( selectedBlockClientId ).includes( parentId );
+		const isTouchable = isSelected || isDescendantOfParentSelected || isParentSelected || parentId === '';
+		const isDimmed = ! isSelected && isSelectedBlockNested && ! isAncestorSelected && ! isDescendantSelected && ( isDescendantOfParentSelected || rootBlockId === clientId );
+
+		const isInnerBlockHolder = name === getGroupingBlockName();
+		const isRootListInnerBlockHolder = ! isSelectedBlockNested && isInnerBlockHolder;
 
 		return {
 			icon,
@@ -207,13 +305,21 @@ export default compose( [
 			title,
 			attributes,
 			blockType,
-			isFirstBlock,
 			isLastBlock,
 			isSelected,
 			isValid,
 			getAccessibilityLabelExtra,
 			showFloatingToolbar,
 			parentId,
+			isParentSelected,
+			firstToSelectId,
+			hasChildren,
+			hasParent,
+			isAncestorSelected,
+			isTouchable,
+			isDimmed,
+			isSelectedBlockNested,
+			isRootListInnerBlockHolder,
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => {
@@ -259,4 +365,5 @@ export default compose( [
 			},
 		};
 	} ),
+	withPreferredColorScheme,
 ] )( BlockListBlock );