Focus mode: Unable to scroll when editing a longer template part

[annezazu]

Description

When using the focus mode, I'm unable to scroll down when trying to edit a comments block in isolation. I'm also noticing that more content shows up between modes (site editor vs focus mode) - I'm assuming that's to provide filler content but it's a bit of a confusing UX regardless.

Step-by-step reproduction instructions

1. Use 6.1 RC 2.
2. Head to Appearance > Editor.
3. Add the comments block.
4. Select the comments block and choose "edit" in the block toolbar.
5. Notice you can't scroll down or move around in general except by selecting things in list view.

Screenshots, screen recording, code snippet

Video showing inability to scroll:

unable.to.scroll.down.mov

Screenshot of site editor showing no comments:

Screenshot of focus mode showing 3 comments (I'm guessing as filler content for what one would see if there were comments but still):

Environment info

• WordPress 6.1 RC 2
• TT3
• No GB
• Chome

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[annezazu]

cc @Poliuk for awareness.

[carolinan]

I can reproduce this.
Small note: In TT3, the "comments block" in this template is a template part, which is why it has the Edit option.

[michalczaplinski]

I just took a look at this and it's not specific to the Comments block. I can reproduce the problem when trying to edit the Footer template as well:

template.edit.bug.mp4

The problem seems to be this CSS rule:

css.classes.template.bug.mp4

[michalczaplinski]

I will try to debug this further

[michalczaplinski]

There are two additional considerations here:

1. Removing the overflow on the <div class="edit-site-visual-editor is-focus-mode"> element is probably not the UX that we want. I think that the inner container is the one that should be scrolling but I'm not 100% sure.

2. I think it's very confusing that there is a "Comments" template part as well as a "Comments" block:

   

   I would have been quite puzzled if @carolinan hadn't commented that this is actually a template part.

[carolinan]

Pinging @mikachan in case there is time to rename the comments template part in TT3 to reduce confusion.

[annezazu]

Renaming this back to template part rather than template! Yes, I did see this was a template part but foolishly thought it was isolated to the Comments block implementation for some reason. Thanks for testing more to find out the deeper problem.

[michalczaplinski]

I see out that the overflow: hidden was added in #43332 by @ciampo so we should not remove it. Perhaps he has an idea on how to handle this better?

I've tried fiddling with overflow and height of <iframe> of the template editor but to no avail so far.

[ciampo]

I see out that the overflow: hidden was added in #43332 by @ciampo so we should not remove it. Perhaps he has an idea on how to handle this better?

I haven't really worked on the site editor myself, I opened that PR while working on polishing the Popover component. All I know is that overflow:hidden rule was necessary to prevent the scrolling bug highlighted in #43332.

Perhaps you may remove the overflow: hidden rule only when editing templates?

In general, regardless of the fix, let's make sure we test it extensively — these visual / layout issues are often not caught by e2e test.

[michalczaplinski]

I've added a tentative fix in #45176

Which CSS Wizard could I ping to review this to make sure it's a correct fix? 😃

[michalczaplinski]

This should be fixed for good in #45189 now!