- Advent of Gutenberg 1 – Introduction
- Advent of Gutenberg 2 – Text
- Advent of Gutenberg 3 – Media
- Advent of Gutenberg 4 – Block fiesta
- Advent of Gutenberg 5 – UI Overview
- Advent of Gutenberg 6 – Block Sharing
- Advent of Gutenberg 7 – Keyboard Efficiency
The direction WordPress is taking technically, will hopefully enable it to reach an even wider audience. This does not mean PHP is going anywhere. PHP is by some estimations still the most widely used server side language. Even if or when PHP is no longer a bedrock of web applications, it is unlikely the entirety of WordPress core will be replaced with another language. Most likely something else would have replaced WordPress. The block concept in a lot of ways though does detach WordPress from it’s underlying server implementation, so only the future will tell what happens.
Enough jarbling around! The editor has three main areas currently. The header, sidebar, and content area. Each of these plays an important part to shaping our editing experience. Out of the box it is pretty straightforward to just start typing content into the editor like you normally would.
The editor in the picture above is set into the Top Toolbar mode, meaning that we see the block controls in the top toolbar as opposed to hovering over each block, in a more Google Docs, Microsoft Word fashion. Remember Word in many ways was the killer app of computers for many decades.
Left side of header
The first tool we see in the header is the block inserter. The block inserter is very important, as that is the main way we add new blocks. There are keyboard shortcuts available, but if you are a more visual, the plus button will be your most widely used button.
Next to that we have redo and undo controls. The undo and redo feature keyboard shortcuts as well, but they can be visually accessed here in the header. From my experience, the undo and redo functionality is pretty darn good in Gutenberg. This is partially due to the tech choices made for the project, as well as the great team behind it.
The next two parts of the header are really interesting.
One of the coolest features is the content structure menu, where we get a quick overview of our document.
I love this feature. I can see how many words I have typed, headings used, paragraphs used and how many blocks. We also get a nifty document outline. Remember we now have a data model of our content, things like this are more at hand and easy to implement. I see very quickly that there is an error in my heading structure, which I have just now fixed. Would I have noticed that in the classic editor? I highly doubt I would have. It’s all about the blocks.
Next on the list is the block navigation.
When we open the block navigation we get a pretty neat menu of all of the current blocks. We can see our currently selected block, and select the focus for another block in the menu, or just get an overview of the blocks.
We get child block views available as well scoped to this particular block.
On first glance the menu seems very humble, straightforward, and helpful. The reality is that as the future of WordPress evolves, this block navigation will most likely evolve into a central way of interacting within WordPress.
There is an entire scheduled post on this.
That wraps up the left part of the header. The left part of the header is more content focused. The section to the right is more control and document focused.
Right side of Header
We won’t dive into this too much now, but you can save your post, preview it or save a draft from this area. You can close the sidebar as well by clicking on the gear icon. The sidebar is referred to in this case as Settings. Next to that is another hidden gem the “Show more tools & options menu”. We will look in more depth on this in a follow up post.
The sidebar, or Settings area of the editor is another cool part. At the top of the sidebar we have tabs: Document and Block. This allows us to separate different controls into different areas within the sidebar. The document controls, are mainly the features we have grown accustomed to in WordPress like: Visibility, Permalink, Categories, Tags, Taxonomies, Featured Image, and excerpt.
Some of the areas that were meta boxes below the post content are now present in this document tab. If you don’t see something you are used to seeing, it has most likely been snuck into the document tab.
As we saw in earlier posts, depending on what block is selected, we will also get contextual controls for each block presented in the sidebar. This is one of the primary areas ripe for exploring extensibility of the editor interface.
The content area is maybe the most important part, but honestly all three parts synergize together. One is not as complete without the others. We will not be talking about the content area for now. This is mainly to outline it is one of the three key parts to the new editor interface.
This should give you a more clear picture of Gutenberg, and outline some of the more hidden gems of the experience. The editor will evolve, but I have a sense that the general UI will be the foundation for years to come. As always, stay tuned for the next post and drop any comments in the comment box.