diff --git a/packages/edit-post/src/components/fullscreen-mode/index.js b/packages/edit-post/src/components/fullscreen-mode/index.js index 97f1629e46af28..481dfb388e18f6 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 00000000000000..e61f5e1838ff2a --- /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 ); + } ); +} );