WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 12 months ago

Last modified 12 months ago

#45336 closed defect (bug) (invalid)

Admin sidebar doesn't scroll vertically when Gutenberg editor is present - 5.0-beta3

Reported by: dmchale Owned by:
Milestone: Priority: normal
Severity: major Version: 5.0
Component: Editor Keywords:
Focuses: ui, administration Cc:
PR Number:

Description

EXPECTED BEHAVIOR:

On a page/post edit screen, admin user should be able to scroll down to view all of the admin menus in the left sidebar. This works on WP < 5.0, and also in 5.0-beta3 on many pages that do not include the Gutenberg editor itself (Dashboard, primary Posts page, etc)

CURRENT BEHAVIOR:

When on a page with the Gutenberg editor present (eg: /wp-admin/post.php?post=15&action=edit) the user can no longer vertically scroll the admin sidebar, which means they lose access to other areas of their admin navigation while on any page where the Gutenberg editor exists. This seems like a critical usability issue.

STEPS TO REPLICATE:

You simply need more admin menus in the left nav than height to display them all. Any site with plugins that create additional sidebar menus may work, or this can easily be replicated by simply resizing your browser window to a short enough height until the "Collapse Menu" admin tool is no longer visible. Refresh your window on a page with Gutenberg present. When attempting to scroll down the page, you'll notice the left admin bar does not scroll with you.

SUGGESTED FIX:

Return the expected behavior to normal as it works on all other sections of the admin area; or update so that at minimum, mouse cursor focus could allow admins to independently scroll the admin bar vertically similar to how the current Gutenberg content editing area and Settings pane can be scrolled independent of each other.

Change History (4)

#1 @mukesh27
12 months ago

  • Component changed from General to Editor
  • Focuses ui administration added

@dmchale i have checked above issue in latest version or Beta Version 5.0-beta4-43896 and same issue there also.

System add below css code to remove scroll on editor so need to remove that code then it will work fine but can't fine css location.

@media (min-width: 600px)
.edit-post-layout__content {
    overscroll-behavior-y: none;
}

#2 @dmchale
12 months ago

Cheers @mukesh27 that does appear to be the culprit

That styles appear to exist inside both /wp-includes/css/dist/edit-post/style.css and /wp-includes/css/dist/edit-post/style-rtl.css

This functionality seems intentional, as the media query implies that this behavior is expected when the site visitor is browsing the site on a narrow viewport (applies when the view is LESS than 600px).

I believe this style is being *inadvertently* applied to the sidebar due to the way Gutenberg is included on this page... the width of the rest of the window does not seem to be detected, so ONLY the sidebar width counts. Because of how tightly that seems to be tied to Gutenberg's implementation, creating a PR for this fix seems to be way outside my pay grade.

Last edited 12 months ago by dmchale (previous) (diff)

#3 @pento
12 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

Thank you for the bug report, @dmchale!

This issue is being tracked in the Gutenberg repo, on this issue: https://github.com/WordPress/gutenberg/issues/9996

I'm going to close this ticket, so that we're not duplicating discussion. There's a PR in progress to fix this bug, it'd be great if you could test it. 🙂

#4 @dmchale
12 months ago

Thanks, glad to know it's a known issue I was surprised I couldn't find anything here. Seems the PR needs more work but I'll keep an eye on it to help check it out. Cheers!

Note: See TracTickets for help on using tickets.