Skip to content

Commit

Permalink
Reduce list view spacing to decrease likelihood of scrolling (#60713)
Browse files Browse the repository at this point in the history 
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: mikemcalister <mmcalister@git.wordpress.org>
  • Loading branch information
@jameskoster @richtabor @andrewserong
6 people committed Apr 23, 2024
1 parent 0061073 commit 14db362
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 31 deletions.
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/list-view/index.js
View file
Expand Up @@ -64,7 +64,7 @@ const expanded = ( state, action ) => {
return state;
};

export const BLOCK_LIST_ITEM_HEIGHT = 36;
export const BLOCK_LIST_ITEM_HEIGHT = 32;

/** @typedef {import('react').ComponentType} ComponentType */
/** @typedef {import('react').Ref<HTMLElement>} Ref */
Expand Down
48 changes: 20 additions & 28 deletions packages/block-editor/src/components/list-view/style.scss
View file
Expand Up @@ -156,13 +156,13 @@

&.is-displacement-up {
transition: transform 0.2s;
transform: translateY(-36px);
transform: translateY(-32px);
@include reduce-motion("transition");
}

&.is-displacement-down {
transition: transform 0.2s;
transform: translateY(36px);
transform: translateY(32px);
@include reduce-motion("transition");
}

Expand All @@ -172,20 +172,20 @@
// worth of space for the visual indicator of where a block will be placed when dropped.
&.is-after-dragged-blocks {
transition: transform 0.2s;
transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
@include reduce-motion("transition");
}

&.is-after-dragged-blocks.is-displacement-up {
transition: transform 0.2s;
transform: translateY(calc(-36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
@include reduce-motion("transition");
}

&.is-after-dragged-blocks.is-displacement-down {
transition: transform 0.2s;
transform:
translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) *
translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) *
-1));
@include reduce-motion("transition");
}
Expand All @@ -204,15 +204,15 @@
z-index: -9999;
}

// List View renders a fixed number of items and relies on each item having a fixed height of 36px.
// List View renders a fixed number of items and relies on each item having a fixed height of 32px.
// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
.block-editor-list-view-block-contents {
display: flex;
align-items: center;
width: 100%;
height: auto;
padding: ($grid-unit-15 * 0.5) ($grid-unit-15 * 0.5) ($grid-unit-15 * 0.5) 0;
height: $grid-unit-40;
padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
text-align: left;
border-radius: $radius-block-ui;
position: relative;
Expand Down Expand Up @@ -277,15 +277,14 @@
}

.block-editor-block-icon {
margin-right: $grid-unit-10;
margin-right: $grid-unit-10 * 0.5; // 6px.
flex: 0 0 $icon-size;
}

.block-editor-list-view-block__menu-cell,
.block-editor-list-view-block__mover-cell,
.block-editor-list-view-block__contents-cell {
padding-top: 0;
padding-bottom: 0;
padding: 0;
}

.block-editor-list-view-block__menu-cell,
Expand Down Expand Up @@ -316,7 +315,7 @@
}

.block-editor-list-view-block__menu-cell {
padding-right: $grid-unit-15 * 0.5; // 6px.
padding-right: $grid-unit-05;

.components-button.has-icon {
height: 24px;
Expand Down Expand Up @@ -379,8 +378,10 @@
}
}

.block-editor-list-view-block-select-button__label-wrapper {
min-width: 120px;
// Style lock and position icons in line with image previews.
.block-editor-list-view-block-select-button__label-wrapper svg {
left: $grid-unit-05 * 0.5; // 2px.
position: relative;
}

.block-editor-list-view-block-select-button__title {
Expand Down Expand Up @@ -464,21 +465,12 @@ $block-navigation-max-indent: 8;
// Chevron container metrics.
.block-editor-list-view__expander {
height: $icon-size;
margin-left: $grid-unit-05;
width: $icon-size;
cursor: pointer;
}

.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);
}

.block-editor-list-view-leaf:not([aria-level="1"]) {
.block-editor-list-view__expander {
margin-right: 4px;
}
margin-left: ($grid-unit-30 * $block-navigation-max-indent);
}

// When updating the margin for each indentation level, the corresponding
Expand All @@ -488,9 +480,9 @@ $block-navigation-max-indent: 8;
.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: ($grid-unit-30 * $i); // Effectivly centers the expander below the parent's icon.
} @else {
margin-left: ($icon-size * $i);
margin-left: 0;
}
}
}
Expand Down Expand Up @@ -540,7 +532,7 @@ svg {

.block-editor-list-view-drop-indicator__line {
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
height: 36px;
height: 32px;
border-radius: 4px;
overflow: hidden;
}
Expand All @@ -553,7 +545,7 @@ svg {
.block-editor-list-view-placeholder {
padding: 0;
margin: 0;
height: 36px;
height: 32px;
}

.list-view-appender .block-editor-inserter__toggle {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/list-view/use-list-view-drop-zone.js
View file
Expand Up @@ -62,7 +62,7 @@ import { store as blockEditorStore } from '../../store';

// When the indentation level, the corresponding left margin in `style.scss`
// must be updated as well to ensure the drop zone is aligned with the indentation.
export const NESTING_LEVEL_INDENTATION = 28;
export const NESTING_LEVEL_INDENTATION = 24;

/**
* Determines whether the user is positioning the dragged block to be
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/components/list-view-sidebar/style.scss
View file
Expand Up @@ -49,7 +49,7 @@
scrollbar-gutter: auto;

// The table cells use an extra pixels of space left and right. We compensate for that here.
padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
padding: $grid-unit-05;
}

.editor-list-view-sidebar__list-view-container {
Expand Down

0 comments on commit 14db362

Please sign in to comment.