Can't scroll WP menu when in editor

[maximebj]

When having a very long WordPress Menu, it can't be scrolled on the editor page :

I think it's just a small CSS issue. This seems to cause the issue:

@media (min-width: 782px) .gutenberg__editor { min-height: calc(100vh - 32px); }

Gutenberg v 3.8

[chrisvanpatten]

So I'm personally not able to reproduce this — on my end, it scrolls, but the menu does scroll separately from Gutenberg.

That said, there was another report of this in Slack so it's probably worth investigating further.

It's also not a great UX to effectively have three separate scroll areas: the left menu, the center editor canvas, and the right inspector sidebar. I wonder if there's a sensible way to consolidate these into fewer scroll areas?

[ssgro]

I can also confirm @maximebj bug report. Tested with Gutenberg version 3.9 in:

• Chrome, version 69.0.3497.100
• Firefox, 62.0.2
• Microsoft Edge 42.17134.1.0

[Soean]

@chrisvanpatten I can reproduce the error. If you just resize the window you can scroll, but if you reload the window you aren't able to scroll anymore.

[johngodley]

To make this a bit easier to test you can drop this into a file in wp-content/plugins/ and then activate it from the plugins menu. You'll then have a very tall admin menu!

<?php
/*
Plugin Name: Long Menu
Description: Gives you a really long menu
*/

function really_long_menu() {
}

function add_really_long_menu() {
    for ( $loop = 1; $loop < 30; $loop++ ) {
        add_menu_page( 'Long Menu ' . $loop, 'Long Menu ' . $loop, 'manage_options', 'page-' . $loop, 'really_long_menu' );
    }
}

add_action( 'admin_menu', 'add_really_long_menu' );

I've determined that it's something to do with the sticky-menu body class. This is present on page load, but removed when you resize the page. Investigating where it comes from.

[johngodley]

Debugging further, sticky-menu is added by setPinMenu() in the core WordPress file common.js - this is preventing the scroll.

sticky-menu is added because #adminmenuwrap has a height of 0

#adminmenuwrap has a height of 0 because is-fullscreen-mode is present on the body class, and this hides the admin menu.

is-fullscreen-mode was added to stop a jump in the UI, according to #9567