From a356318c7177deefc890fbdba47e069996433cb3 Mon Sep 17 00:00:00 2001
From: John <johng75@gmail.com>
Date: Thu, 15 Nov 2018 16:29:25 +0000
Subject: [PATCH] Remove sticky-menu class preventing full admin page scroll
 (#11308)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 .../src/components/fullscreen-mode/index.js   | 18 ++++++++-
 .../components/fullscreen-mode/test/index.js  | 40 +++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 packages/edit-post/src/components/fullscreen-mode/test/index.js

diff --git a/packages/edit-post/src/components/fullscreen-mode/index.js b/packages/edit-post/src/components/fullscreen-mode/index.js
index 97f1629e46af2..481dfb388e18f 100644
--- a/packages/edit-post/src/components/fullscreen-mode/index.js
+++ b/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 ) {
diff --git a/packages/edit-post/src/components/fullscreen-mode/test/index.js b/packages/edit-post/src/components/fullscreen-mode/test/index.js
new file mode 100644
index 0000000000000..e61f5e1838ff2
--- /dev/null
+++ b/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 );
+	} );
+} );