From faad063f6e69731f96f85bb4a668d4c6e08ed081 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 5 Apr 2023 16:12:14 +1000 Subject: [PATCH 1/3] List View: Reduce spacing for each nesting level, and between block icon and block title --- packages/block-editor/src/components/list-view/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index a04572da98e5f..b2a08c09cb689 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -186,7 +186,7 @@ } .block-editor-block-icon { - margin-right: $grid-unit-10; + margin-right: $grid-unit-05; flex: 0 0 $icon-size; } @@ -355,7 +355,7 @@ // Indent is a full icon size, plus 4px which optically aligns child icons to the text label above. $block-navigation-max-indent: 8; .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander { - margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 ); + margin-left: ( math.div($icon-size, 2) ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 ); } .block-editor-list-view-leaf:not([aria-level="1"]) { @@ -367,10 +367,10 @@ $block-navigation-max-indent: 8; @for $i from 0 to $block-navigation-max-indent { .block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander { @if $i - 1 >= 0 { - margin-left: ( $icon-size * $i ) + 4 * ($i - 1); + margin-left: ( math.div($icon-size, 2) * $i ) + 4 * ($i - 1); } @else { - margin-left: ( $icon-size * $i ); + margin-left: ( math.div($icon-size, 2) * $i ); } } } From 3e2ab5f4cfc1bb1b275f4aa08b8614165f939695 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:21:16 +1000 Subject: [PATCH 2/3] Try fixing up drop indicator line positioning --- .../block-editor/src/components/list-view/drop-indicator.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/list-view/drop-indicator.js b/packages/block-editor/src/components/list-view/drop-indicator.js index 1e8d51a73919a..4ded8de24fafe 100644 --- a/packages/block-editor/src/components/list-view/drop-indicator.js +++ b/packages/block-editor/src/components/list-view/drop-indicator.js @@ -53,7 +53,11 @@ export default function ListViewDropIndicator( { '.block-editor-block-icon' ); const rootBlockIconRect = rootBlockIconElement.getBoundingClientRect(); - return rootBlockIconRect.right - targetElementRect.left; + return ( + rootBlockIconRect.right - + targetElementRect.left - + rootBlockIconRect.width / 2 // Reduce the indentation by half the icon width. + ); }, [ rootBlockElement, targetElement ] ); const style = useMemo( () => { From 08f782fb442f63617de351409698f093ede6613a Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:22:21 +1000 Subject: [PATCH 3/3] Fix spacing of first level indent, tweak positioning of drop indicator line --- .../src/components/list-view/drop-indicator.js | 6 +++++- .../block-editor/src/components/list-view/style.scss | 9 +++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/list-view/drop-indicator.js b/packages/block-editor/src/components/list-view/drop-indicator.js index 4ded8de24fafe..18e1c1cfd5847 100644 --- a/packages/block-editor/src/components/list-view/drop-indicator.js +++ b/packages/block-editor/src/components/list-view/drop-indicator.js @@ -53,10 +53,14 @@ export default function ListViewDropIndicator( { '.block-editor-block-icon' ); const rootBlockIconRect = rootBlockIconElement.getBoundingClientRect(); + + // The indent is the distance from the left edge of the target element + // to the right edge of the root block icon, minus 1/4 of the width of the icon + // to account for the block icon's padding. return ( rootBlockIconRect.right - targetElementRect.left - - rootBlockIconRect.width / 2 // Reduce the indentation by half the icon width. + rootBlockIconRect.width / 4 ); }, [ rootBlockElement, targetElement ] ); diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index b2a08c09cb689..2c6c3335a3cb8 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -352,10 +352,11 @@ } // First level of indentation is aria-level 2, max indent is 8. -// Indent is a full icon size, plus 4px which optically aligns child icons to the text label above. +// Indent is 4px plus half the icon size, plus 4px which optically aligns child icons +// to the right edge of the parent block's icon. $block-navigation-max-indent: 8; .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander { - margin-left: ( math.div($icon-size, 2) ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 ); + margin-left: 4 + ( math.div($icon-size, 2) ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 ); } .block-editor-list-view-leaf:not([aria-level="1"]) { @@ -367,10 +368,10 @@ $block-navigation-max-indent: 8; @for $i from 0 to $block-navigation-max-indent { .block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander { @if $i - 1 >= 0 { - margin-left: ( math.div($icon-size, 2) * $i ) + 4 * ($i - 1); + margin-left: 4 + ( math.div($icon-size, 2) * $i ) + 4 * ($i - 1); } @else { - margin-left: ( math.div($icon-size, 2) * $i ); + margin-left: 4 + ( math.div($icon-size, 2) * $i ); } } }