How to Disable the Fullscreen Editor in WordPress

As a webmaster with over 15 years of experience using WordPress, I‘ve seen the editing experience evolve over time. The recent switch to a fullscreen editor is great for distraction-free writing, but it‘s not for everyone.

In this guide, I‘ll walk you through two simple methods to disable the new fullscreen editor and get back to the classic WordPress layout. Whether you want more menu options or just prefer the compact style, I‘ve got you covered.

Why WordPress Now Uses a Fullscreen Editor

Back in WordPress 5.0, the old TinyMCE editor was replaced by the new block editor, also known as Gutenberg. This brought blocks for common elements like images and videos, enabling beautiful layouts.

However, it could feel cluttered at times:

Having two menus alongside the text area meant a lot of things competing for your attention. As a writer, you want to focus on the words, not the tools.

So in WordPress 5.4, fullscreen mode became the default to declutter the interface. This gives a clean writing space with just your text and the block toolbar:

When the Fullscreen Editor is Useful

The fullscreen mode offers a few benefits:

• Removes distractions so you can focus on writing
• Displays content visually as it will appear on the front-end
• Provides a modern, minimalist editing experience

In my experience, fullscreen view works well for blog posts, simple pages, and when writing longform content.

However, it may not suit more complex projects. Next I‘ll go over two easy ways to disable fullscreen mode if it‘s not your cup of tea.

Quick Option: Disable Fullscreen Via the Settings Menu

The fastest way to toggle off fullscreen is directly within the editor. Here‘s how:

1. Edit any existing post or page in WordPress. The editor will open in fullscreen by default.

2. Click on the three-dot settings icon in the top right corner of the screen. This expands the options menu.

3. Locate the "Fullscreen Mode" toggle and switch it to the off position.

The editor will instantly shift back to the regular layout with both the left and top toolbars visible again.

When to Use This Quick Method

The settings toggle is great for quickly switching between modes in your current browser. If you want to disable fullscreen to work on a specific post or page, it‘s the fastest option.

However, it only applies to the local browser. If you use multiple devices or browsers to access WordPress, you‘ll have to toggle fullscreen off each time.

For a permanent solution, the next method using a code snippet is recommended.

Permanently Disable Fullscreen Mode Via Code (Recommended)

To disable fullscreen mode across all browsers and devices, the best way is using a small bit of code.

If you‘re new to code, I suggest adding snippets safely with a plugin like WPCode. It avoids editing theme files directly.

Step 1: Install and Activate WPCode

First, install and activate the free WPCode plugin:

1. Go to Plugins » Add New in your WordPress dashboard.
2. Search for "WPCode" and install the plugin by WordPressCodingStuff.
3. Click "Activate" to enable the plugin.

Step 2: Create a New Code Snippet

Next, create a new snippet:

1. Go to Code Snippets » Add Snippet in your dashboard.
2. Hover over the blank code box and click "Use snippet" below it.

This will open the snippet editor to add your code.

Step 3: Paste in the Code

Paste the following into the code editor:

if (is_admin()) {

  function disable_fullscreen_editor() {

    wp_add_inline_script( 
      ‘wp-blocks‘,
      ‘jQuery( window ).load(function() {
        if ( wp.data.select( "core/edit-post" ).isFeatureActive( "fullscreenMode" ) ) {
          wp.data.dispatch( "core/edit-post" ).toggleFeature( "fullscreenMode" );
        }  
      });‘
    );

  }

  add_action( ‘enqueue_block_editor_assets‘, ‘disable_fullscreen_editor‘ );

}

This checks if the fullscreen mode is active and disables it.

Step 4: Configure the Snippet

Next, configure your new snippet:

1. Give your snippet a name like "Disable Fullscreen Editor".
2. Set the code type dropdown to "PHP Snippet".
3. Toggle the switch to activate the snippet.
4. Click "Save Snippet" to store your code.

And that‘s it! Fullscreen editing will now be disabled by default for all users.

Why Use Code to Disable Fullscreen Mode

The main benefit of using a code snippet vs. the settings toggle is it applies the change globally.

Some key advantages:

• Disables fullscreen on all browsers and devices site-wide
• Saves the setting permanently for all users
• Prevents having to toggle it repeatedly
• Better for webmasters managing multiple websites

So if you want to disable the new fullscreen editor in WordPress permanently across your whole site, a snippet is the best approach.

Final Thoughts on Disabling Fullscreen Mode

The fullscreen editor offers a streamlined writing experience, but I know it‘s not for everyone. Hopefully this guide provided two easy methods to disable fullscreen mode according to your needs:

• Quick fix: Use the settings toggle to disable fullscreen on the fly in your current browser.
• Permanent solution: Add a code snippet to disable fullscreen for all users site-wide.

I recommend the code snippet method for most cases to save the setting permanently. But feel free to toggle it on and off to find your optimal editing workflow.

Have any other questions about customizing the block editor in WordPress? Ask in the comments below! I‘m happy to help as an experienced webmaster using WordPress for over 15 years.