From 65545dd1b13ba8ef36d9c9f4e91626767a37faa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 3 Jun 2020 16:28:36 +0200 Subject: [PATCH 01/15] Solve conflicts --- .../src/components/block-navigation/block.js | 4 +-- .../components/block-navigation/style.scss | 9 +++++- .../src/navigation-link/index.js | 2 +- .../src/components/menu-editor/index.js | 2 +- .../src/components/menu-editor/style.scss | 29 ++++++++++++++++++- 5 files changed, 40 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index a7ffc7d9cb61de..d98a69ee6fe571 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/block-navigation/block.js @@ -71,7 +71,7 @@ export default function BlockNavigationBlock( { > { ( { ref, tabIndex, onFocus } ) => (
@@ -121,7 +121,7 @@ export default function BlockNavigationBlock( { ) } - { withBlockNavigationBlockSettings && level > 1 && ( + { withBlockNavigationBlockSettings && ( diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 018fe8cbb77457..64031b40e6abfd 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -54,6 +54,13 @@ $tree-item-height: 36px; border-radius: $border-width; } + .block-editor-block-navigation-block__mover-cell-alignment-wrapper { + display: flex; + height: 100%; + flex-direction: column; + align-items: center; + } + .block-editor-block-navigation-block__menu-cell, .block-editor-block-navigation-block__mover-cell { width: $button-size; @@ -76,7 +83,7 @@ $tree-item-height: 36px; .block-editor-block-mover-button { width: $button-size; - height: $button-size; + height: 16px; } .block-editor-inserter__toggle { diff --git a/packages/block-library/src/navigation-link/index.js b/packages/block-library/src/navigation-link/index.js index 99ab5ebfb193e0..2296f123aa5e96 100644 --- a/packages/block-library/src/navigation-link/index.js +++ b/packages/block-library/src/navigation-link/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { mapMarker as icon } from '@wordpress/icons'; +import { page as icon } from '@wordpress/icons'; /** * Internal dependencies diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js index ddf5e22732ac72..0cca5976e7ad54 100644 --- a/packages/edit-navigation/src/components/menu-editor/index.js +++ b/packages/edit-navigation/src/components/menu-editor/index.js @@ -57,7 +57,7 @@ export default function MenuEditor( { :first-child { + padding-left: $grid-unit-20; + } + > :last-child { + padding-right: $grid-unit-20; + } + + &:hover { + background: $light-gray-300; + } + + .block-editor-block-navigation-block-contents { + padding-top: $grid-unit-15; + padding-bottom: $grid-unit-15; + } +} + .edit-navigation-menu-editor__navigation-structure-panel { // IE11 requires the column to be explicitly declared. grid-column: 1; // Make panels collapsible in IE. The IE analogue of align-items: self-start;. -ms-grid-row-align: start; + + .components-card__header { + font-weight: bold; + border-bottom: 0; + padding-top: $grid-unit-30 !important; + padding-bottom: $grid-unit-30 !important; + } } .edit-navigation-menu-editor__navigation-structure-header { From 979db3cce83fe7398732da6fc06f0de7daed79d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 3 Jun 2020 10:57:43 +0200 Subject: [PATCH 02/15] Adjust movers size --- .../components/block-navigation/style.scss | 19 +++++++++++++------ 1 file changed, 13 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 64031b40e6abfd..507b766ff40c32 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -54,11 +54,11 @@ $tree-item-height: 36px; border-radius: $border-width; } - .block-editor-block-navigation-block__mover-cell-alignment-wrapper { - display: flex; - height: 100%; - flex-direction: column; - align-items: center; + .block-editor-block-navigation-block__menu-cell, + .block-editor-block-navigation-block__mover-cell, + .block-editor-block-navigation-block__contents-cell { + padding-top: 0; + padding-bottom: 0; } .block-editor-block-navigation-block__menu-cell, @@ -81,9 +81,16 @@ $tree-item-height: 36px; } } + .block-editor-block-navigation-block__mover-cell-alignment-wrapper { + display: flex; + height: 100%; + flex-direction: column; + align-items: center; + } + .block-editor-block-mover-button { width: $button-size; - height: 16px; + height: 24px; } .block-editor-inserter__toggle { From c2dd56d65403f1109063970750e818590ec09fd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 3 Jun 2020 10:58:28 +0200 Subject: [PATCH 03/15] Restore the generic icon --- packages/block-library/src/navigation-link/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/index.js b/packages/block-library/src/navigation-link/index.js index 2296f123aa5e96..99ab5ebfb193e0 100644 --- a/packages/block-library/src/navigation-link/index.js +++ b/packages/block-library/src/navigation-link/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { page as icon } from '@wordpress/icons'; +import { mapMarker as icon } from '@wordpress/icons'; /** * Internal dependencies From ada4bddbc8067099dc5f8d3e3fbf016b32921ecc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 3 Jun 2020 13:07:46 +0200 Subject: [PATCH 04/15] Consistently apply whitespace and highlighting throughout all the navigators --- .../src/components/block-navigation/style.scss | 16 +++++++++++++++- .../src/components/menu-editor/style.scss | 11 ----------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 507b766ff40c32..32c467df9256a6 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -24,13 +24,27 @@ $tree-item-height: 36px; .block-editor-block-navigation-leaf { // Use position relative for row animation. position: relative; + transition: background 0.1s ease-out; + @include reduce-motion("transition"); + + // Highlight the entire row on hover + &:hover { + background: $light-gray-300; + } + + // Do not highlight rows when inside of the popover + .block-editor-block-navigation__popover & { + &:hover { + background: transparent; + } + } .block-editor-block-navigation-block-contents { display: flex; align-items: center; width: calc(100% - 0.8em); height: auto; - padding: 6px; + padding: $grid-unit-15 6px; text-align: left; color: $dark-gray-600; border-radius: 2px; diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss index 351c3c20a2a124..a650271ea70224 100644 --- a/packages/edit-navigation/src/components/menu-editor/style.scss +++ b/packages/edit-navigation/src/components/menu-editor/style.scss @@ -50,9 +50,6 @@ } .block-editor-block-navigation-leaf { - transition: background 0.1s ease-out; - @include reduce-motion("transition"); - > :first-child { padding-left: $grid-unit-20; } @@ -60,14 +57,6 @@ padding-right: $grid-unit-20; } - &:hover { - background: $light-gray-300; - } - - .block-editor-block-navigation-block-contents { - padding-top: $grid-unit-15; - padding-bottom: $grid-unit-15; - } } .edit-navigation-menu-editor__navigation-structure-panel { From cc7205223f9b49e043360cedf1558ae8f507b22b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 3 Jun 2020 13:08:51 +0200 Subject: [PATCH 05/15] Skip the top-level navigation block for navigation block specific block navigator (this naming is so confusing!) --- packages/block-library/src/navigation/block-navigation-list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/block-navigation-list.js b/packages/block-library/src/navigation/block-navigation-list.js index fd4eadda1feb12..83c54517919bb3 100644 --- a/packages/block-library/src/navigation/block-navigation-list.js +++ b/packages/block-library/src/navigation/block-navigation-list.js @@ -26,7 +26,7 @@ export default function BlockNavigationList( { return ( <__experimentalBlockNavigationTree - blocks={ [ block ] } + blocks={ block.innerBlocks } selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } __experimentalFeatures={ __experimentalFeatures } From 7b959b02283f8ae437d059c7474ce90f479423aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 3 Jun 2020 13:18:36 +0200 Subject: [PATCH 06/15] Use a variable for mover button size --- .../block-editor/src/components/block-navigation/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 32c467df9256a6..32b1abbbfd0bd7 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -104,7 +104,7 @@ $tree-item-height: 36px; .block-editor-block-mover-button { width: $button-size; - height: 24px; + height: $button-size-small; } .block-editor-inserter__toggle { From 80eba8bf4e83133c24ddb969527c8e795a01b1c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 3 Jun 2020 14:40:27 +0200 Subject: [PATCH 07/15] Remove hover from this PR --- .../src/components/block-navigation/style.scss | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 32b1abbbfd0bd7..3490e12056f0fa 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -24,20 +24,6 @@ $tree-item-height: 36px; .block-editor-block-navigation-leaf { // Use position relative for row animation. position: relative; - transition: background 0.1s ease-out; - @include reduce-motion("transition"); - - // Highlight the entire row on hover - &:hover { - background: $light-gray-300; - } - - // Do not highlight rows when inside of the popover - .block-editor-block-navigation__popover & { - &:hover { - background: transparent; - } - } .block-editor-block-navigation-block-contents { display: flex; From f79207e2305953a92170d082a5280a8497dd347f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 3 Jun 2020 15:23:30 +0200 Subject: [PATCH 08/15] Apply correct alignment to navigator items --- .../src/components/block-navigation/style.scss | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 3490e12056f0fa..5d71357a01831d 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -34,6 +34,11 @@ $tree-item-height: 36px; text-align: left; color: $dark-gray-600; border-radius: 2px; + + .components-modal__content & { + padding-left: 0; + padding-right: 0; + } } &.is-visible .block-editor-block-navigation-block-contents { @@ -139,7 +144,7 @@ $tree-item-height: 36px; position: absolute; top: -1px; bottom: -2px; - right: 0; + right: 1px; border-right: 2px solid $light-gray-900; } @@ -153,12 +158,16 @@ $tree-item-height: 36px; height: $grid-unit-20; } + &.has-item.is-last-row::after { + top: 100%; + } + // Draw a horizontal line using border-bottom. &.has-item::after { content: ""; display: block; position: absolute; - top: $grid-unit-20; + top: calc(50% - 1px); left: 100%; width: 5px; border-bottom: 2px solid $light-gray-900; From cae1a1a67a281d00a537a50be06ef56a76a519b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 3 Jun 2020 16:19:09 +0200 Subject: [PATCH 09/15] Use pseudo elements for focus targets while preserving the large tap target --- .../components/block-navigation/style.scss | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 5d71357a01831d..c4d88f3d021903 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -93,9 +93,66 @@ $tree-item-height: 36px; align-items: center; } + // Keep the tap target large but the focus target small .block-editor-block-mover-button { + position: relative; width: $button-size; height: $button-size-small; + + // Position the icon + svg { + position: relative; + height: $button-size-small; + } + + &.is-up-button { + align-items: flex-end; + svg { + bottom: -4px; + } + } + + &.is-down-button { + align-items: flex-start; + svg { + top: -4px; + } + } + + // Don't show the focus inherited by the Button component. + &:focus:enabled { + box-shadow: none; + outline: none; + } + + // Focus style. + &:focus { + box-shadow: none; + outline: none; + } + + &:focus::before { + @include block-toolbar-button-style__focus(); + } + + // Focus and toggle pseudo elements. + &::before { + content: ""; + position: absolute; + display: block; + border-radius: $radius-block-ui; + height: 16px; + min-width: 100%; + + // Position the focus rectangle. + left: 0; + right: 0; + + // Animate in. + animation: components-button__appear-animation 0.1s ease; + animation-fill-mode: forwards; + @include reduce-motion("animation"); + } } .block-editor-inserter__toggle { From 1f59fe0d1c630f32d6a5eb61c8681c167518e6cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 3 Jun 2020 16:24:34 +0200 Subject: [PATCH 10/15] Fix the vertical line alignment --- .../block-editor/src/components/block-navigation/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index c4d88f3d021903..f31ef84eae4ddd 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -201,7 +201,7 @@ $tree-item-height: 36px; position: absolute; top: -1px; bottom: -2px; - right: 1px; + right: -1px; border-right: 2px solid $light-gray-900; } From 3e7e2d01d591490440f9b15003f5a66f784842cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 3 Jun 2020 16:52:39 +0200 Subject: [PATCH 11/15] Fix alignment of the descender lines --- .../src/components/block-navigation/style.scss | 18 ++++++++++++------ 1 file changed, 12 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 f31ef84eae4ddd..c50edbe4c97642 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -212,11 +212,7 @@ $tree-item-height: 36px; // Make the last vertical line half-height. &.has-item.is-last-row { - height: $grid-unit-20; - } - - &.has-item.is-last-row::after { - top: 100%; + height: 22px; } // Draw a horizontal line using border-bottom. @@ -224,10 +220,20 @@ $tree-item-height: 36px; content: ""; display: block; position: absolute; - top: calc(50% - 1px); + top: 22px; left: 100%; width: 5px; border-bottom: 2px solid $light-gray-900; } } } + +// 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%; + } + } +} From 575e92a72d7087ebc40a86fd532fee8f49d3e445 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Mon, 8 Jun 2020 10:33:05 +0200 Subject: [PATCH 12/15] Fix paddings on the menu management screen --- .../edit-navigation/src/components/menu-editor/style.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss index a650271ea70224..59ce9536123520 100644 --- a/packages/edit-navigation/src/components/menu-editor/style.scss +++ b/packages/edit-navigation/src/components/menu-editor/style.scss @@ -51,12 +51,11 @@ .block-editor-block-navigation-leaf { > :first-child { - padding-left: $grid-unit-20; + padding-left: 0; } - > :last-child { - padding-right: $grid-unit-20; + > :first-child button { + padding-left: 0; } - } .edit-navigation-menu-editor__navigation-structure-panel { From 4d8ee16b55004960900ab825d4cb6fad7afd6084 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Mon, 8 Jun 2020 11:22:20 +0200 Subject: [PATCH 13/15] Use separate TreeGridItem for mover arrows --- .../src/components/block-navigation/block.js | 53 +++++++++++-------- packages/components/src/index.js | 1 + packages/components/src/tree-grid/cell.js | 14 +++-- packages/components/src/tree-grid/index.js | 1 + packages/components/src/tree-grid/item.js | 8 +++ 5 files changed, 52 insertions(+), 25 deletions(-) create mode 100644 packages/components/src/tree-grid/item.js diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index d98a69ee6fe571..8008d010cef403 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/block-navigation/block.js @@ -6,7 +6,11 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { __experimentalTreeGridCell as TreeGridCell } from '@wordpress/components'; +import { + __experimentalTreeGridCell as TreeGridCell, + __experimentalTreeGridItem as TreeGridItem, +} from '@wordpress/components'; + import { moreVertical } from '@wordpress/icons'; import { useState } from '@wordpress/element'; @@ -96,27 +100,32 @@ export default function BlockNavigationBlock( { { hasRenderedMovers && ( <> - - { ( { ref, tabIndex, onFocus } ) => ( - - ) } - - - { ( { ref, tabIndex, onFocus } ) => ( - - ) } + + + { ( { ref, tabIndex, onFocus } ) => ( + + ) } + + + { ( { ref, tabIndex, onFocus } ) => ( + + ) } + ) } diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 7149a87aa96245..7c1ec414adbae9 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -105,6 +105,7 @@ export { default as __experimentalTreeGrid, TreeGridRow as __experimentalTreeGridRow, TreeGridCell as __experimentalTreeGridCell, + TreeGridItem as __experimentalTreeGridItem, } from './tree-grid'; export { default as TreeSelect } from './tree-select'; export { default as __experimentalUnitControl } from './unit-control'; diff --git a/packages/components/src/tree-grid/cell.js b/packages/components/src/tree-grid/cell.js index a804af0d501b8f..f0b881143dba65 100644 --- a/packages/components/src/tree-grid/cell.js +++ b/packages/components/src/tree-grid/cell.js @@ -1,12 +1,20 @@ /** * Internal dependencies */ -import RovingTabIndexItem from './roving-tab-index-item'; +import TreeGridItem from './item'; -export default function TreeGridCell( { children, ...props } ) { +export default function TreeGridCell( { + children, + withoutGridItem = false, + ...props +} ) { return ( - { children } + { withoutGridItem ? ( + children + ) : ( + { children } + ) } ); } diff --git a/packages/components/src/tree-grid/index.js b/packages/components/src/tree-grid/index.js index 19d05a42bb5275..8221efaac33669 100644 --- a/packages/components/src/tree-grid/index.js +++ b/packages/components/src/tree-grid/index.js @@ -160,3 +160,4 @@ export default function TreeGrid( { children, ...props } ) { export { default as TreeGridRow } from './row'; export { default as TreeGridCell } from './cell'; +export { default as TreeGridItem } from './item'; diff --git a/packages/components/src/tree-grid/item.js b/packages/components/src/tree-grid/item.js new file mode 100644 index 00000000000000..dd2eda288add30 --- /dev/null +++ b/packages/components/src/tree-grid/item.js @@ -0,0 +1,8 @@ +/** + * Internal dependencies + */ +import RovingTabIndexItem from './roving-tab-index-item'; + +export default function TreeGridItem( { children, ...props } ) { + return { children }; +} From a5de00146cd617b8550957a3aea9e78cb3f7dad3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 10 Jun 2020 14:38:28 +0200 Subject: [PATCH 14/15] Improve alignment --- .../src/components/block-navigation/style.scss | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index c50edbe4c97642..6a16fe21a95991 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -31,6 +31,8 @@ $tree-item-height: 36px; width: calc(100% - 0.8em); height: auto; padding: $grid-unit-15 6px; + margin-top: auto; + margin-bottom: auto; text-align: left; color: $dark-gray-600; border-radius: 2px; @@ -86,6 +88,10 @@ $tree-item-height: 36px; } } + .block-editor-block-navigation-block__menu-cell { + padding-top: $grid-unit-10; + } + .block-editor-block-navigation-block__mover-cell-alignment-wrapper { display: flex; height: 100%; @@ -159,7 +165,7 @@ $tree-item-height: 36px; background: $dark-gray-primary; color: $white; height: $grid-unit-30; - margin: 6px 6px 6px 0.8em; + margin: 6px 6px 6px 1px; min-width: $grid-unit-30; &:active { @@ -181,6 +187,10 @@ $tree-item-height: 36px; display: flex; } + .block-editor-block-navigation-block__contents-container { + min-height: 56px; + } + .block-editor-block-navigator-descender-line { position: relative; flex-shrink: 0; @@ -199,7 +209,7 @@ $tree-item-height: 36px; content: ""; display: block; position: absolute; - top: -1px; + top: 1px; bottom: -2px; right: -1px; border-right: 2px solid $light-gray-900; From e0e8211a6eedb86d192c9b372a90873a0c7e1935 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 10 Jun 2020 14:47:35 +0200 Subject: [PATCH 15/15] Update alignment of descender lines --- .../block-editor/src/components/block-navigation/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 6a16fe21a95991..b95fc785734f03 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -222,7 +222,7 @@ $tree-item-height: 36px; // Make the last vertical line half-height. &.has-item.is-last-row { - height: 22px; + height: 26px; } // Draw a horizontal line using border-bottom. @@ -230,7 +230,7 @@ $tree-item-height: 36px; content: ""; display: block; position: absolute; - top: 22px; + top: 26px; left: 100%; width: 5px; border-bottom: 2px solid $light-gray-900;