From fb51163d5a331b4e3f3828bf6a8c0c376cbd80eb Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 16 Dec 2019 09:07:04 +0100 Subject: [PATCH 1/6] Styling fixes to navigation feature --- packages/base-styles/_variables.scss | 2 +- .../src/components/block-list/block.native.js | 17 +++++++++++++++-- .../src/components/block-list/block.native.scss | 8 ++++++-- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 655a2689bd692..98893ad4b9014 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -72,7 +72,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 e5eec2effa8cc..032d15a2cda31 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'; /** @@ -108,6 +108,7 @@ class BlockListBlock extends Component { getStylesFromColorScheme, isSmallScreen, isRootListInnerBlockHolder, + isUnregisteredBlock, } = this.props; const fullSolidBorderStyle = { // define style for full border @@ -115,6 +116,10 @@ class BlockListBlock extends Component { ...getStylesFromColorScheme( styles.solidBorderColor, styles.solidBorderColorDark ), }; + if ( isUnregisteredBlock ) { + return { ...styles.selectedLeaf, ...fullSolidBorderStyle }; + } + if ( hasChildren ) { // if block has children apply style for selected parent return { ...styles.selectedParent, ...fullSolidBorderStyle }; } @@ -143,8 +148,13 @@ class BlockListBlock extends Component { isAncestorSelected, hasParent, getStylesFromColorScheme, + isUnregisteredBlock, } = this.props; + if ( isUnregisteredBlock ) { + return styles.full; + } + // if block does not have parent apply neutral or full // margins depending if block has children or not if ( ! hasParent ) { @@ -261,6 +271,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; @@ -273,7 +285,7 @@ export default compose( [ const rootBlock = getBlock( rootBlockId ); const hasRootInnerBlocks = rootBlock.innerBlocks.length !== 0; - const showFloatingToolbar = isSelected && hasRootInnerBlocks; + const showFloatingToolbar = isSelected && hasRootInnerBlocks && ! isUnregisteredBlock; const selectedBlockClientId = getSelectedBlockClientId(); @@ -317,6 +329,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 ff9cea835a83c..0743e2da1f277 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 { From 9e17396901f22a4631564f28271c37790dc523c3 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 16 Dec 2019 11:47:10 +0100 Subject: [PATCH 2/6] Add netural styles for toolbar --- .../src/components/block-list/block.native.js | 13 ++++++++++++- .../src/components/block-list/block.native.scss | 5 +++++ .../src/components/block-list/breadcrumb.native.js | 6 +++++- 3 files changed, 22 insertions(+), 2 deletions(-) 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 032d15a2cda31..cbe59afb55ef3 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -198,6 +198,17 @@ class BlockListBlock extends Component { ]; } + applyToolbarStyle() { + const { + hasChildren, + isUnregisteredBlock, + } = this.props; + + if ( ! hasChildren || isUnregisteredBlock ) { + return styles.neutralToolbar; + } + } + render() { const { clientId, @@ -238,7 +249,7 @@ class BlockListBlock extends Component { style={ this.applyBlockStyle() } > { isValid ? this.getBlockForType() : } - { isSelected && } + { isSelected && } 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 0743e2da1f277..3867b58310597 100644 --- a/packages/block-editor/src/components/block-list/block.native.scss +++ b/packages/block-editor/src/components/block-list/block.native.scss @@ -134,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 0bea56e4da6dd..6e47499b350c8 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 && ( [ , , From fa705009cd144329488e2a56f62547ed2422c6ce Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 16 Dec 2019 12:43:21 +0100 Subject: [PATCH 3/6] Fix condition for not registered component --- .../block-editor/src/components/block-list/block.native.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) 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 cbe59afb55ef3..7342c0ac7f64a 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -116,11 +116,7 @@ class BlockListBlock extends Component { ...getStylesFromColorScheme( styles.solidBorderColor, styles.solidBorderColorDark ), }; - if ( isUnregisteredBlock ) { - return { ...styles.selectedLeaf, ...fullSolidBorderStyle }; - } - - if ( hasChildren ) { // if block has children apply style for selected parent + if ( hasChildren && ! isUnregisteredBlock ) { // if block has children apply style for selected parent return { ...styles.selectedParent, ...fullSolidBorderStyle }; } From 6dd9b9957d34f7e15971f0d1803de03e1742ba8c Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 17 Dec 2019 12:22:26 +0100 Subject: [PATCH 4/6] Display 'Unsupported' in breadcrumbs for missing components --- .../src/components/block-list/block.native.js | 2 +- .../src/components/block-list/breadcrumb.native.js | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) 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 7342c0ac7f64a..b18ff492ef811 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -292,7 +292,7 @@ export default compose( [ const rootBlock = getBlock( rootBlockId ); const hasRootInnerBlocks = rootBlock.innerBlocks.length !== 0; - const showFloatingToolbar = isSelected && hasRootInnerBlocks && ! isUnregisteredBlock; + const showFloatingToolbar = isSelected && hasRootInnerBlocks; const selectedBlockClientId = getSelectedBlockClientId(); 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 6e47499b350c8..4ae8756d6362c 100644 --- a/packages/block-editor/src/components/block-list/breadcrumb.native.js +++ b/packages/block-editor/src/components/block-list/breadcrumb.native.js @@ -4,7 +4,8 @@ import { Icon } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { getBlockType } from '@wordpress/blocks'; +import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; /** * External dependencies @@ -16,10 +17,9 @@ import { View, Text, TouchableOpacity } from 'react-native'; */ import BlockTitle from '../block-title'; import SubdirectorSVG from './subdirectory-icon'; - import styles from './breadcrumb.scss'; -const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon } ) => { +const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon, isUnregisteredBlock } ) => { return ( - + { isUnregisteredBlock ? __( 'Unsupported' ) : } ); @@ -52,10 +52,13 @@ export default compose( [ const rootClientId = getBlockRootClientId( clientId ); + const isUnregisteredBlock = blockName === getUnregisteredTypeHandlerName(); + if ( ! rootClientId ) { return { clientId, blockIcon, + isUnregisteredBlock, }; } const rootBlockName = getBlockName( rootClientId ); @@ -67,6 +70,7 @@ export default compose( [ blockIcon, rootClientId, rootBlockIcon, + isUnregisteredBlock, }; } ), ] )( BlockBreadcrumb ); From b5a801daceafa9cfa1706bb016c8cd0a1e8c9efb Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 20 Dec 2019 11:37:21 +0100 Subject: [PATCH 5/6] Refactor after CR --- .../src/components/block-list/block.native.js | 7 +------ .../src/components/block-list/breadcrumb.native.js | 12 ++++-------- packages/block-library/src/missing/index.js | 2 +- 3 files changed, 6 insertions(+), 15 deletions(-) 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 b18ff492ef811..ee1148a4be967 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -144,13 +144,8 @@ class BlockListBlock extends Component { isAncestorSelected, hasParent, getStylesFromColorScheme, - isUnregisteredBlock, } = this.props; - if ( isUnregisteredBlock ) { - return styles.full; - } - // if block does not have parent apply neutral or full // margins depending if block has children or not if ( ! hasParent ) { @@ -300,7 +295,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 ); 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 4ae8756d6362c..6e47499b350c8 100644 --- a/packages/block-editor/src/components/block-list/breadcrumb.native.js +++ b/packages/block-editor/src/components/block-list/breadcrumb.native.js @@ -4,8 +4,7 @@ import { Icon } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks'; -import { __ } from '@wordpress/i18n'; +import { getBlockType } from '@wordpress/blocks'; /** * External dependencies @@ -17,9 +16,10 @@ import { View, Text, TouchableOpacity } from 'react-native'; */ import BlockTitle from '../block-title'; import SubdirectorSVG from './subdirectory-icon'; + import styles from './breadcrumb.scss'; -const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon, isUnregisteredBlock } ) => { +const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon } ) => { return ( - { isUnregisteredBlock ? __( 'Unsupported' ) : } + ); @@ -52,13 +52,10 @@ export default compose( [ const rootClientId = getBlockRootClientId( clientId ); - const isUnregisteredBlock = blockName === getUnregisteredTypeHandlerName(); - if ( ! rootClientId ) { return { clientId, blockIcon, - isUnregisteredBlock, }; } const rootBlockName = getBlockName( rootClientId ); @@ -70,7 +67,6 @@ export default compose( [ blockIcon, rootClientId, rootBlockIcon, - isUnregisteredBlock, }; } ), ] )( BlockBreadcrumb ); diff --git a/packages/block-library/src/missing/index.js b/packages/block-library/src/missing/index.js index 301efedc3b826..3b9f0c48c1395 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, From ade20e1e93ef8a3768573e41335ff2fdd75ed934 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 20 Dec 2019 12:11:23 +0100 Subject: [PATCH 6/6] Remove leftovers --- .../block-editor/src/components/block-list/block.native.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 ee1148a4be967..52207023a13c5 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -108,7 +108,6 @@ class BlockListBlock extends Component { getStylesFromColorScheme, isSmallScreen, isRootListInnerBlockHolder, - isUnregisteredBlock, } = this.props; const fullSolidBorderStyle = { // define style for full border @@ -116,7 +115,7 @@ class BlockListBlock extends Component { ...getStylesFromColorScheme( styles.solidBorderColor, styles.solidBorderColorDark ), }; - if ( hasChildren && ! isUnregisteredBlock ) { // if block has children apply style for selected parent + if ( hasChildren ) { // if block has children apply style for selected parent return { ...styles.selectedParent, ...fullSolidBorderStyle }; }