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:

Gutenberg Editor Blocks - Text
Gutenberg Editor Blocks – Text
Gutenberg Editor Blocks - Widgets
Gutenberg Editor Blocks – Widgets
Gutenberg Editor Blocks - Media
Gutenberg Editor Blocks – Media
Gutenberg Editor Blocks - Enbeds Part One
Gutenberg Editor Blocks – Enbeds Part One
Gutenberg Editor Blocks - Design
Gutenberg Editor Blocks – Design
Gutenberg Editor Blocks - Embeds Part Two
Gutenberg Editor Blocks – Embeds Part Two

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.

Gutenberg Editor Internal Block Settings

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.

Gutenberg Editor External Block Settings
 
 
 
Gutenberg Editor Menu

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.)

Special Plugin - Advanced Editor Tools

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.

Gutenberg Editor Post Settings

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.

Divi Image Setting - filters
Divi Image Setting - box shadow
Divi Image Setting - sizing
Divi Image Setting - animation

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.

Gutenberg Editor Image Settings

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:

Gutenberg Post Before Tweaks - Example One

Gutenberg Post Before Tweaks - Example Two

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.

Gutenberg Editor Advanced CSS Classes Setting
OLYMPUS DIGITAL CAMERA

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

Example of CSS for Gutenberg Editor article

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!