Skip to content

Commit

Permalink
Performances: Avoid UI shifting when selecting blocks (#47177)
Browse files Browse the repository at this point in the history
* fix: avoid ui shifting when selecting blocks

Force the use off overflow scroll on scrollable areas to avoid UI shifting/resizing when getting a scrollbar

* Update style.scss

---------

Co-authored-by: Corentin Gautier <corentin.gautier@consertotech.pro>
  • Loading branch information
corentin-gautier and Corentin Gautier committed Mar 21, 2023
1 parent b93fd88 commit a4c1edc
Showing 1 changed file with 10 additions and 0 deletions.
10 changes: 10 additions & 0 deletions packages/edit-post/src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,15 @@ body.block-editor-page {

@include wordpress-admin-schemes();

.interface-interface-skeleton__header {
@supports (scrollbar-gutter: stable) {
// The scrollbar-gutter property ensures space is reserved for the scrollbar to appear,
// when scrollbars are set to be always visible. This ensure icons stay visually aligned.
scrollbar-gutter: stable;
overflow: hidden;
}
}

// The edit-site package adds or removes the sidebar when it's opened or closed.
// The edit-post package, however, always has the sidebar in the canvas.
// These edit-post specific rules ensures there isn't a border on the right of
Expand All @@ -109,6 +118,7 @@ body.block-editor-page {
.is-sidebar-opened & {
@include break-medium() {
border-left: $border-width solid $gray-200;
overflow: hidden scroll;
}
}
}

0 comments on commit a4c1edc

Please sign in to comment.