From e3a9e636b4309cc3707e492d6ba64e4cbfd325e5 Mon Sep 17 00:00:00 2001 From: Corentin Gautier Date: Thu, 9 Mar 2023 13:39:50 +0100 Subject: [PATCH 1/2] 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 --- packages/edit-post/src/style.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index fdb4b0c136abf0..9d0f8f405227f4 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -99,6 +99,13 @@ body.block-editor-page { @include wordpress-admin-schemes(); +.interface-interface-skeleton__header { + @supports (scrollbar-gutter: stable) { + 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 @@ -109,6 +116,7 @@ body.block-editor-page { .is-sidebar-opened & { @include break-medium() { border-left: $border-width solid $gray-200; + overflow: hidden scroll; } } } From c53f8930c50235aa5ba037668e26e7644c59bc2d Mon Sep 17 00:00:00 2001 From: Corentin Gautier <4660731+corentin-gautier@users.noreply.github.com> Date: Mon, 13 Mar 2023 10:53:34 +0100 Subject: [PATCH 2/2] Update style.scss --- packages/edit-post/src/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 9d0f8f405227f4..b200cdcb7cc985 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -101,6 +101,8 @@ body.block-editor-page { .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; }