Tools & Options

The new Block Editor provides a completely redesigned editing experience, and along with it, a new set of tools with which to edit your page. Although the editing interface is completely new, you will find many elements that you’re already familiar with.

At the top of the page is the main Block Editor Toolbar. This new toolbar contains a number of new icons and some old familiar ones:

The Block Inserter icon is used to insert new blocks into your content. Clicking this icon will pop open a small panel that gives you access to all the different types of blocks that you can insert.

The Undo icon allows you to Undo your most recent change(s).

The Redo button allows you to Redo your most recent change(s).

The Content Structure button provides information about your page content. It will show you how many Words, Headings, Paragraphs and Blocks your content contains along with showing the document structure and providing links to each of the headings in your content.

The Block Navigation button shows a list of all the blocks in your content and provides a quick link to each of them.

The Switch to Draft button only appears after your Page/Post is published. Clicking this button will unpublish your Page/Post and put it back in Draft mode.

The Save Draft button allows you to save your Page and will only appear if your Page/Post has not been published yet.

The Preview button will allow you to preview your page. The preview page will open a new browser tab/window.

The Publish button allows you to publish your Page/Post. Unlike previous versions a WordPress, publishing your page is now a two-step process. After clicking the Publish button the first time you’re then shown a new panel with a confirmation message and another Publish button. This panel also allows you to change the visibility of your content and the publish date and time. Clicking this second Publish button will actually publish your content and make it live on your site.

If your content is published, then the Publish button will be replaced with an Update button. Just like in previous versions of WordPress, clicking the Update button saves your changes.

The Settings Sidebar shows all the settings for your Page/Post including elements like adding Featured Images, specifying your Categories and Tags on Posts, or selecting Page/Post templates. Clicking the Settings icon will show and hide the settings sidebar.

The last icon in the Toolbar is the Show more tools & options icon. This button provides access to a number of adhoc settings. You can turn on/off the Top Toolbar and Spotlight Mode. You can also display your content using the Visual Editor (the default mode for adding blocks) or using the Code Editor, which allows you to edit the underlying html. You can also re-show the Block Editor tips, view a list of the editor keyboard shortcuts and also copy all the content in your page with a single click.

A word of caution, with the new Code Editor features. The Block Editor saves your content in a slightly different manner than the old (TinyMCE) Classic Editor. Previously, WordPress would save your content as a simple chunk of HTML. Whilst there is still HTML in your underlying content, the new Block editor also wraps each individual section of your content within HTML comment tags. It uses these comment tags to differentiate the various types of blocks your content is contained within. So, while you can still edit your HTML using the Code Editor view within the Block Editor, please take extra caution not to remove or change any of the HTML comments surrounding your content. Doing so, will cause one or more of your blocks to not display correctly once you switch back to the Visual Editor mode, and may possibly even cause you to lose content. If you feel you do need to edit the Block HTML, it’s safer to use the ‘Edit as HTML’ option under the ‘More Options’ icon for each individual Block, than using the ‘Code Editor’ option under the ‘Show more tools & options’ icon at the top of the page.

Underneath the Block Editor Toolbar you’ll find your content area. This is where you’ll add all your content, comprised of various types of blocks. Each block that you add into your content area, will have its own toolbar, and will either display just above the block (by default) or in the main Block Editor Toolbar at the top of the screen (if the Top Toolbar option is turned on).

Each block will have a different toolbar, and the icons in that toolbar will be dependent on the type of content that the block contains. As an example, the toolbar on a Paragraph Block will be different to the toolbar on a Heading Block, because they contain different types of content. After clicking on, or selecting a block, you may even find there are extra options that you can set in the Settings Sidebar. Again this will depend on the individual block that you’ve selected.

Next to your content area on the right hand side of the screen, is the Settings Sidebar. The Settings Sidebar contains settings for the whole Page/Post that you’re currently editing, as well as settings for the currently selected block.

At the top of the Settings Sidebar there are two tabs that you can select, Document or Block. The Document tab shows the settings for the individual Page/Post that you’re currently editing. This may include things like setting your featured image, selecting Categories and Tags (when editing a Post), or selecting a Page/Post template, among other things.

The Block tab shows the settings for the currently selected block. These settings will change depending on the type of block that is currently selected, and some blocks have more settings than than others. As an example, the Paragraph Block has settings for changing the size of the text, whether to display a Drop Cap, and in some themes, settings for the text colour and the background colour. The Heading Block on the other hand, only has settings to change the Heading Level (H2, H3 etc.) and the alignment.

Block Editor Options

There are several options available to help customise how the Block Editor displays. These options can be found under the Show more tools & options icon in the top-right corner of the page () when editing a Page or Post.

The Show more tools & options menu provides the following options:

• Top Toolbar – Enabling this option will display the Block Toolbar at the top of the page, rather than just above each individual block.
• Spotlight Mode – Enabling this option will dim all the blocks on the page except for the currently selected block, making it easier to focus on just that block.
• Fullscreen Mode – Enabling this option will hide the top admin bar and the left-hand menu. This is similar to the Distraction-free writing mode that was available in the old Classic Editor.
• Visual Editor – This option is enabled by default and will show your content as individual blocks.
• Code Editor – Enabling this option will turn off the Visual Editor and instead, display the html that makes up your content. It’s important to note that whilst there is still HTML in your underlying content, the new Block editor also wraps each individual section of your content within HTML comment tags. It uses these comment tags to differentiate the various types of blocks your content is contained within. So, while you can still edit your HTML using the Code Editor view within the Block Editor, please take extra caution not to remove or change any of the HTML comments surrounding your content. Doing so, will cause one or more of your blocks to not display correctly once you switch back to the Visual Editor mode, and may possibly even cause you to lose content.
• Block Manager – This option allows you to disable individual blocks or entire block panels. This stops them from being displayed within the Block Inserter. Disabling a block will only stop yourself from seeing the block. It won’t disable it for any other user on the site.
• Manage All Reusable Blocks – Clicking this option will exit you from the editor and present you with a list of all your Reusable blocks, which you can then Edit, Delete or Export to a file (which can then be imported to another site is so desired). A word of warning, you will not be prompted to save your content, even if it’s changed. You will be taken to your list of reusable block as soon as you click this option which could cause you to lose content if you don’t save your page first.
• Keyboard Shortcuts – Displays a list of the keyboard shortcuts that are available within the Block Editor.
• Copy All Content – This option will copy all the content within the current Page or Post, to your clipboard.
• Options – This option provides further options for customising how the Block Editor Displays. You can Turn off/on the Pre-publish Checks, the Block editor Tips and also the Inserter Help Panel. You can also turn off/on several default Document Panels such as the Categories, Tags or Featured Image Panels, along with others.