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/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/indentation.js similarity index 58% rename from packages/block-editor/src/components/block-navigation/descender-lines.js rename to packages/block-editor/src/components/block-navigation/indentation.js index 58b7144bd6dd85..6ec4e5206134c8 100644 --- a/packages/block-editor/src/components/block-navigation/descender-lines.js +++ b/packages/block-editor/src/components/block-navigation/indentation.js @@ -4,15 +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, - isLastRow, - terminatedLevels, -} ) { +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; @@ -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 ), } ) } /> ); diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js index 4e18231de1d663..ccce62a2c33131 100644 --- a/packages/block-editor/src/components/block-navigation/index.js +++ b/packages/block-editor/src/components/block-navigation/index.js @@ -36,23 +36,14 @@ function BlockNavigation( {

{ __( 'List view' ) }

- { hasHierarchy && ( - - ) } - { ! hasHierarchy && ( - - ) } + +
); } diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 9d5dfb714a4a31..546dab181208ef 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 { @@ -24,6 +21,13 @@ $tree-item-height: 36px; // Use position relative for row animation. 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; + } + &.is-dragging { display: none; } @@ -33,15 +37,21 @@ $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-dropping-before::before { content: ""; position: absolute; @@ -91,14 +101,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 +227,9 @@ $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-indentation { + flex-shrink: 0; + width: 18px; }