Remove sticky-menu class preventing full admin page scroll (#11308)

* Remove sticky-menu class preventing full admin page scroll

Gutenberg adds ‘is-fullscreen-mode’ to the page body class, causing WordPress to add ‘sticky-menu’. This prevents the page being vertically scrolled, cutting off long admin menus.

Remove ‘sticky-menu’ as part of the FullscreenMode setup

* Restore sticky-menu class if it previously existed

In case it was added for a legitimate reason originally.

* Add unit test for fullscreenmode component

packages/edit-post/src/components/fullscreen-mode/index.js

@@ -4,9 +4,25 @@
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 
-class FullscreenMode extends Component {
+export class FullscreenMode extends Component {
 	componentDidMount() {
+		this.isSticky = false;
 		this.sync();
+
+		// `is-fullscreen-mode` is set in PHP as a body class by Gutenberg, and this causes
+		// `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled
+		// even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as
+		// a consequence of the FullscreenMode setup
+		if ( document.body.classList.contains( 'sticky-menu' ) ) {
+			this.isSticky = true;
+			document.body.classList.remove( 'sticky-menu' );
+		}
+	}
+
+	componentWillUnmount() {
+		if ( this.isSticky ) {
+			document.body.classList.add( 'sticky-menu' );
+		}
 	}
 
 	componentDidUpdate( prevProps ) {

packages/edit-post/src/components/fullscreen-mode/test/index.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies.
+ */
+import { FullscreenMode } from '..';
+
+describe( 'FullscreenMode', () => {
+	it( 'fullscreen mode to be added to document body when active', () => {
+		shallow( <FullscreenMode isActive={ true } /> );
+
+		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe( true );
+	} );
+
+	it( 'fullscreen mode not to be added to document body when active', () => {
+		shallow( <FullscreenMode isActive={ false } /> );
+
+		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe( false );
+	} );
+
+	it( 'sticky-menu to be removed from the body class if present', () => {
+		document.body.classList.add( 'sticky-menu' );
+
+		shallow( <FullscreenMode isActive={ false } /> );
+
+		expect( document.body.classList.contains( 'sticky-menu' ) ).toBe( false );
+	} );
+
+	it( 'sticky-menu to be restored when component unmounted and originally present', () => {
+		document.body.classList.add( 'sticky-menu' );
+
+		const mode = shallow( <FullscreenMode isActive={ false } /> );
+		mode.unmount();
+
+		expect( document.body.classList.contains( 'sticky-menu' ) ).toBe( true );
+	} );
+} );