From c162de72eec70dde3e032967ca844aff44b4a9b4 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 6 Jan 2021 16:50:45 -0500 Subject: [PATCH 1/8] Forcing nested blocks to always show, but there's gotta be a better way. --- .../block-editor/src/components/block-navigation/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js index 4e18231de1d663..d22f4aabff9d44 100644 --- a/packages/block-editor/src/components/block-navigation/index.js +++ b/packages/block-editor/src/components/block-navigation/index.js @@ -51,6 +51,10 @@ function BlockNavigation( { selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } __experimentalFeatures={ __experimentalFeatures } + + // This just duplicates the above, but if I try to remove the duplication + // then things break and I don't know why. -shaun + showNestedBlocks /> ) } From 1f0f1c987dd2bb50873d84aa659f781004d2bb95 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 6 Jan 2021 16:52:57 -0500 Subject: [PATCH 2/8] Reducing whitespace and simplifying the descenders. --- .../components/block-navigation/style.scss | 95 +++++-------------- 1 file changed, 22 insertions(+), 73 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 9d5dfb714a4a31..0e1f0a9fd9c377 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -1,6 +1,3 @@ -$tree-border-width: 2px; -$tree-item-height: 36px; - .block-editor-block-navigation__label { margin: 0 0 $grid-unit-15; color: $gray-700; @@ -10,7 +7,7 @@ $tree-item-height: 36px; } .block-editor-block-navigation__container { - padding: $grid-unit - $border-width; + min-width: 280px; } .block-editor-block-navigation-tree { @@ -33,15 +30,27 @@ $tree-item-height: 36px; align-items: center; width: 100%; height: auto; - padding: $grid-unit-15 ($grid-unit-15 / 2); - margin-top: auto; - margin-bottom: auto; + padding: ($grid-unit-15 / 2); text-align: left; color: $gray-900; border-radius: 2px; position: relative; white-space: nowrap; + &:hover { + background: $gray-100; + } + + &:focus { + z-index: 1; + } + + &.is-selected, + &.is-selected:focus { + background: $gray-900; + color: $white; + } + &.is-dropping-before::before { content: ""; position: absolute; @@ -91,14 +100,6 @@ $tree-item-height: 36px; margin-right: 6px; } - &.is-selected .block-editor-block-icon svg, - &.is-selected:focus .block-editor-block-icon svg { - color: $white; - background: $gray-900; - box-shadow: 0 0 0 $border-width $gray-900; - border-radius: $border-width; - } - .block-editor-block-navigation-block__menu-cell, .block-editor-block-navigation-block__mover-cell, .block-editor-block-navigation-block__contents-cell { @@ -225,64 +226,12 @@ $tree-item-height: 36px; .block-editor-block-navigation-appender__container { display: flex; } - - .block-editor-block-navigation-block__contents-container { - min-height: $grid-unit-60; - } - - .block-editor-block-navigator-descender-line { - position: relative; - flex-shrink: 0; - width: ( $button-size / 2 ) + 6px; - - &:first-child { - width: ( $button-size / 2 ); - } - - &.has-item { - margin-right: 6px; - } - - // Draw a vertical line using border-right. - &::before { - content: ""; - display: block; - position: absolute; - top: 1px; - bottom: -2px; - right: -1px; - border-right: 2px solid $gray-600; - } - - // If a vertical line has terminated, don't draw it. - &.is-terminated::before { - border-color: transparent; - } - - // Make the last vertical line half-height. - &.has-item.is-last-row { - height: 26px; - } - - // Draw a horizontal line using border-bottom. - &.has-item::after { - content: ""; - display: block; - position: absolute; - top: 26px; - left: 100%; - width: 5px; - border-bottom: 2px solid $gray-600; - } - } } -// Position the horizontal line in the middle of appender's height -.block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line { - &.has-item.is-last-row { - height: $grid-unit-20; - &::after { - top: 100%; - } - } +.block-editor-block-navigator-descender-line { + flex-shrink: 0; + width: 18px; + height: 2px; + position: relative; + top: 17px; } From 55518ef62af64cb565c7d747599f39c3fcbf9183 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 6 Jan 2021 16:59:10 -0500 Subject: [PATCH 3/8] Adjusting the selected state. --- .../src/components/block-navigation/style.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 0e1f0a9fd9c377..67a46724a2c2f1 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -21,6 +21,12 @@ // Use position relative for row animation. position: relative; + &.is-selected .block-editor-block-navigation-block-contents, + &.is-selected:focus .block-editor-block-navigation-block-contents { + background: $gray-900; + color: $white; + } + &.is-dragging { display: none; } @@ -45,12 +51,6 @@ z-index: 1; } - &.is-selected, - &.is-selected:focus { - background: $gray-900; - color: $white; - } - &.is-dropping-before::before { content: ""; position: absolute; From 67367e5cd6938d153d13a0b6a71466b4929cd600 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 7 Jan 2021 15:20:20 -0500 Subject: [PATCH 4/8] Moving the hasHierarchy check into the value of blocks. --- .../src/components/block-navigation/index.js | 27 +++++-------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js index d22f4aabff9d44..ccce62a2c33131 100644 --- a/packages/block-editor/src/components/block-navigation/index.js +++ b/packages/block-editor/src/components/block-navigation/index.js @@ -36,27 +36,14 @@ function BlockNavigation( {

{ __( 'List view' ) }

- { hasHierarchy && ( - - ) } - { ! hasHierarchy && ( - - ) } + ); } From f25c475d8dbadc49ebe462ab98ec12054637b99f Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 7 Jan 2021 15:27:21 -0500 Subject: [PATCH 5/8] This isn't needed. Leftover from some earlier explorations. --- .../block-editor/src/components/block-navigation/style.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 67a46724a2c2f1..4d519bfffaf1b5 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -231,7 +231,4 @@ .block-editor-block-navigator-descender-line { flex-shrink: 0; width: 18px; - height: 2px; - position: relative; - top: 17px; } From 52f5c0bdf56cd2bf9eebde2600c71703e354b895 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 7 Jan 2021 15:29:19 -0500 Subject: [PATCH 6/8] Overriding the hover state when selected. --- packages/block-editor/src/components/block-navigation/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 4d519bfffaf1b5..bc906f8d43fe81 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -22,6 +22,7 @@ position: relative; &.is-selected .block-editor-block-navigation-block-contents, + &.is-selected:hover .block-editor-block-navigation-block-contents, &.is-selected:focus .block-editor-block-navigation-block-contents { background: $gray-900; color: $white; From eba63e7f7b8eb62e7b49bb8c639b620222062932 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Fri, 8 Jan 2021 17:06:34 -0500 Subject: [PATCH 7/8] Simplifying the descener-lines component and moving it inside the button. This makes the whole row clickable, regardless of indentation. --- .../components/block-navigation/block-select-button.js | 2 ++ .../block-editor/src/components/block-navigation/block.js | 7 ------- .../src/components/block-navigation/descender-lines.js | 8 +------- 3 files changed, 3 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/block-select-button.js b/packages/block-editor/src/components/block-navigation/block-select-button.js index e6f40a1ed62092..7b53abbc9164e9 100644 --- a/packages/block-editor/src/components/block-navigation/block-select-button.js +++ b/packages/block-editor/src/components/block-navigation/block-select-button.js @@ -19,6 +19,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import BlockIcon from '../block-icon'; +import DescenderLines from './descender-lines'; import useBlockDisplayInformation from '../use-block-display-information'; import { getBlockPositionDescription } from './utils'; @@ -70,6 +71,7 @@ function BlockNavigationBlockSelectButton( onDragEnd={ onDragEnd } draggable={ draggable } > + { blockDisplayName } { isSelected && ( diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index da24893d49d0d6..6ae8a43a376ed2 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/block-navigation/block.js @@ -25,7 +25,6 @@ import { BlockMoverUpButton, BlockMoverDownButton, } from '../block-mover/button'; -import DescenderLines from './descender-lines'; import BlockNavigationBlockContents from './block-contents'; import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown'; import { useBlockNavigationContext } from './context'; @@ -39,7 +38,6 @@ export default function BlockNavigationBlock( { rowCount, siblingBlockCount, showBlockMovers, - terminatedLevels, path, } ) { const cellRef = useRef( null ); @@ -108,11 +106,6 @@ export default function BlockNavigationBlock( { > { ( { ref, tabIndex, onFocus } ) => (
- onClick( block.clientId ) } diff --git a/packages/block-editor/src/components/block-navigation/descender-lines.js b/packages/block-editor/src/components/block-navigation/descender-lines.js index 58b7144bd6dd85..1a08955de9c3b4 100644 --- a/packages/block-editor/src/components/block-navigation/descender-lines.js +++ b/packages/block-editor/src/components/block-navigation/descender-lines.js @@ -6,11 +6,7 @@ import classnames from 'classnames'; const lineClassName = 'block-editor-block-navigator-descender-line'; -export default function DescenderLines( { - level, - isLastRow, - terminatedLevels, -} ) { +export default function DescenderLines( { level } ) { return times( level - 1, ( index ) => { // The first 'level' that has a descender line is level 2. // Add 2 to the zero-based index below to reflect that. @@ -22,8 +18,6 @@ export default function DescenderLines( { aria-hidden="true" className={ classnames( lineClassName, { 'has-item': hasItem, - 'is-last-row': isLastRow, - 'is-terminated': terminatedLevels.includes( currentLevel ), } ) } /> ); From 02c782f2add00381ac00bf82a359769894887888 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Tue, 12 Jan 2021 20:15:15 -0500 Subject: [PATCH 8/8] Renaming the descender-lines component to indentation. --- .../src/components/block-navigation/appender.js | 9 ++------- .../components/block-navigation/block-select-button.js | 4 ++-- .../{descender-lines.js => indentation.js} | 6 +++--- .../src/components/block-navigation/style.scss | 2 +- 4 files changed, 8 insertions(+), 13 deletions(-) rename packages/block-editor/src/components/block-navigation/{descender-lines.js => indentation.js} (70%) diff --git a/packages/block-editor/src/components/block-navigation/appender.js b/packages/block-editor/src/components/block-navigation/appender.js index 58bdb381e10e67..5ea05906062c0c 100644 --- a/packages/block-editor/src/components/block-navigation/appender.js +++ b/packages/block-editor/src/components/block-navigation/appender.js @@ -15,7 +15,7 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import BlockNavigationLeaf from './leaf'; -import DescenderLines from './descender-lines'; +import Indentation from './indentation'; import Inserter from '../inserter'; export default function BlockNavigationAppender( { @@ -23,7 +23,6 @@ export default function BlockNavigationAppender( { position, level, rowCount, - terminatedLevels, path, } ) { const isDragging = useSelect( @@ -63,11 +62,7 @@ export default function BlockNavigationAppender( { > { ( { ref, tabIndex, onFocus } ) => (
- + - + { blockDisplayName } { isSelected && ( diff --git a/packages/block-editor/src/components/block-navigation/descender-lines.js b/packages/block-editor/src/components/block-navigation/indentation.js similarity index 70% rename from packages/block-editor/src/components/block-navigation/descender-lines.js rename to packages/block-editor/src/components/block-navigation/indentation.js index 1a08955de9c3b4..6ec4e5206134c8 100644 --- a/packages/block-editor/src/components/block-navigation/descender-lines.js +++ b/packages/block-editor/src/components/block-navigation/indentation.js @@ -4,11 +4,11 @@ import { times } from 'lodash'; import classnames from 'classnames'; -const lineClassName = 'block-editor-block-navigator-descender-line'; +const lineClassName = 'block-editor-block-navigator-indentation'; -export default function DescenderLines( { level } ) { +export default function Indentation( { level } ) { return times( level - 1, ( index ) => { - // The first 'level' that has a descender line is level 2. + // The first 'level' that has an indentation is level 2. // Add 2 to the zero-based index below to reflect that. const currentLevel = index + 2; const hasItem = currentLevel === level; diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index bc906f8d43fe81..546dab181208ef 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -229,7 +229,7 @@ } } -.block-editor-block-navigator-descender-line { +.block-editor-block-navigator-indentation { flex-shrink: 0; width: 18px; }