Disabling Full-Screen Mode in WordPress Block Editor

WordPress introduced the block editor, popularly known as Gutenberg, as a modern approach to content editing. While its full-screen mode offers a distraction-free environment, some users prefer to have the familiar WordPress admin panel visible. In this tutorial, we’ll explore how to disable the full-screen mode in the WordPress block editor.


  • Basic understanding of WordPress administration.
  • Access to your WordPress site’s files (via FTP/SFTP or hosting file manager).
  • Basic knowledge of PHP and WordPress theme structure.

Step 1: Access Your Theme’s Functions File

The first step involves editing your theme’s functions.php file. This file is integral to your theme’s functionality and allows you to add custom code snippets.

  • Access your site’s files: Use FTP/SFTP or your web hosting’s file manager.
  • Locate functions.php: This file resides in your active theme’s folder (/wp-content/themes/your-theme-name/).
  • Backup functions.php: Before editing, it’s crucial to back up this file to prevent any site issues.

Step 2: Add Custom Code to Disable Full-Screen Mode

You’ll add a PHP snippet that enqueues a small JavaScript script to disable the full-screen mode.

  • Edit functions.php: Open the file in a text editor.
  • Insert the code snippet: Copy and paste the following PHP code at the end of the functions.php file:
add_action( 'enqueue_block_editor_assets', function() {
    $script = "window.addEventListener('load', function() {
        const isFullscreenMode = wp.data.select('core/edit-post').isFeatureActive('fullscreenMode');
        if (isFullscreenMode) {

    wp_add_inline_script('wp-blocks', $script);
  • Explanation: This code hooks into WordPress’ block editor assets enqueue process. It adds a JavaScript snippet that checks if the full-screen mode is active and disables it if it is.

Step 3: Save and Upload

  • Save your changes: After adding the code, save the functions.php file.
  • Upload the file: If you edited the file locally, upload it back to the server in the same directory.

Step 4: Test Your Changes

  • Visit your WordPress site: Log in to your WordPress dashboard.
  • Open the block editor: Create a new post or edit an existing one.
  • Check the editor mode: The block editor should now open with the WordPress admin panel visible.


If you encounter issues:

  • Check for syntax errors: Ensure the code in functions.php is correct.
  • Revert to the backup: If your site experiences problems, revert to the backed-up functions.php file.

Best Practices

  • Use a child theme: To prevent losing changes when your theme updates, consider adding custom code to a child theme’s functions.php.
  • Create a custom plugin: Alternatively, create a simple custom plugin to contain your customizations.


Disabling the full-screen mode in the WordPress block editor enhances usability for those who prefer having quick access to the admin panel. This tutorial provides a straightforward way to make this change while adhering to WordPress development best practices. Remember, handling theme files requires caution, so always back up before making changes.