Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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.

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();
} );
<?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' ]
);
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment