styling fixes after navigation feature merge (#19455)

* Styling fixes to navigation feature * Add netural styles for toolbar * Fix condition for not registered component * Display 'Unsupported' in breadcrumbs for missing components * Refactor after CR * Remove leftovers
WordPress · Jan 7, 2020 · 4a780ea · 4a780ea
1 parent 296f94c
commit 4a780ea
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 8 deletions.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -74,7 +74,7 @@ $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;
+$block-custom-appender-to-content: $block-selected-margin - $block-selected-border-width;
 $block-media-container-to-content: $block-selected-child-margin + $block-selected-border-width;
 
 // Buttons & UI Widgets

diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -14,7 +14,7 @@ import { Component } from '@wordpress/element';
 import { ToolbarButton, Toolbar } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -188,6 +188,17 @@ class BlockListBlock extends Component {
 		];
 	}
 
+	applyToolbarStyle() {
+		const {
+			hasChildren,
+			isUnregisteredBlock,
+		} = this.props;
+
+		if ( ! hasChildren || isUnregisteredBlock ) {
+			return styles.neutralToolbar;
+		}
+	}
+
 	render() {
 		const {
 			clientId,
@@ -228,7 +239,7 @@ class BlockListBlock extends Component {
 						style={ this.applyBlockStyle() }
 					>
 						{ isValid ? this.getBlockForType() : <BlockInvalidWarning blockTitle={ title } icon={ icon } /> }
-						{ isSelected && <BlockMobileToolbar clientId={ clientId } /> }
+						<View style={ this.applyToolbarStyle() } >{ isSelected && <BlockMobileToolbar clientId={ clientId } /> }</View>
 					</View>
 				</TouchableWithoutFeedback>
 			</>
@@ -261,6 +272,8 @@ export default compose( [
 		const isLastBlock = order === getBlocks().length - 1;
 		const block = __unstableGetBlockWithoutInnerBlocks( clientId );
 		const { name, attributes, isValid } = block || {};
+
+		const isUnregisteredBlock = name === getUnregisteredTypeHandlerName();
 		const blockType = getBlockType( name || 'core/missing' );
 		const title = blockType.title;
 		const icon = blockType.icon;
@@ -281,7 +294,7 @@ export default compose( [
 		const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1;
 		const firstToSelectId = commonAncestor ? parents[ commonAncestorIndex ] : parents[ parents.length - 1 ];
 
-		const hasChildren = !! getBlockCount( clientId );
+		const hasChildren = ! isUnregisteredBlock && !! getBlockCount( clientId );
 		const hasParent = !! parentId;
 		const isParentSelected = selectedBlockClientId && selectedBlockClientId === parentId;
 		const isAncestorSelected = selectedBlockClientId && parents.includes( selectedBlockClientId );
@@ -317,6 +330,7 @@ export default compose( [
 			isTouchable,
 			isDimmed,
 			isRootListInnerBlockHolder,
+			isUnregisteredBlock,
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => {

diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss
@@ -75,12 +75,16 @@
 
 .selectedLeaf {
 	margin: $block-selected-margin;
-	padding: $block-selected-to-content;
+	padding-left: $block-selected-to-content;
+	padding-right: $block-selected-to-content;
+	padding-top: $block-selected-to-content;
 }
 
 .selectedRootLeaf {
 	margin: 0;
-	padding: $block-edge-to-content;
+	padding-left: $block-edge-to-content;
+	padding-right: $block-edge-to-content;
+	padding-top: $block-edge-to-content;
 }
 
 .selectedParent {
@@ -130,3 +134,8 @@
 	background-color: #e9eff3;
 	opacity: 0.4;
 }
+
+.neutralToolbar {
+	margin-left: -$block-edge-to-content;
+	margin-right: -$block-edge-to-content;
+}
diff --git a/packages/block-editor/src/components/block-list/breadcrumb.native.js b/packages/block-editor/src/components/block-list/breadcrumb.native.js
@@ -22,7 +22,11 @@ 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 */} }>
+			<TouchableOpacity
+				style={ styles.button }
+				onPress={ () => {/* Open BottomSheet with markup */} }
+				disabled={ true } /* Disable temporarily since onPress function is empty */
+			>
 				{ 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>,

diff --git a/packages/block-library/src/missing/index.js b/packages/block-library/src/missing/index.js
@@ -16,7 +16,7 @@ export { metadata, name };
 
 export const settings = {
 	name,
-	title: __( 'Unrecognized Block' ),
+	title: __( 'Unsupported' ),
 	description: __( 'Your site doesn’t include support for this block.' ),
 	supports: {
 		className: false,