Block Editor Tools
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:
|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 text color.