The WordPress Block Editor offers clean interface and a few sections that contain specific settings and options.
- Top Toolbar;
- Settings Sidebar containing tools and settings for the document and the blocks;
- Area where content is entered;
- Metadata section;
- Editor Options;
1) Top Toolbar
Here you will find the main options and buttons for document operations.
Add Block
By using this button you can add new blocks to the content. This button is also called block adding tool.
You can add a new block by clicking on it. You can search for a block by using the search field.
Undo and Redo
To undo an operation or an action with the content you can use the respective button. You can also use the Ctrl+Z shortcut for Undo and Ctrl+Shift+Z for Redo.
Content Structure
From this option you can preview the document outlined – word count, headings, paragraphs and blocks as well as a tree structure representation of the content elements.
Block Navigation
By using the block navigation you can switch between blocks.
Save, Preview, Publish
Save/Saved
By using this button you can save your current document. This button will change to Draft once after you publish the document.
Preview
By using this option you can preview how the document will look on the front-end. When you click Preview the document will be automatically saved if it is still a draft.
Publish
After you finish working on a document, you can publish it on the website by clicking Publish.
After the document has once been published, this button will change to Update.
Others
Button to Hide/View the Settings Sidebar
The shortcut for Hide/Show the Settings Sidebar is Ctrl+Shift+.
Button for settings and options of the Block Editor – 5) Settings and Options of the Block Editor
2) Settings Sidebar
From the Settings Sidebar you can access two tabs – Document and Block. The Document tab contains settings for the document, and the Block tab contains settings for the block.
When no block is selected, the Document tab is activated by default.
Upon selecting a block the Block tab gets activated in the sidebar.
Block settings can be set, updated or removed through the editor interface of the theme and the plugins used.
The Settings Sidebar can be hidden/shown with the button available on the Top Toolbar.
3) Content
This part of the Editor enables you to enter content for your post/page. Content is built up with specific blocks of information. The most common blocks are paragraph, image, heading, list, gallery, quote, audio, cover, file, video, etc.
If you have already created content by using the Classic Editor for your website, you can keep editing it with the Classic Editor by using the Classic Block.
🔗 How We Prepared Our Blog for Gutenberg and WordPress 5+ (Case Study) | Blog
4) Metadata
The section below the article may contain additional boxes (panels) with information. They can be added by the plugins or the theme installed on the website.
Additional content data may be also located into panels as well as into the Sidebar, Document tab.
5) Additional Settings and Options of the Block Editor
The Editor options can be accessed by the button from the Top Toolbar representing three dots.
From this menu you can view additional options added by installed plugins.
Top Toolbar of the Block Editor
This is a very convenient feature of the Block Editor by using which you can move the Block tools to the Top Toolbar instead of being attached to the Block itself.
Spotlight Mode
Focus on blocks one by one. You cannot move blocks when working in this mode. It is used to focus on generating content in a specific block without distractions from the rest of the content in the other blocks.
Fullscreen Mode
With this option the editor is stretched to the whole window width.
Visual Editor
This is the default mode for content editing of the Block Editor.
Code Editor
In the Code Editor mode you can edit the HTML/CSS code of the content. You can exit this mode by clicking the Exit Code Editor button or from the options by clicking on the Visual Editor.
Managing Reusable Blocks
This option redirects you to a list of all generated reusable blocks
Keyboard Shortcuts
Working with the Block Editor can be much faster when you use keyboard shortcuts for content operations.
Copy all Content
You can copy the whole content of the document. It will be copied as it is displayed in the code editor with the HTML comments.
Settings
Enable Pre-Publish Checks
When this option is enabled, a message for checking before publishing will be displayed.
Enable Tips
This option allows you to enable hints and tips in the Block Editor.
Document Panels
Here you can view a list of all panels where additional data for the type of document is stored. The main panels used for publishing are Permalink, Categories, Tags, Featured Image, Excerpt and Discussion. For a page the main panels are Permalink, Featured Image, Discussion, Page Attributes.
Advanced Panels
Here is a list with all additional panels (metaboxes) which can be shown/hidden from the Block Editor.