Before going into the building of a block, I want to give a more in depth look at the block editor on a whole. I think this will give a better understanding before getting down to the block level.
When you create a new page or post in WordPress this is the screen you will first see.
A bar going across the top, followed by a large content area and a sidebar with tabs and accordion style sections. It’s completely different in some ways from the classic editing experience but in some ways there are very familiar, recognizable sections like “Add title” in the editing section, the post summary, categories, tags, featured image etc, all recognizable WordPress editing sections.
Top Toolbar
The bar going across the top is officially called the top toolbar. The top toolbar includes tools to help navigate, and publish within the editor. On the left you’ll see an exit back to the main wp-admin area, a block inserter, a tools selector to help aid in interacting with blocks, undo and redo buttons, a post details button, and a list view button to help view all the blocks on you’re page in a navigational list. On the right you see publishing tools, such as save draft, preview and publish; there is also a settings toggle.
Content Area
The largest section of the block editor is the content area. At first it looks very simple, there is a place to add your post title and by default you’re prompted with a message to add a block, and button with a plus sign. You can click on the prompt and immediately start typing, or click the “+” and begin to see a collection of blocks included on your site.
These blocks are the driving power behind the block editor and more will come on those in a later post.
Settings Sidebar
The sidebar includes settings for the post itself in one tab, and settings for the selected block in the other. What you will see in these tabs will depend on your theme, plugins, and the block you are working with. Not all blocks have the same settings so it’s important to familiarize yourself with these settings as you’re beginning to navigate the block editor and any new blocks.
In the next post I want to begin looking at the different available blocks, and the variety of ways they can be added to a post.