Hey there, WordPress user! π If you‘re reading this, chances are you‘ve encountered the new fullscreen editing experience in WordPress 5.4 and beyond. While this distraction-free mode can be great for focusing on your writing, sometimes you just want to get back to the classic editor view. Sound like you? Don‘t worry, I‘ve got you covered! In this expert guide, we‘ll walk through exactly how to disable the fullscreen editor in WordPress, step-by-step.
π€ Why Disable the Fullscreen Editor?
Before we dive into the how-to, let‘s talk about why you might want to turn off the fullscreen editor in the first place. Here are a few common reasons:
Prefer the classic editing experience: If you‘ve been using WordPress since before version 5.0 (released in late 2018), you may be more comfortable with the old-school editor interface. No shame in sticking with what works for you!
Frequently use sidebar tools: The fullscreen mode hides the admin sidebar, which contains handy links to other parts of your site, plugin settings, and more. If you find yourself constantly toggling fullscreen on and off to access these tools, it might be more efficient to disable it altogether.
Manage content across multiple devices: Because the fullscreen setting is saved in your browser‘s local storage, you‘ll need to disable it separately on each device you use. This can be a pain if you often switch between your laptop, tablet, and phone to manage your site.
Accessibility needs: For users who rely on assistive technologies like screen readers, the abrupt change in layout when entering fullscreen mode can be jarring and disorienting. Keeping a consistent interface can improve usability.
So, just how widespread is the Gutenberg block editor experience? According to WordPress.org, as of 2023, 43.3% of all WordPress sites use the block editor, with adoption continuing to grow as more users upgrade to version 5.0 or higher. Still, that leaves a significant portion of the 60 million total WordPress sites still using the Classic editor plugin or disabling fullscreen mode.
π οΈ How to Disable the Fullscreen Editor (Quick & Easy)
Now, let‘s get into the nitty-gritty of turning off that fullscreen mode! Here‘s a step-by-step breakdown:
- Log in to your WordPress dashboard and navigate to Posts β All Posts (or Pages β All Pages, depending on what you‘re editing).
- Click on the title of the post or page you want to edit to open it in the block editor.
- In the top-right corner of the editor, locate the Tools & Options icon (three vertical dots) and give it a click.
- From the dropdown menu that appears, simply select "Fullscreen mode" to toggle it off.
Ta-da! π The editor will snap back to the standard view, with the admin sidebar and top toolbar visible once again. This setting will be saved in your browser‘s storage, so the next time you edit a post or page, the fullscreen mode will remain disabled.
Keep in mind: If you access your site from a different browser, device, or clear your browser cache, you may need to repeat these steps to turn fullscreen off again.
π Disable Fullscreen Permanently with Code
For more advanced users, site administrators, or those managing content across multiple devices, adding a small code snippet to your theme‘s functions.php file or a custom plugin can ensure the fullscreen editor stays off for good. Here‘s how it‘s done:
- Open your preferred FTP client or log in to your site‘s file manager via your hosting panel.
- Navigate to your active theme‘s directory, usually located at
/wp-content/themes/your-theme/. - Look for the
functions.phpfile and download a copy to your computer as a backup (just in case). - Open the original
functions.phpfile in a text editor. - Paste the following code snippet just before the closing
?>tag:
function wpexpertguide_disable_fullscreen_editor() {
$script = "jQuery(window).on(‘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‘, ‘wpexpertguide_disable_fullscreen_editor‘);What does this code do, exactly? Let‘s break it down:
- The
wpexpertguide_disable_fullscreen_editor()function is defined, which will house our script. - Inside this function, we create a JavaScript variable
$scriptthat uses jQuery to check if fullscreen mode is active when the editor loads. - If fullscreen is enabled, the script toggles it off using
wp.data.dispatch(). - The
wp_add_inline_script()function then injects our script into the editor‘s JavaScript file. - Finally, we hook our function into WordPress using the
enqueue_block_editor_assetsaction, ensuring it runs whenever the block editor assets are loaded.
- Save your changes and re-upload the
functions.phpfile to your server, overwriting the original.
With this code in place, the fullscreen editor will be automatically disabled for all users editing posts or pages on your site, across all devices and browsers. Pretty nifty, huh?
| Feature | Fullscreen Editor | Standard Editor |
|---|---|---|
| Sidebar | Hidden | Visible |
| Top Toolbar | Hidden | Visible |
| Distraction-free | β | X |
| Quick access to tools | X | β |
| Consistent across devices | X | β (with code snippet) |
π¨ Customizing the Block Editor Experience
Of course, disabling the fullscreen mode is just one way to tailor the WordPress editing experience to your liking. Let‘s take a look at a few plugins that offer even more customization options:
- Gutenberg Editor Enabler: In addition to turning fullscreen mode on or off, this plugin lets you tweak the default editor width, enable custom colors for blocks, and more.
- EditorsKit: This powerful toolkit adds over 20 new blocks to the editor, plus options to customize the editing toolbar, enable markdown support, and control block spacing.
- Disable Gutenberg Blocks: If you find the sheer number of Gutenberg blocks overwhelming, this plugin allows you to hide individual blocks from the inserter menu.
Remember, the key to a smooth and enjoyable editing experience is finding the right balance of features and interface options that work for you and your specific needs.
π‘ Expert Tips for Improving Your Workflow
Before we wrap up, I want to share a few more tips for streamlining your content creation process in WordPress:
Master keyboard shortcuts: Did you know the Gutenberg editor has dozens of built-in shortcuts? Press
Shift + Alt + Hwhile editing a post to view the complete list, or check out this handy cheat sheet from WordPress.org.Embrace reusable blocks: If you find yourself adding the same content snippets over and over (think social media links, CTAs, or disclaimers), turn them into reusable blocks! Just create the block once, click the three-dot menu, and select "Add to Reusable blocks." Next time you need it, simply search for it in the block inserter.
Draft on the go with the mobile app: The official WordPress mobile app (available for both iOS and Android) lets you create and edit posts right from your phone or tablet. It‘s a great way to jot down ideas or make quick edits when you‘re away from your computer.
π Take Control of Your Editing Experience
Well, there you have it, folks! A complete guide to disabling the fullscreen editor in WordPress. Whether you prefer the old-school Classic editor vibes or just want easier access to your admin tools, I hope these tips and tricks help you create a personalized editing experience that works for you.
By taking control of your content creation workflow and leveraging the power of plugins, keyboard shortcuts, and mobile drafting, you‘ll be churning out top-notch posts and pages in no time. πͺ
If you found this guide helpful, I‘d love to hear about it! Leave a comment below or connect with me on social media to share your WordPress editing tips and success stories. Happy blogging! π
