From 4a780ea60cfb8c785a551ac8b11a80981a8f47bd Mon Sep 17 00:00:00 2001 From: Luke Walczak Date: Tue, 7 Jan 2020 10:51:13 +0100 Subject: [PATCH] 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 --- packages/base-styles/_variables.scss | 2 +- .../src/components/block-list/block.native.js | 20 ++++++++++++++++--- .../components/block-list/block.native.scss | 13 ++++++++++-- .../block-list/breadcrumb.native.js | 6 +++++- packages/block-library/src/missing/index.js | 2 +- 5 files changed, 35 insertions(+), 8 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 5c034cf7fb963c..ab3cad778bce93 100644 --- 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 index e5eec2effa8cce..52207023a13c54 100644 --- 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() : } - { isSelected && } + { isSelected && } @@ -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 index ff9cea835a83c9..3867b583105979 100644 --- 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 index 0bea56e4da6ddf..6e47499b350c8d 100644 --- 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 ( - {/* Open BottomSheet with markup */} }> + {/* Open BottomSheet with markup */} } + disabled={ true } /* Disable temporarily since onPress function is empty */ + > { rootClientId && rootBlockIcon && ( [ , , diff --git a/packages/block-library/src/missing/index.js b/packages/block-library/src/missing/index.js index 301efedc3b8265..3b9f0c48c13956 100644 --- 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,