Introduction
In this article I will cover some of the basics concerning the Gutenberg Editor that was introduced in the 5.0 version of WordPress. For right now it is possible to still use the old classic editor but I have read this will only be supported until the end of 2021. Therefore, it is important to become familiar with the features of the new editor. I will create this entire page using only the Gutenberg Editor.
Here are the details
The Gutenberg Editor is based on blocks. These are added to your page and you then fill the blocks with content. There are five basic types of blocks:
- Text
- Media
- Design
- Widgets
- Embeds
I will show examples of these block types below:
When you are working on a block there are options you can choose within the block to change the settings in that block as shown in the accompanying screenshot.
If you are working on a block there is also a block menu on the far right of the screen. In this menu you can access an additional list of settings to modify the current block.
As shown in the previous image, when I am typing text I have a full menu of options. This is because I am using the plugin shown in the next image to enhance the Gutenberg Editor experience. ( I was using the classic paragraph that I later converted to blocks so I could add CSS.)
On the far right of the screen you can also choose the post menu that will list a number of settings that will apply to the entire post instead of just the current block.
Tweaking Your Page
Using the Gutenberg Editor. actually tweaking your page after it is created is a little more difficult than it would be with Divi. In Divi, each module includes a wide range of settings and they are all at your fingertips. Many of the adjustments can be made with sliders. I will show a few of the settings here for the image module in Divi.
By comparison, the Gutenberg Editor has just a few settings on the far right of the screen for the image block. You can see this pales by comparison to the host of features included in Divi.
When you have completed the configuration of your page using the built-in Gutenberg Editor features you have a very basic page with no real features. I will include some screenshots below of how this page appeared before I applied the tweaks:
To update the various objects on the page with my desired settings I used the “Additional CSS Class(es)” feature in the advanced section. By adding a CSS class such as “gutenberg-image” to all images I can then specify the settings for all images on the page at the same time.
Once you have all the CSS classes defined you need to specify how you want all the objects handled in your CSS file. I am including here a sample of how this might appear.
When viewing the CSS file it is better to use an editor that will provide syntax highlighting so you can more easily see the syntax elements. Here are some examples of editors you might want to use that work on Windows, MacOS, and Linux:
- Sublime Text
- jEdit
- Atom
Conclusion
I found using the Gutenberg Editor to be very challenging as compared with the Divi page builder. This is perhaps how Divi worked when the developers first started coding it and they had created the basic skeleton. Everything took five times longer and it required some knowledge of CSS and HTML. For instance, in sections where I had three paragraphs and an unnumbered list and I wanted them to all be treated as one CSS item, the Gutenberg Editor freaked out. In order to make it work, I had to type it manually in HTML. As for me, I will continue to use Divi for all my work as it saves a large amount of time and time is money!