My Account

My Account

Want to disable the Fullscreen mode in Gutenberg? The Fullscreen editor became the default for all WordPress users in WordPress 5.4. If you’re new to WordPress, you’ve probably noticed that the Gutenberg editor is always open in Fullscreen mode when you create a new post or page. There are no menus on the left, which may be problematic for some.

So, if you want to permanently or temporarily disable Fullscreen mode in Gutenberg, then you are at the right place. In this article, we will discuss different ways to disable Fullscreen mode in Gutenberg and how to restore Fullscreen mode.

In this article, we will cover the following points.

  • What is Gutenberg?
  • Why is Fullscreen Mode the Default View in Gutenberg?
  • How to Disable Fullscreen Mode in Gutenberg

So, let’s get started.

What is Gutenberg?

You must have already heard how WordPress’s new Gutenberg editor will change the world, which has replaced the traditional Classic editor. It is the new back-end interface for creating and editing content on the WordPress platform. With Gutenberg, you can add, update, move, and remove blocks on different pages to create beautiful websites.

At first, it was a plugin that WordPress users could download and install to make editing easier. However, it is now built into WordPress and is used as the platform’s default editor.

The best thing about Gutenberg is how flexible its content editor is. It works by putting different blocks on different pages, so the website owner can choose what to use and where. The Gutenberg project brought a new era and level of flexibility to pages.

We think that’s enough introduction; let’s move to our main topic, i.e., Fullscreen mode.

Why is Fullscreen Mode the Default View in Gutenberg?

WordPress 5.0 added a brand-new editor known as The Block Editor (also known as Gutenberg). This new editor allows users to use blocks for common elements and produce stunning content layouts. Using the same fonts and color schemes as your WordPress theme, it simulates how your content or pages will appear.

However, the editor itself appeared a little cluttered because there was an admin menu on top and one on the left. Simply put, the screen had too many options, which you don’t need if you’re trying to write content. The WordPress core team chose to address this by making the editor fullscreen by default, so users can write without being interrupted.

There is nothing new about this Fullscreen mode. It was already present and could be turned on or off by users. What has changed is that the fullscreen mode will now be the default view when writing posts in WordPress.

Well, not everybody likes these changes. So, next, we’ll see how to disable Fullscreen mode in Gutenberg.

How to Disable Fullscreen Mode in Gutenberg

There are different methods through which you can disable Fullscreen mode in Gutenberg. Let’s get started.

Disable Fullscreen Mode in Gutenberg Temporarily

You can temporarily disable Fullscreen mode in Gutenberg with just a click. Although this change is not permanent, it will remain in effect throughout your browsing session.

Step 1: Navigate to the page editor

Navigate to Pages > All pages or Posts > All posts to edit pages or posts respectively. Now, click on Edit to start editing a post or page.

You can either make a new page or post or edit an existing one. The WordPress editor will launch in Fullscreen mode by default.

Step 2: Select your preference

Click on the three dots icon at the upper right corner. This will display the setting menu.

Fullscreen mode in Gutenberg

Now click on Fullscreen mode to temporarily disable it in Gutenberg.

Compact view of the Gutenberg editor

The WordPress editor will immediately exit Fullscreen mode and switch to the compact view. Now, the WordPress editor will start showing the admin sidebar and the top toolbar.

Remember that this change only affects the current user. WordPress will temporarily store this preference in your browser.

The Fullscreen mode will appear the next time you try to access the editor or if you were browsing incognito or used a different device to enter the admin section. It could get a little tedious to switch it back every time you enter your WordPress admin area using multiple devices, user accounts, or browsers.

If so, don’t worry. The next method will allow you to disable Fullscreen mode permanently.

Disable FullScreen Mode in Gutenberg Permanently

As we said, you might have to repeatedly turn off the Fullscreen editor manually if you often switch between different devices, browsers, or WordPress accounts.

So, if you always use the compact view, permanently disabling Fullscreen mode in Gutenberg might be a better approach. We have two methods to achieve this; using a plugin or programmatically. Let’s have a look at both methods.

1) Using a plugin

You can use different plugins such as Disable Block Editor FullScreen mode to permanently disable Fullscreen mode in Gutenberg.

Follow the given steps to install and activate the plugin. Or you can download the plugin from WordPress.org and upload and install it to your WordPress site.

  • To install the plugin, go to Plugins > Add New. Now search for the Disable Block Editor Fullscreen mode plugin. Once you have found the plugin, click on the Install button to start installing the plugin.
plugin to disable fullscreen mode
  •  Once the installation is complete, hit the Activate button to activate the plugin on your site.

Once the plugin is active, it will automatically turn off the Fullscreen editor without requiring you to do anything else.

Now, that was the plugin method. However, if you want more control and don’t want to clutter your site with additional plugins, you can also achieve the results using a code snippet. Let’s check that out.

2) Disable FullScreen Mode Programmatically

Installing a new plugin every time you want to do something new can bring in several unwanted issues like slower response and plugin crashes. To get around such problems, adding a custom code snippet is a better choice.

Since you need to modify core WordPress files for this method, it is a good idea to make a complete backup of your site before moving forward in case something goes wrong.

Step 1: Add code to your functions.php file

Go to the admin dashboard. Then navigate to Themes > Theme File Editor. 

Navigating to theme file editor

Once you click the Theme File Editor, a text editor will open where you can modify your WordPress theme files. Find the functions.php file on the right-hand side of the screen and select it.

In order to be on the safe side and also retain the changes even after updates, we recommend you use a child theme. You can either create one or use some child theme plugin.

Adding code to functions.php file

Inside the functions.php file of your child theme, paste the following code at the end.

if (is_admin()) {

    function wowmall_disable_fullscreen_editor() {

    $script = "jQuery( window ).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 );

}

add_action( 'enqueue_block_editor_assets', 'wowmall_disable_fullscreen_editor' );

}
Step 2: Save the Functions.PHP File

To save your changes, click the Update File button. Your changes will take effect immediately.

Code snippet to disable fullscreen mode in guteberg
Step 3:  Check if the Fullscreen Editor Is Disabled.

After updating the file, open a new post or page to check whether the Fullscreen editor is disabled or not.

Gutenberg full screen mode disabled permanently

The new post is now launched in compact view automatically. You can now write without any interruptions.

So now you know how to disable Fullscreen mode in Gutenberg. You do it, but soon you start missing the elegance and creativity of Fullscreen mode. Wanna roll back? You will be glad to know that you can switch back to the Fullscreen mode at any time, temporarily or permanently. Let’s learn how to do it.

Restore FullScreen Editor Mode

As we mentioned, you can restore the Fullscreen editor mode temporarily or permanently. So, let’s see both options.

Restore FullScreen Editor Mode Temporarily

It is straightforward to restore Fullscreen editor mode temporarily in Gutenberg. Open a page or post in WordPress. In the upper right corner, click the three dots. You will find the option of Fullscreen mode there.

Turn fullscreen mode on

Select Fullscreen mode, and your editor will switch to Fullscreen immediately. Since this is a temporary solution, even if you leave fullscreen mode enabled, the Fullscreen editor will be disabled the next time you open a page or post for editing.

Restore FullScreen Editor Mode Permanently

If you want to restore Fullscreen mode permanently, you will need to remove the PHP code from the theme’s functions.php file.

  • Navigate to Appearance> Themes > Theme File Editor. 
  • Find the functions.php file on the right-hand side of the screen and select it.
  • Delete the code from the bottom of the file.
  • Click on Update file,

Your changes will be made live immediately.

Now open a page or post to check whether Fullscreen mode is restored or not.

Restored fullscreen mode in Gutenberg editor

Your Fullscreen mode is back to its glory now.

BONUS: How to Disable Gutenberg Editor

Gutenberg planned to replace the existing default page builder in all WordPress versions starting with version 5.0. According to its developers, the latest block editor will alter every part of creating WordPress sites. Unfortunately, the plan severely backfired since people were not prepared to be forced into different ways of doing things.

Of course, developers and people who own WordPress sites have had a lot to say about this. They have been complaining about how hard it is to learn a new way of using WordPress. Most people were happy with the old CLassic editor of WordPress, and Gutenberg is just too different from that.

So, if you are one of them, we have the perfect solution for you.

How to switch from Gutenberg to Classic Editor

The good thing is you can return to the Classic editor anytime. Also, switching from Gutenberg to a classic editor will not harm your website if done correctly.

The simplest way to do it on WordPress is to use plugins, but there is also the option of doing it manually. If you are interested in the manual way, check out our full guide on How to Disable Gutenberg Editor in WordPress.

Using the Disable Gutenberg Plugin              

Disable Gutenberg WordPress plugin is the officially recommended plugin to bring back the old Classic editor. It’s a lightweight plugin that completes the same task having a few extra bells and whistles.

To use this plugin, follow the given instructions.

  1. Go to Plugins > Add New plugin
  2. Search for Disable Gutenberg plugin
  3. Install the plugin.
  4. After installation, click on Activate to activate the plugin on your site.
Disable gutenberg plugin installation

Once the plugin is active, go to Settings > Disable Gutenberg. This image has an empty alt attribute; its file name is 11-1024x482.png

By default, this plugin disables Gutenberg for all users on your website. However, uncheck the Complete Disable option if you only want to restrict it to particular user roles and post types, theme templates, or content.

Disable gutenberg for specific user roles

Conclusion

All in all, WordPress is a highly flexible platform that allows you to build the ideal writing environment, whether you like the distraction-free Fullscreen mode or the feature-packed Classic editor view. While the Fullscreen editor provides a distraction-free environment, some people prefer the compact view for easy access to the whole dashboard.

In this article, we discussed different ways to temporarily or permanently disable Fullscreen mode in Gutenberg. We first saw how to temporarily disable Fullscreen mode using the default Gutenberg editor options. Next up, we saw the use of plugins and code snippets to achieve the same result.

Moreover, we also discussed how to revert back to Fullscreen mode later on if you want. Just like before, we have the option to restore Fullscreen mode both temporarily as well as permanently.

We hope you find this article helpful in disabling Gutenberg’s full-screen mode. Which view do you like the most and why? Let us know in the comments below.

Meanwhile, here are a few more posts you might find interesting:

How to Create Custom Color Palette in Gutenberg

Do you want to create a custom color palette in…

Gutenberg Vs DIVI: The better page builder in 2022

Using Page builders has been the norm if you want…

Related posts

Wowmall Blocks < Beta > release is coming!

Subscribe to our beta teters program and get a free premium license!

Our beta testers programs allows you to receive the latest Wowmall Blocks releases. Beta versions includes the latest experimental features before they arraive to the market.