WordPress: the Gutenberg Times

WordPress started out as a blogging tool, but ended up doing so much more. You can even build an online store via its WooCommerce plugin. With WordPress you can build websites even for free. This explains why WordPress ended up powering 43% of the websites with a known CMS. 

In recent years, the community felt WordPress needed a change. Lots of other website building tools were showing up in the market. Some of them are sleek, intuitive, and offer a great user experience. WordPress had to adapt to the new reality. So, Gutenberg entered the scene.

The Gutenberg WordPress experience was launched back in 2018. It wasn’t too well received by the community. Since then, with every new release, the experience has improved, and Gutenberg managed to move beyond an MVP. 

Now, let’s see how the Gutenberg Editor grew, and how the future looks like for WordPress.

We’ll be talking about:

• The Default WordPress Editor (aka Block Editor aka Gutenberg Editor),
• Working with Gutenberg blocks,
• Page Builders in the Gutenberg era,
• What’s next for WordPress?

Let’s hit the road!

The Default WordPress Editor

Now, lots of websites are still using the Classic Editor. Websites can still use it by installing the Classic Editor WordPress plugin.

The WordPress Classic Editor is pretty raw and behaves like a simple text editor. It can be easily used to write posts, in a design controlled by the overall chosen theme. You can’t use it to design a page. For this, you would need to work in the WordPress Customizer. The Customizer’s look and features would differ from theme to theme, and it would allow you to make all sorts of styling changes, with no code. 

Now, in the WordPress world you also have page builders. They enhance the features of the Customizer, taking it to a whole new level. They go beyond the themes’ options. Most of them also work by drag and drop.

Here’s how the Customizer looks like using the Colibri page builder, for example:

The Gutenberg Editor, on the other hand, relies on content types called blocks. This is why it is also called the Block Editor. The blocks cover different functions on a web page, from paragraphs and headings to tables and galleries. Every type of content goes inside a block, and can be stylized separately. 

When inside a page or post, whenever you click on a “+” sign a block inserter will open up containing the default Gutenberg blocks. 

The community is also building third-party blocks, enriching the current options. You can take a look at Atomic Blocks or Extendify. This means that you won’t be locked inside the default blocks, you can always add some more.

Working with Gutenberg blocks

Let’s say you want to add the buttons block.

When selecting the block from the canvas, you will notice a block editing panel on the right hand side. It allows you to change the style of the buttons, their size, color, border, and typography. 

Now, these options are pretty basic. They aren’t quite what you would need to create a more complex website. This is why you would need a plugin to level up the block editor, such as Kadence.

But there’s also a better solution: using a block based page builder. 

Block-based page builders

In the classic era, page builders like Colibri or Elementor would allow you to create a website by drag and drop.

In the Gutenberg era, when everything is block based, the customizer will slowly fade away, and the importance of non full site themes will diminish. 

This is why block-based page builders are now the future. They can put the Default Editor on steroids. Take Kubio WordPress builder for example.

I showed you before how you can add a buttons block and then style it using the block editing panel. Kubio has its own blocks that you can easily customize, way beyond the possibilities of the Default Editor. The Kubio blocks have a blue-green tint, while the default ones are black. They lie one next to the other inside the block inserter.

Let’s drag the buttons block onto a page.

Here’s how the block editing panel looks like:

It has three layers: Content, Style, and Advanced.

You can add more buttons to this block at the “Content” level. The buttons block can be edited like a whole section entirely, and then, when you select a button inside of it, you can style it separately.

Let’s select the button and take a look at the styling options:

Content level

Here we have two main editing categories:

• Button properties. Here you can type your text, but you can also do it live, directly on the canvas. You can make your text bold, or italic, and add a link to it. You can also make size adjustments to the button. 
• Button group. Here you can create more buttons inside a group. You can set up the distance between buttons, as well as their alignment.

Author

Alina Belascu. Alina is in charge of the marketing activities inside Colibri and Kubio.