force-gutenberg-fullscreen.md

Force Gutenberg to Fullscreen Mode

This is an example snippet for forcing the Gutenberg editor into full screen mode in anticipation of the change coming to WordPress 5.4.

index.js

import domReady from '@wordpress/dom-ready';
import {
	dispatch,
	select,
} from  '@wordpress/data';

const forceFullScreen = () => {
	const featurePrefs = select( 'core/edit-post' ).getPreference( 'features' );

	// Respect user preferences.
	if ( typeof featurePrefs.fullscreenMode !== 'undefined' ) {
		return;
	}

	const isFullscreenMode = select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );

	// Force fullscreen mode if not set already.
	if ( ! isFullscreenMode ) {
		dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
	}
}

domReady( function() {
	forceFullScreen();
} );

plugin.php

<?php

/**
 * Enqueue the script.
add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_script(
        'gb-fullscreen',
        plugins_url( '/build/index.js', __FILE__ ),
        [ 'wp-components', 'wp-editor' ]
    );
} );