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.

Prerequisites

• 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.data.dispatch('core/edit-post').toggleFeature('fullscreenMode');
        }
    });";

    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.

Troubleshooting

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.

Conclusion

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.