From 4baf6322bfef0976b888fe78fee1a065a92acbe5 Mon Sep 17 00:00:00 2001 From: John Godley Date: Wed, 31 Oct 2018 14:30:17 +0000 Subject: [PATCH 1/3] Remove sticky-menu class preventing full admin page scroll MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- packages/edit-post/src/components/fullscreen-mode/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/edit-post/src/components/fullscreen-mode/index.js b/packages/edit-post/src/components/fullscreen-mode/index.js index 97f1629e46af2..8213b3dd71627 100644 --- a/packages/edit-post/src/components/fullscreen-mode/index.js +++ b/packages/edit-post/src/components/fullscreen-mode/index.js @@ -7,6 +7,12 @@ import { withSelect } from '@wordpress/data'; class FullscreenMode extends Component { componentDidMount() { 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 + document.body.classList.remove( 'sticky-menu' ); } componentDidUpdate( prevProps ) { From 93e28a45ff0947517448f262fcdc7c11ee21ddf3 Mon Sep 17 00:00:00 2001 From: John Godley Date: Wed, 14 Nov 2018 16:40:29 +0000 Subject: [PATCH 2/3] Restore sticky-menu class if it previously existed In case it was added for a legitimate reason originally. --- .../src/components/fullscreen-mode/index.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/fullscreen-mode/index.js b/packages/edit-post/src/components/fullscreen-mode/index.js index 8213b3dd71627..481dfb388e18f 100644 --- a/packages/edit-post/src/components/fullscreen-mode/index.js +++ b/packages/edit-post/src/components/fullscreen-mode/index.js @@ -4,15 +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 - document.body.classList.remove( 'sticky-menu' ); + 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 ) { From 204e123289ca1df1b25b6c8a6ee50622e686ced0 Mon Sep 17 00:00:00 2001 From: John Godley Date: Wed, 14 Nov 2018 16:43:25 +0000 Subject: [PATCH 3/3] Add unit test for fullscreenmode component --- .../components/fullscreen-mode/test/index.js | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 packages/edit-post/src/components/fullscreen-mode/test/index.js 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( ); + + expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe( true ); + } ); + + it( 'fullscreen mode not to be added to document body when active', () => { + shallow( ); + + 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( ); + + 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( ); + mode.unmount(); + + expect( document.body.classList.contains( 'sticky-menu' ) ).toBe( true ); + } ); +} );