Skip to content

Commit

Permalink
Fix spacing of first level indent, tweak positioning of drop indicato…
Browse files Browse the repository at this point in the history
…r line
  • Loading branch information
andrewserong committed Apr 11, 2023
1 parent 3e2ab5f commit 08f782f
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 ] );

Expand Down
9 changes: 5 additions & 4 deletions packages/block-editor/src/components/list-view/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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"]) {
Expand All @@ -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 );
}
}
}
Expand Down

0 comments on commit 08f782f

Please sign in to comment.