Fix vertical overflow when inserter is open in post and site editor #57127

colorful-tones · 2023-12-15T22:23:58Z

What?

Addresses #56811

This needs further cross browser testing, but addresses the initial issue in Chrome desktop.

How?

Adding a class to the InterfaceSkeleton component in the site editor and post editor: is-inserter-opened. Target the class with overflow: hidden.

Testing Instructions

Open the site editor (not sure if it happens in the post editor)
Open the inserter
Start typing and verify there is no odd vertical scrolling for the entire canvas, including the main canvas

t-hamano · 2023-12-16T05:23:36Z

Perhaps the following CSS alone can solve the problem?

.block-editor-inserter__main-area {
  overflow: hidden;
}

andrewserong

Thanks for looking into this @colorful-tones! This is testing nicely for me so far 👍

Just checking, is it safe to set overflow: hidden on the interface-interface-skeleton__body? From memory, hidden sets a formatting context that can interfere with position: sticky rules, so it's possible that this could adversely affect things within the editor canvas. In practice, from testing setting a Group block to Sticky in both an iframed and a non-iframe editor, this seems to be working well for me so far 🤔

A couple of other thoughts: do we know what's causing the overflow to be present? Is it possible to contain another area that's unintentionally causing the skeleton body to overflow rather than hiding it with the hidden rule, or alternately, would it be worth trying overflow: clip in case we want to avoid the formatting context?

One thing I've noticed is that it can sometimes be quite tricky to make changes to some of these parts of the editor canvas without unintentionally introducing side effects, so it could be good to get a couple more pairs of eyes on whichever approach we'd like to go with here, just in case 🙂

andrewserong · 2023-12-18T05:09:04Z

packages/interface/src/components/interface-skeleton/style.scss

@@ -69,6 +69,12 @@ html.interface-interface-skeleton__html-container {
 			padding-bottom: $button-size-small + $border-width;
 		}
 	}
+
+	// Prevent unneccessary infinite empty scrolling when empty block canvas


What's the infinite empty scrolling? In manual testing on trunk it looks like the editor is scrolling nearly a full height of the editor, rather than infinite. Apologies if I'm missing something here!

andrewserong · 2023-12-18T05:11:41Z

Perhaps the following CSS alone can solve the problem?

Apologies, I didn't see that comment before I submitted my review. That's sounding promising if we can limit the area where we're applying overflow: hidden 👍

t-hamano · 2023-12-18T05:41:25Z

I looked into this issue a little more closely. The root cause may be that when you enter a search keyword, there is no element with overflow:hidden applied above the scroll element.

Default

<div class="block-editor-inserter__menu"> <!--  ← overflow:visible; -->
	<div class="block-editor-inserter__main-area show-as-tabs">
		<div class="block-editor-inserter__search"></div>
		<div class="block-editor-inserter__tabs"> <!--  ← overflow:hidden; -->
			<div role="tabpanel"> <!--  ← overflow-y: auto; -->
				<!-- Block List here... -->
			</div>
		</div>
	</div>
</div>

When entering a search keyword

<div class="block-editor-inserter__menu"> <!--  ← overflow:visible; -->
	<div class="block-editor-inserter__main-area">
		<div class="block-editor-inserter__search"></div>
		<div class="block-editor-inserter__no-tab-container"> <!--  ← overflow-y: auto; -->
			<!-- Block List here... -->
		</div>
	</div>
</div>

There may be several ways to solve this problem with CSS.

Apply overflow:hidden; to elements with block-editor-inserter__menu class: Currently, overflow: hidden; is applied, but this style seems to have not changed for over 3 years. Changing this to hidden might have some issues.
Apply overflow:hidden; to the element with .block-editor-inserter__main-are class: This is the approach I suggested in this comment.
Wrapping the element with block-editor-inserter__no-tab-container class: In addition to adding overflow:hidden to the wrapped element, we may need to adjust some styles.

Personally, I think the second, simpler approach is better. However, a third approach that matches nested structures regardless of whether a search term is present or not seems good. In other words, there is an element with overflow:hidden applied in parallel to an element with the block-editor-inserter__search class, and a scroll element directly below it.

colorful-tones · 2023-12-18T15:38:44Z

Lots of great feedback. I plan on taking another pass at this today. Thanks!

colorful-tones · 2023-12-18T23:02:10Z

Perhaps the following CSS alone can solve the problem?

That certainly fixes the issue in Chrome. I have yet to do any cross-browser testing, but I certainly will before moving to finalizing any PRs.

Wrapping the element with block-editor-inserter__no-tab-container class: In addition to adding overflow:hidden to the wrapped element, we may need to adjust some styles.

Personally, I think the second, simpler approach is better. However, a third approach that matches nested structures regardless of whether a search term is present or not seems good. In other words, there is an element with overflow:hidden applied in parallel to an element with the block-editor-inserter__search class, and a scroll element directly below it.

I am not clear on this last suggestion. 🤔

Thanks for the guidance @t-hamano

t-hamano · 2023-12-19T03:06:40Z

I am not clear on this last suggestion. 🤔

Sorry for the insufficient explanation. I was wondering if it would be possible to change the hierarchy as shown below when the search text is entered.

From:

<div class="block-editor-inserter__menu"> <!--  ← overflow:visible; -->
	<div class="block-editor-inserter__main-area">
		<div class="block-editor-inserter__search"></div>
		<div class="block-editor-inserter__no-tab-container"> <!--  ← overflow-y: auto; -->
			<!-- Block List here... -->
		</div>
	</div>
</div>

To:

<div class="block-editor-inserter__menu"> <!--  ← overflow:visible; -->
	<div class="block-editor-inserter__main-area">
		<div class="block-editor-inserter__search"></div>
		<div class="block-editor-inserter__no-tab-container"> <!--  ← overflow: hidden; -->
			<div class="block-editor-inserter__search-results"> <!--  ← overflow-y: auto; -->
				<!-- Block List here... -->
			</div>
		</div>
	</div>
</div>

However, when I tried this locally, I was unable to resolve the overflow 😅 Therefore, if it can be solved in all browsers, the following approach may be better.

Apply overflow:hidden; to the element with .block-editor-inserter__main-are class: This is the approach I suggested in this comment.

This reverts commit 95f0a72.

This reverts commit 40fba9e.

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>

colorful-tones · 2023-12-19T15:15:20Z

I've used @t-hamano suggested fix and reverted my previous attempts. I also attempted to give co-authored attribution in commit. 🤞

I opted to only target overflow-y: hidden to only target what is needed and not target shorthand, which would influence x-axis as well.

I've tested the fix in both the site editor and the block editor for the following desktop browsers.

Chrome 120 site editor and block editor
Safari 17.2 site editor and block editor
MS Edge 120 site editor and block editor
Firefox 120 site editor and block editor

I'm attaching videos of all the results. So far it is working nicely. I plan on circling back to do some mobile and tablet testing in iOS simulator, but could use some help with any Android and any other browsers. Thanks!

Safari-desktop-17.2-site-editor.mp4

Safari-desktop-17.2-block-editor.mp4

MS-Edge-120-site-editor.mp4

MS-Edge-120-block-editor.mp4

firefox-120-site-editor.mp4

Firefox-120-block-editor.mp4

Chrome-120-site-editor.mp4

Chrome-120-block-editor.mp4

t-hamano

LGTM ! Thank you for including me as a co-author 😊

I'm using Windows OS, but Chrome, Firefox, and Edge all seem to work fine. However, I would like to ask @andrewserong if this approach is correct 🙇

colorful-tones · 2023-12-19T16:20:10Z

Tested on iPhone 15 Pro Max (iOS 17.2) and there are no regressions and everything seems to operate smoothly in both the site editor and the block editor.

Before (Gutenberg 17.2.3)	After (with patch applied)
https://github.com/WordPress/gutenberg/assets/405912/ad82f929-cebb-4464-8460-3dd8dc7f66af	https://github.com/WordPress/gutenberg/assets/405912/bf93f951-d532-41f5-a219-670237c9f81b
https://github.com/WordPress/gutenberg/assets/405912/869aa68a-7223-4c56-a21f-1d64102bae15	https://github.com/WordPress/gutenberg/assets/405912/27b5e909-18e3-4e54-9db3-a3a60545b18b

Note: there are a few oddities on Gutenberg 17.2.3 which are featured in the block editor video above, but they're not related to the work for this fix and they're working fine in my branch. So, they've likely been addressed elsewhere. The most noticeable is when clicking 'Add New Post' and landing on the block editor it zooms way in and you just see a giant plus + icon.

andrewserong

Nice work honing in on a safe fix @colorful-tones and @t-hamano! Using .block-editor-inserter__main-area feels like a good way to keep the rule contained to me, and makes for a simple fix 👍

✅ Tested in the post and site editors using Safari, Chrome, Edge, and Firefox on a Mac. In each case there were no additional scrollbars, and I found no regressions with any part of the inserter that I could test.

I think we've tested pretty thoroughly in different environments now, so this LGTM! ✨

…57127) * Toggle classname for inserter * Adjust overflow when inserter is open * Revert "Toggle classname for inserter" This reverts commit 95f0a72. * Revert "Adjust overflow when inserter is open" This reverts commit 40fba9e. * Fix vertical overflow for inserter main area Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --------- Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>

jeryj · 2024-03-27T21:28:23Z

I'm not sure why, but this issue is caused by the downloadable block lists. Adding this fixes it and the overflow can be removed:

	.block-directory-downloadable-blocks-list {
		position: relative;
	}

I need overflow to be visible as part of fixing #60209, so I'll probably be pinging y'all about this soon :)

Anyone have an idea of why that downloadble-blocks-list would be causing this, and why position relative would fix it?

t-hamano · 2024-03-28T08:39:43Z

I'm not sure why, but this issue is caused by the downloadable block lists. Adding this fixes it and the overflow can be removed:

I don't know why either, but certainly that style seems to solve the problem with overflow.

However, it seems that the problem is not resolved in all cases. For example, if you type "list" in the search box, the problem will be resolved, but if you type "a", the problem will occur.

After trying various things, it seems that applying position:relative to the element with the block-editor-inserter__no-tab-container class can solve the problem overall 🤔

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index ba1107054c..09c35f91c0 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -22,7 +22,6 @@ $block-inserter-tabs-height: 44px;
        flex-direction: column;
        height: 100%;
        gap: $grid-unit-20;
-       overflow-y: hidden;
 
        &.show-as-tabs {
                gap: 0;
@@ -142,6 +141,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__no-tab-container {
        overflow-y: auto;
        flex-grow: 1;
+       position: relative;
 }
 
 .block-editor-inserter__panel-header {

colorful-tones added 2 commits December 15, 2023 17:18

Toggle classname for inserter

95f0a72

Adjust overflow when inserter is open

40fba9e

colorful-tones mentioned this pull request Dec 15, 2023

Users can scroll off the bottom of the block editor into a forbidden void when searching in the inserter #56811

Closed

andrewserong reviewed Dec 18, 2023

View reviewed changes

colorful-tones added 3 commits December 19, 2023 09:07

Merge branch 'trunk' into fix/interface-skeleton-overflow

6cc3b77

Revert "Toggle classname for inserter"

093f778

This reverts commit 95f0a72.

Revert "Adjust overflow when inserter is open"

72ad183

This reverts commit 40fba9e.

colorful-tones requested a review from ellatrix as a code owner December 19, 2023 14:55

t-hamano added [Type] Bug An existing feature does not function as intended [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels Dec 19, 2023

t-hamano linked an issue Dec 19, 2023 that may be closed by this pull request

Users can scroll off the bottom of the block editor into a forbidden void when searching in the inserter #56811

Closed

Fix vertical overflow for inserter main area

8f9e2cd

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>

colorful-tones force-pushed the fix/interface-skeleton-overflow branch from 57f8f51 to 8f9e2cd Compare December 19, 2023 15:08

t-hamano self-requested a review December 19, 2023 16:14

t-hamano approved these changes Dec 19, 2023

View reviewed changes

andrewserong approved these changes Dec 20, 2023

View reviewed changes

andrewserong merged commit 6bbf33c into WordPress:trunk Dec 20, 2023
51 checks passed

github-actions bot added this to the Gutenberg 17.4 milestone Dec 20, 2023

jeryj mentioned this pull request Mar 28, 2024

Fix editor canvas overflow on search results with position: relative #60287

Merged

talldan mentioned this pull request Jul 11, 2024

Inserter: white space at the very bottom of the results #63384

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix vertical overflow when inserter is open in post and site editor #57127

Fix vertical overflow when inserter is open in post and site editor #57127

colorful-tones commented Dec 15, 2023

t-hamano commented Dec 16, 2023

andrewserong left a comment

andrewserong Dec 18, 2023

andrewserong commented Dec 18, 2023

t-hamano commented Dec 18, 2023 •

edited

Loading

colorful-tones commented Dec 18, 2023

colorful-tones commented Dec 18, 2023

t-hamano commented Dec 19, 2023 •

edited

Loading

colorful-tones commented Dec 19, 2023

t-hamano left a comment

colorful-tones commented Dec 19, 2023 •

edited

Loading

andrewserong left a comment

jeryj commented Mar 27, 2024

t-hamano commented Mar 28, 2024

Fix vertical overflow when inserter is open in post and site editor #57127

Fix vertical overflow when inserter is open in post and site editor #57127

Conversation

colorful-tones commented Dec 15, 2023

What?

How?

Testing Instructions

t-hamano commented Dec 16, 2023

andrewserong left a comment

Choose a reason for hiding this comment

andrewserong Dec 18, 2023

Choose a reason for hiding this comment

andrewserong commented Dec 18, 2023

t-hamano commented Dec 18, 2023 • edited Loading

Default

When entering a search keyword

colorful-tones commented Dec 18, 2023

colorful-tones commented Dec 18, 2023

t-hamano commented Dec 19, 2023 • edited Loading

colorful-tones commented Dec 19, 2023

t-hamano left a comment

Choose a reason for hiding this comment

colorful-tones commented Dec 19, 2023 • edited Loading

andrewserong left a comment

Choose a reason for hiding this comment

jeryj commented Mar 27, 2024

t-hamano commented Mar 28, 2024

t-hamano commented Dec 18, 2023 •

edited

Loading

t-hamano commented Dec 19, 2023 •

edited

Loading

colorful-tones commented Dec 19, 2023 •

edited

Loading