How to Write Without Distractions in WordPress

Published in WordPress.

The creative process is something quite difficult to understand. There are days when you write content for your blog without any problem. Everything flows and nothing distracts you from your task. But this doesn’t always happen, to our dismay 😭

Most times, when you are writing content (or trying to), the flow is gone and anything can distract you. A notification on your smartphone, a new email, someone who comes in or leaves the office, a fly… anything!

Now that mindfulness is so trendy, let’s see how we can convert our WordPress editor into a distraction-free environment so that it is easier for us to focus all our attention on the task we are doing: write.

The Distraction-free Mode in The WordPress Block Editor

The WordPress block editor, also known by the codename Gutenberg, has changed the content editing experience we were used to from top to bottom.

Now you have every piece of content represented by an individual block. These blocks can also be modified in several ways: some have options in the right sidebar in addition to the upper floating toolbar.

The WordPress block editor introduces a modern interface where each piece of content is a block.
The WordPress block editor introduces a modern interface where each piece of content is a block.

In fact, we now have two top bars, as you can see in the previous screenshot. One of them is located at the top of the editor and allows you to save the content, among other things. The other top bar is the one that appears just above each block, floating on top of it.

Unifying The Upper Block Toolbar

We can merge the top bar of the WordPress block editor and the top floating toolbar of each block into a single bar. To achieve this, you just have to click on the icon with the three vertical points that you will find in the upper right corner. This will open a floating dialog where you have to click on the Top Toolbar option.

We can move the toolbar of each block to the top of the WordPress block editor.
We can move the toolbar of each block to the top of the WordPress block editor.

The result is much better, IMHO. Now the two bars are at the top of the WordPress block editor. I don’t see any point in having the block toolbar floating above the block when you can have it always in the same place, on top of the editor.

The Spotlight Mode in Gutenberg

In the WordPress block editor every time we click on a block it is highlighted with a border and its sidebar is shown with the options that the block itself has. If you want to highlight the active block in a more subtle way and reduce the relevance of the rest of the blocks you are not editing, you can do so thanks to the Spotlight mode that Gutenberg includes.

If you just want to focus on the block you are editing, activate the focus mode in the WordPress block editor
If you just want to focus on the block you are editing, activate the Spotlight mode in the WordPress block editor.

Re-open the floating dialog that appears when you click on the icon with the three vertical dots and there you will find the Spotlight Mode option. When you activate it, the active block will be more prominent than the rest.

In the previous screenshot you can see the result, where the active block is the first paragraph. The rest of the blocks have a less accentuated gray color to take away their relevance. Thus, you are not distracted by them and may focus on the active one.

The Fullscreen Mode in Gutenberg

We’re almost done. Now we’ll eliminate all aspects of WordPress that have nothing to do with the block editor itself. To do this, you must activate the fullscreen mode of Gutenberg.

You do this, again, by opening the floating dialog and clicking on the Fullscreen Mode option.

Eliminate distractions by activating the full screen mode of the WordPress block editor.
Eliminate distractions by activating the fullscreen mode of the WordPress block editor.

Once you activate it, the left sidebar of WordPress as well as the top bar of the Dashboard will both disappear. This leaves all the window space to the WordPress block editor itself. And you won’t get distracted by update reminders or plugin notifications.

Anyway, there is something that we have not removed yet, and it is the right sidebar, which belongs to the editor itself. But this is quite simple to do. You just have to click on the gear icon or press the Command Shift , key combination on Mac or Ctrl Shift , on Windows.

Hide the sidebar of the WordPress block editor to clean more if the content editing interface fits.
Hide the sidebar of the WordPress block editor to get a more clean content editing interface

The result, which you can see in the following screenshot, shows a much simpler and cleaner interface. It is now much easier to focus on writing without distractions from the interface of the WordPress block editor itself.

The WordPress block editor interface is very clean when we activate all the options to avoid distractions.
The WordPress block editor interface is very clean when we activate all the options to avoid distractions.

But not everyone has switched to the new block editor, right? 😢

The Distraction-free Mode in The Classic Editor

If you are a member of the resistance against the WordPress block editor, or have not yet made the leap to the new editor, be aware that the classic editor in WordPress also includes a distraction-free writing mode. To activate this mode, just click on the icon that appears on the right side of the top bar of the editor, the one with 4 arrows expanding, as you can see in the following screenshot:

The classic WordPress editor includes quite a few boxes with additional information that distract you as you type.
The classic WordPress editor includes quite a few boxes with additional information that may distract you as you type.

You can also activate distraction-free writing mode in the classic WordPress editor with the Shift Alt W key combination on Mac or Windows.

Even though the result is not perfect –to say it in an elegant way– the interface eliminates everything superfluous to avoid distractions.

Activate the write mode without distractions in the classic WordPress editor for a cleaner interface.
Activate the distraction-free writing mode in the classic WordPress editor for a cleaner interface.

And BTW, you should give the new block editor a chance. It has improved a lot and will allow you to do many more things more easily 😉

Without Distractions, Focus on What Matters

Avoiding distractions is at your fingertips if you use WordPress editors to write your content. Here you have seen how turn a complex interface into something cleaner.

But this is not a silver bullet: if you get distracted all the time, perhaps it is better to postpone your writing activities until you have some spare time. Find those moments in which you can focus and use them to write.

Are you one of those who get distracted a lot? Have you focus problems when writing? I would like to read your experience in the comments.

Featured image by Samantha Gades on Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.