Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

List View: Reduce spacing for each nesting level, and between block icon and block title #49600

Closed
wants to merge 3 commits into from
Closed

List View: Reduce spacing for each nesting level, and between block icon and block title #49600

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
faad063
List View: Reduce spacing for each nesting level, and between block i…
andrewserong Apr 5, 2023
3e2ab5f
Try fixing up drop indicator line positioning
andrewserong Apr 5, 2023
08f782f
Fix spacing of first level indent, tweak positioning of drop indicato…
andrewserong Apr 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/block-editor/src/components/list-view/drop-indicator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,15 @@ export default function ListViewDropIndicator( {
'.block-editor-block-icon'
);
const rootBlockIconRect = rootBlockIconElement.getBoundingClientRect();
return rootBlockIconRect.right - targetElementRect.left;

// 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 / 4
);
}, [ rootBlockElement, targetElement ] );

const style = useMemo( () => {
Expand Down
11 changes: 6 additions & 5 deletions packages/block-editor/src/components/list-view/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@
}

.block-editor-block-icon {
margin-right: $grid-unit-10;
margin-right: $grid-unit-05;
flex: 0 0 $icon-size;
}

Expand Down 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: ( $icon-size ) * $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: ( $icon-size * $i ) + 4 * ($i - 1);
margin-left: 4 + ( math.div($icon-size, 2) * $i ) + 4 * ($i - 1);
}
@else {
margin-left: ( $icon-size * $i );
margin-left: 4 + ( math.div($icon-size, 2) * $i );
}
}
}
Expand Down