WordPress updates haven’t made any major changes in the past, and the visual editor has pretty much stayed the same.

But change is inevitable and the platform has now decided to completely transform the editing experience for content creators.

Other platforms like Ghost and Medium already provide a refreshing, unique writing experience, and it’s about time WordPress caught up. But not everyone is happy about this new Gutenberg editor in the WordPress 5.0 update.

Most of the concerns seem to stem from the unknown, and that’s why I’m going to address some of those issues in this article.

So, we’ll start at the beginning and discover what exactly Gutenberg is, its pros and cons, as well as how you can make the transition from the current editor and use the new one effectively.

What is Gutenberg?

Gutenberg, named after the German inventor who came up with the printing press over 500 years ago, is an innovative take on the text editor for WordPress.

It’s designed to make adding rich content on the platform simpler and easier, for both new users and for developers.

There are a lot of contributors and volunteers who have been working on this block-based editor over the past year, and now that it has been released, they have a goal to continue to make this new editor easier and more enjoyable to use.

With the WordPress 5.0 update released on December 6th, Gutenberg is the new default text editor.

But the good news is that if you want to keep using the old one, you can. All you have to do is install the ‘Classic Editor’ plugin on your site, and you will be able to continue using the current TinyMCE editor.

Gutenberg has a completely different approach to the creation of content, as you’ve probably deduced from its description as a ‘block’ editor (we’ll get into what blocks are in a minute).

While its focus at this stage is on content creation, the goal is to eventually have this editor going beyond posts, and into page templates and also full site customization.

This means that in the future you will be able to build entire sites using these blocks. This includes landing pages and all other important content on your site.

How Gutenberg Works

The current WordPress visual editor calls for heavy use of short-codes and HTML in order to make things work, and with the new block-based editor, it’s going to take a lot less effort to achieve all the same things.

The ‘little blocks’ are very easy to work with, and as time goes by, more advanced layout options will be introduced onto the platform.

Let’s explore Gutenberg right now to see how everything works so you can learn how to use the blocks and the editor’s other features to create content and build layouts on your WordPress site.

OK, so earlier I said we’d get into what blocks are, so now we’re going to look at that.

What is a Block?

A block is anything that you use on the editor to build your content. For instance, you can have a block for paragraphs of regular text, images, video embeds, buttons, widgets, or tables.

So instead of the single edit field that the TinyMCE WordPress editor uses, you now have a lot of individual blocks in the Gutenberg editor which allow you to build more complex designs than you would have been able to in the Classic editor.

One of the great things about this new update is that now developers will be able to build their own third party blocks that anyone can access through the plugins to give even more flexibility to the WordPress platform.

Each of the blocks in the editor is its own entity, and you can manipulate it on an individual basis, and you can easily rearrange them by dragging and dropping each one where you want it on the page.

And since each block stands on its own, you can also add stuff like custom backgrounds for specific blocks.

This allows content creators a whole lot of flexibility and more in-depth control than the previous editor did.

So, while Gutenberg (in its current form) can’t actually be considered a page builder, it’s still going to make it a lot simpler and easier to style standard pages and blog posts.

But now that we know what Gutenberg is, and what it can do, it’s time to take a look at its shortcomings.

What Gutenberg is Lacking

There are two essential things that are lacking from the new editor.

One of them is flexible columns, and the other is true drag-and-drop.

But, as previously stated, there is a massive team of developers who are constantly working on improving this new editor, and for all we know, they’ve already started working on creating a more advanced column block and a free-form drag-and-drop…

Having said that, this new editor is set to remove the need for page-builders for most content as well as to create a unified method for putting together more complex posts in WordPress.

But, for building landing pages and other complex pages on your site, you’ll still need to rely on page builders that offer more flexibility including things like:

• Free-form drag and drop
• True multi-column support that you can use to create whatever number of columns you want and be able to drag any individual columns into it
• Page builders also come with lots of pre-made templates which is also very convenient, particularly for new users
• An advanced set of styling options where you can also add custom margins, padding, and more
• Design settings that are responsive

Gutenberg might get there one day, but for now, you will still need to use it in conjunction with your page builder if you want the flexibility to design and create more complex standalone pages.

Some Frequently Asked Questions About Gutenberg:

Q – Does everyone have to use the new editor?

A – No. If your site has already been updated to the new version, and want to carry on using the previous WordPress editor, all you have to do is to deactivate the Gutenberg editor and return your website to the classic editor using the official plugin called ‘Classic Editor’.

Q – Does Gutenberg require the use of a special theme?

A – The Gutenberg editor is designed to work with any WordPress theme. But, there are some real benefits to choosing a theme that specifically offers compatibility with Gutenberg.

Themes can offer you built-in styling for blocks, and some of them can load the styles in the editor, which means you’ll be able to get a better WYSIWYG (what you see is what you get) editing experience as you build your content.

With Gutenberg themes, you’ll also get pre-made templates made up of various blocks where you only have to paste your content into the blocks and hit the publish button.

So while you can use any WordPress theme you want, it’s worth taking the time to check if your theme developer plans to add support.

Some of the themes that have Gutenberg support include:

• Neve Theme
• Ohana Theme
• Atomic Blocks Theme

How To Add New Blocks In The Gutenberg Editor

Once inside the Gutenberg editor, you’ll find that everything is pretty self-explanatory and easy to use.

To build layouts on your page with the new editor, you have to use separate blocks. To add a new block, simply click on the +Plus icon and then select what type of content you want to add.

You’ll see a list of the blocks that are most commonly used at the top, and if you scroll down, you will see different sections for Formatting, Layout Elements, Embeds, and Widgets:

• Inline Elements: This contains only one block for inline images.

• Common Blocks: This contains the basic building blocks for a page, such as paragraphs, images, headings, quotes, and so on.

• Formatting: This lets you add formatted content like tables, pull quotes, and the classic text editor.

• Layout Elements: This lets you divide your text into two columns or include separators, buttons or the ‘More’ tag.

• Widgets: This allows you to add short-codes, categories, or latest posts. You can even display the sidebar widgets directly in Gutenberg.

• Embeds: These help you to embed various types of content from external sources including Facebook, Twitter, YouTube, and Instagram.

Say for instance you’re building a layout for a blog post that includes an image, a quote, and a YouTube video in addition to the regular text.

The way to do it in Gutenberg would be to write your post in the editor, or if you prefer to paste it in from Google Docs or Word, you can do so and the editor will automatically convert the text to blocks.

Now, to add the non-text blocks, simply hover over the spot where you want to insert an image and then click the ‘+’ icon. This will create a break, and you can now click the icon again and insert the image block.

You can then upload or choose images in a way that is similar to how the old editor works.

After selecting an image, you will see it in the page layout.

Next, you can hover over the space where you want to insert the pull quote, and then use the exact same approach to insert the next block. After your quote block is inserted, all you have to do is to click on it and type your quote.

Adding a YouTube video to your post is easy.

You do this by adding a YouTube block from the tab labeled ‘Embeds’. Click on the block, and then enter the video URL and click Embed.

And that’s it!

With just a few clicks of the mouse, you now have a very nice post that would have taken a lot more time and work to produce in the classic editor.

If you want to get creative, you can try creating different columns in your content.

This entirely optional, experimental feature allows you to create multiple columns quickly and easily. All you have to do is to add the block for columns from the Layout Elements, and then you can proceed to add other blocks inside the column.

Once you’re done with your post, simply hit publish, and you’re good to go.

You will have your perfectly formatted blog post at the front end.

Customizing Individual Blocks

Gutenberg includes many different blocks, and it’s beyond the scope of this post to show you how to customize each one individually.

But, below is a basic framework which applies to all the blocks.

You basically control your content from the body of the editor:

• Basic Alignment and Styling: Use the menu that appears whenever you hover over the block

• Advanced Styling: Use Block settings tab. Access it by selecting the block being edited, and then navigate to the ‘Block’ tab

• Re-arranging Individual Blocks: Either use the Up and Down arrows which appear when you hover over a specific block, or drag and drop the block where you want it to be by hovering over the block, and then using the six dots which appear between the directional arrows.

The Gutenberg Editor: Putting everything together

While transitioning from the Classic WordPress Editor to the Gutenberg Block Editor may sound like a lot of work, the truth is that when you get started using the new editor, you’ll find that it’s quite intuitive, and makes the entire process of change fairly painless.

You’ll be able to pick up how everything works very quickly, even if you don’t have much experience with WordPress.

While some may find it a bit annoying to have to re-learn all the basic actions that they have come to take for granted, it’s going to be well worth the effort when you’re able to create unique, stunning, and complex pages at the click of a button and without having to use tons of short-codes.

So get started using your new editor right now to experience a much smoother writing and editing experience.

Feel free to post your comment below.  An email address is required but it will not be shared with anyone, put on any list, or used for any kind of marketing, just to alert you if there are any replies. Thanks and happy hunting!

PlanetBizOp.com

->Steven

Updated: Originally published December 20th 2018