Previously on ThemeMove’s blog, we have made the acquaintance of the new WordPress editor – the Gutenberg. We have learned about its origin, outstanding features, and prospects. There’s a possibility that some of you might still be confused about how Gutenberg works as an editor. As its name implies, Gutenberg is a block-based content editor; so in order to obtain more insights into it, we need to get ourselves familiar with those blocks first. That’s why we write this article to help you get a closer look at Gutenberg’s blocks.
Before looking into Gutenberg blocks, let’s revise a bit information about this recently famous tool. For people who missed our last introduction about Gutenberg, you can read a short intro here. If your curiosity hasn’t faded away, you can read a detailed description from Gutenberg’s team official page on wordpress.org, visit here. Rumor has it that WordPress developers will put Gutenberg into WordPress core in its version 5.0, so all WordPress should have been prepared for that since last year, when this news was heard. Gutenberg now is still a plugin on WordPress repository with over 500,000 active installations. But soon, it might not remain a choice but a compulsory thing.
By definition, a block is a solid piece that is attributed as a unit for a page. A normal webpage contains all kinds of content elements. Now, you just need to imagine that these elements are refined into a separate box. Like when you are playing the puzzle, you use those blocks one by one to form a page. Below is an example of a post created on Gutenberg editor. You can see that’s everything looks highly straightforward & neat: Example Post
Types of Blocks
Currently, Gutenberg provides users with about 16 blocks of different kinds for content creation. You can see in the following picture a list of these blocks: Paragraph, Heading, Subheading, Quote, Image, Gallery, Cover Image, etc. All these blocks are the most essential elements to a page / post on WordPress. When you install Gutenberg on your site, you’ll always have access to these blocks. Some Gutenberg themes offer more blocks with predefined layouts, backgrounds or setting options. This helps reduce the time one need to spend for creating an element box compared to the traditional page builders.
If this description cannot make you satisfied, they have a live demo for you to start experiencing the power of Gutenberg editing here at https://wordpress.org/gutenberg/. You can freely edit the page to your own wish, upload your own picture, type in anything you like and set up the options for each blocks. You don’t have to download and install the actual Gutenberg plugin. This is such a direct way to experience Gutenberg editor and its customizability. To create a heading, just click on “+” button then choose a type of block that you want.
Click in where you want to start and enter your own text. You’ll see, creating and revising can be conducted at the same time. It’s just too convenient. The page still loads very quickly and responds almost immediately as you type. Even the front end editor of drag and drop builders sometimes might have problems loading preview or displaying the edited content as you proceed on page building. With Gutenberg, you can totally reset assured.
There are so many benefits that users can enjoy from this branding new editing tool. First, it is the reduction of plugins needed in order to create a web-page. Even when your intention is to put numerous heavy media files on your page, it won’t affect the workflow much. Fewer external plugins mean higher responsiveness and faster page loading. The final result will look exactly like how it looks in the building process. Moreover, you can trust that Gutenberg-based pages / posts can adapt well to all kinds of browsers and device resolutions. Hence, SEO efficiency will definitely improve, too.
To customize the settings of a block, users just have to click on the chosen block, a group of valid button will appear for them to select the next action. When clicking on the last button of that group, more choices will reveal.
Still can’t find what you need? Follow this picture to find the customize menu. Often, there are two tabs: “Document” and “Block” will appear at the right side bar of the editor screen.
On Document: you can find all the familiar options as in traditional editors for Visibility, Featured Image, Excerpt, and Discussion of the post.
On Block: Users can customize the Paragraph, Text Settings, Color Settings and Advanced options.
Gutenberg’s Editing Screen
Right next to the customize button, which looks like a bunch of three vertical dots, is another button for the editor screen. From there you can select the options for Writing, Editor and Tools.
Writing: Turn on Unified Toolbar, Spotlight Mode or Full-screen Mode by putting a tick next to the selection.
Editor: Switch between Visual Editor & Code Editor by ticking or use “Ctrl + Alt + Shift + M” to quickly change between two modes. Then experienced developers with their profound coding knowledge could still edit page in their favorite language.
Some might question about how to arrange these blocks and create a desired layout for their page, well, the answer is in the following picture. Users can drag then drop each block to the new position or use the up and down button. Either way could save them a lot of time and effort put into building the layout. They will have more time and energy to focus on the content.
It’s safe to say that Gutenberg still has a long way to go in order to compete against other page builders in the marketplace. However, we can’t deny that this block-based editor also has so many strengths and distinctive features to make its own way through the success. Unlike other complicated and heavy-loaded editor, Gutenberg’s lightweight and concentrated features have convinced many WordPress users of its usability and simplicity.