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 );
+ } );
+} );