WordPress post editor is congested with toolbar, menus and sidebar and you have many possibilities of getting distracted with these options. Whether you are copy / pasting offline content or directly creating content online with the editor, you need to spend considerable time in front of the editor for creating a site using WordPress. Fortunately WordPress does offer some solutions for distraction free writing and this article explains all such possibilities. We will explain how to use distraction free writing in WordPress Classic as well as Gutenberg editor.
1. Distraction Free Writing in Classic Editor
New WordPress installations by default use Gutenberg editor. However, you still need to rely on the old Classic editor for creating/editing custom post types like WooCommerce product pages. Below is how the Classic editor will look on your site.
Click on “Distraction Free Writing” icon when you are in the WordPress Classic Editor.
The editor will be changed with limited toolbar options and there will be no navigation menu and sidebar meta boxes displayed in this distraction free mode.
Note: From WordPress 4.1 version, when the distraction free writing icon is clicked menus and sidebar will slide out within the same screen without popping out as a new screen. You can again click the icon to bring the screen back to normal. You can enable or disable this option under “Screen Options”.
The problem with distraction free editing is that all toolbar icons are not displayed and there is no option to choose what icons you want to display on mouse hover. Width of the distraction free editor is also very small which you can adjust using the below keyboard shortcuts:
| Windows Keyboard Shortcut | Mac Keyboard Shortcut | Function |
|---|---|---|
| Ctrl + + | Command + + | Expanding editor width |
| Ctrl + – | Command + – | Contracting editor width |
| Ctrl + 0 | Command + 0 | Reset editor to default width |
1.1. Disable Sidebar Section Showing Meta Boxes
Another option to increase the width of WordPress editor is to disable default widgets showing on sidebar or push them below the content. Click on “Screen Options” button available at top right corner and uncheck the boxes to disable sidebar widgets.
Selecting “Number of Columns” as 1 will expand the width of the editor by pushing all selected widgets below the content.
WordPress introduced a new function “Expand the editor to match the window height” and enabling this checkbox will result in content scrolling within the height of viewable content area instead of the whole page is scrolling together till the time the end of content is reached.
2. Distraction Free Writing in Gutenberg Editor
Below is how the default Gutenberg editor will look like on your site. Though it has more distractions than the old Classic editor, you have plenty of options for distraction free writing in Gutenberg editor.
Click on the three vertical dots “Options” icon showing on top right corner of the editor and you can see the following items under “View” section:
- Top toolbar
- Spotlight mode
- Fullscreen mode
- Distraction free
You can use all these options to reduce the clutter and focus on your writing. Gutenberg will remember your selection and open the editor as used previously.
2.1. Top Toolbar Mode
One of the annoying things with Gutenberg is the pop-up toolbar showing on each block. It will hide the content and disturb by always showing when selecting a block. Enable “Top toolbar” option to fix the block’s toolbar just below the editor’s document toolbar (which has the publish and other buttons). Now, you can write freely in paragraph blocks or select and edit images without the pop-up.
2.2. Spotlight Mode
This allows to focus only on the currently working block by highlighting it. All other blocks will be dimmed so that you will not get distracted by them.
2.3. Fullscreen Mode
This will hide left admin panel navigation menus and allow you to work in full screen. You can click the site icon showing on top left corner to go back to admin panel after publishing your content.
2.4. Distraction Free Mode
Distraction free option will hide the right settings panel showing all meta boxes for your document (post) and block. It will also hide the top document menu which will be shown on mouse hover and completely disable blocks pop-up toolbar. However, distraction free mode will still show the left navigation admin menus. What you can do is to enable both fullscreen and distraction free modes and work in Gutenberg like you write in a Word document.
It will be really difficult work with distraction free mode without block’s toolbar. For example, you can’t quickly insert links or format text. In this case, you can enable “Top toolbar” and “Fullscreen mode” options to make things easier for you.
You can toggle fullscreen and distraction free modes on or off using the following keyboard shortcuts.
| Mode | Windows Shortcut | Mac Shortcut |
|---|---|---|
| Fullscreen | Alt + Shift + Control + F | Option + Shift + Command + F |
| Distraction Free | Shift + Control + Backslash | Shift + Command + Backslash |
2.5. Hiding Right Settings Panel
Click on the “Settings” icon showing on top toolbar in Gutenberg to hide or show the right side Setting panel. This can give you more space when editing with “Document Overview” enabled.
3. Collapse Left Navigation Menu
This works regardless of whether you are using Classic or Gutenberg editor as the left sidebar navigation is common in the admin panel. If you need more space when using default Classic or Gutenberg editor then you can collapse the left navigation menu section to increase the width of editor. Just click on the “Collapse Menu” option available at the end of menu to collapse or expand the entire menu section.
Final Words
Both Classic and Gutenberg editors in WordPress offer distraction free mode to focus on content creation. However, you can simply hide the left navigation menus and right settings panel to increase the available space without using distraction free mode.
Leave a Reply
Your email is safe with us.