Rearranging Wordpress Editor

How to Reorganize the Post Editing Screen in WordPress

Table of Contents

When it comes to content creation, WordPress is widely regarded as one of the most versatile and user-friendly CMS platforms available. Indeed, this is one of the reasons why so many well-known brands depend on WordPress to run their websites.

Now, when it comes to the WordPress content editing system, there are many options, two of which are especially popular: the older version of the WordPress editor known as Classic (which is now available as a plugin of the same name) and the modern, block-based editor known as Gutenberg. Although opinions on which of the two editors is better are still divided within the WordPress community, that isn't the subject of this post. Rather, this time I'll look at how you can customize the post edit screen in both WordPress editors to fit your needs.

You can create a cleaner atmosphere and one that feels less clogged up and distraction-free by rearranging and/or hiding various areas and choices inside your WordPress editor that you don't use very much. This way, you'll be able to concentrate entirely on the task for which each of these editors were created in the first place: content production.

So stay with me as I teach you how to rearrange your WordPress post edit screen in both the Gutenberg and Classic editors.

Reorganising the Post Edit Screen in Gutenberg

The launch of the Gutenberg editor, according to many, has elevated the experience of creating content in WordPress to a whole new level. The editing process is now more effective, simpler, and modern than it has ever been. However, as you become more familiar with Gutenberg's interface, you'll likely find that some areas and parts can be skipped. Of course, which ones you choose to get rid of would be entirely dependent on your personal preferences. Here's a list of everything you can do to tailor the Gutenberg editor's appearance to your taste.

Using Meta Boxes to Hide Specific Meta Boxes

This is how Gutenberg's default post editing screen looks like:

GUTENBERG EDITOR

Now, if you look at the right-hand side of your computer, you'll see two types of settings: Document and Block settings. The former are global settings for your page or article, while the latter are unique to the block you're editing inside the editor.

GUTENBERG DOCUMENTS BLOCK

You'll also notice the three dots that, when selected, bring up a menu.

GUTENBERG-SETTINGS-DOTS-OPTIONS

You can check (and uncheck) different meta boxes that appear on the right side of the screen, such as Permalink, Categories, Discussion, Excerpt, and so on, once you pick Options (located at the bottom of the menu).

WORDPRESS-POSTS-OPTIONS-SCREEN


We suggest hiding any of these solutions if you don't use them often and want a cleaner working space in your editor.

For example, without the Excerpt, Categories, and Tags panels, the Document Options screen would look like this:

GUTENBERG-DOCUMENT-OPTIONS-2

Moving the Block Toolbar to the Top

You can now rearrange the position of the block toolbar, which is normally displayed above the block you're working on.

To move the toolbar to the top, open the menu by clicking the three dots and selecting the “Top Toolbar” option.

WODPRESS-TOOLBAR

Through doing so, you'll be able to access the toolbar options for your blocks from the same location (at the top), making the whole editing process simpler when you switch between blocks.

The end result is as follows:

WORDPRESS-TOOLBAR-OPTIONS

Taking Out the Right Panel

You can also clear out your editing area completely and delete the panel on the right side of the screen to reduce distractions when creating content. To do so, simply click once on the gear symbol, and the panel will vanish.

WORDPRESS-EDITOR-GIF-1

Of course, you can always press the same gear icon to bring up the panel again.

Activating Fullscreen Mode

You can still hide the admin toolbar and sidebar if you want to work with even less distraction. To do so, simply hover your mouse over the three dots and select Fullscreen mode. Both your toolbar and sidebar will vanish as a result of this.

WORDPRESS-EDITOR-GIF-2

If you unmark this alternative, they will reappear:

GUTENBERG-NORMAL-PREVIEW-2

It's worth noting that WordPress remembers which choice you choose, so the editor will appear exactly as you left it the next time you visit.

Spotlight Mode

Spotlight Mode is a feature that allows you to see what's going on around you.
The Spotlight mode is especially useful since it highlights the block you're currently editing by reducing the opacity of others, allowing you to concentrate better on the task at hand and find the block you're working on faster. This choice is allowed by default in Gutenberg, so there's no need to adjust anything if you want to use it.

GUTENBERG-SPOTLIGHT-MODE

If you want to disable this function, go to the three-dotted menu and uncheck the Spotlight mode box.

GUTENBERG-UNMARK-SPOTLIGHT

In the Document Panel, collapsing the Meta Boxes

The ability to cover such meta boxes in the Document Panel has already been stated. If you'd rather just momentarily cover them rather than fully remove them from the screen, simply collapse one, more, or all of the boxes by clicking the upward arrow on each one.

GUTENBERG-EDITOR-GIF-3

This will make the document look much cleaner and better in general.

In the Classic Editor, rearrange the Post Edit Panel.

If you prefer the Classic editor to Gutenberg, you'll be pleased to know that there are plenty of ways to reorder and hide various parts in this editor as well. We'll go through them one by one.

Meta Boxes are being minimised.

In addition, the Classic editor has a segment on the right side of the screen with different meta boxes. The Publish box, Categories, Tags, Featured Picture, and so on are all part of this.

WORDPRESS-CLASSIC-EDITOR-SIDEBAR-2

Click the upward arrow on the box in question to collapse it, just as you would in the Gutenberg editor.

GUTENBERG-CLASSIC-EDITOR-ARROWS-2
EDITOR-ARROWS-DOWN

Simply click the downward arrow to display the options inside the meta boxes once more.

EDITOR-CATEGORY-ARROW

Repositioning the Meta Boxes

You can also drag and drop these boxes from inside the editor to adjust their individual positions and rearrange them in a way that best suits your needs. You can, for example, shift the Tags box closer to the top and the Categories box closer to the bottom.

GUTENBERG-POST-EDITOR-GIF-4

There are a few boxes immediately below the post editor that you'll note. You can also press and move each of these boxes to the right-hand side of the screen, or vice versa – drag the boxes on the right-hand side to the bottom of the editing screen.

GUTENBERG POST EDITOR GIF 5

Alternatively, you can move each box up or down and make it switch places with another box by using up or down arrows:

WORDRESS EDITOR GIF 6

Hide Metaboxes.

You can also fully cover unique meta boxes using the Screen Options panel in the top right corner. Then uncheck the boxes that you want to hide.

WORDPRESS EDITOR SCREEN OPTIONS 2

You can also label the boxes you want to see or leave them alone if they're already checked.

You can also switch between a single column and a double column style here. This will affect the appearance of your meta boxes in the editor. All meta boxes will be displayed below the editor in one column, while some boxes will be displayed below the editor and others on the right side of the editing screen in two columns (this is the default setting).

WORDPRESS SCREEN OPTIONS COLUMNS 2

Distraction-Free Writing Mode Activation

The fullscreen mode is also available in the Classic editor, just as it is in Gutenberg. This alternative blurs the admin toolbar above while eliminating all meta boxes and the admin sidebar. To do so, simply press the ALT+Shift+W key combination on your keyboard or click the fullscreen icon in the editor.

WORDPRESS EDITOR GIF 7

If you don't see this feature in your editor, you can enable it by checking the option “Enable full-height editor and distraction-free features” in the above-mentioned Screen Options.

WORDPRESS EDITOR ENABLE FULL HEIGHT 2

You should be aware that if you hover over the sidebar or meta boxes, this mode will be automatically exited.

WORDPRESS POST EDITOR GIF 8

Final Thoughts

WordPress is a highly adaptable and user-friendly platform that helps you to streamline your content creation process. If you're using the latest Gutenberg editor or the Classic one, you'll find plenty of options to help you build a tidy, distraction-free atmosphere. During the process, you can cover various boxes you don't need, use fullscreen mode to hide the admin sidebar, and much more. The best part is that you can still restore the appearance of your editing screen to its original state at any time.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: