Depending on how plugged in you are to the WordPress community, you may or may not already be familiar with the upcoming WordPress Gutenberg editor. The Gutenberg editor has stirred up all kinds of discussion on both sides of the aisle. But this post is not trying to weigh in on that debate…

Instead, this post recognizes the inevitability of Gutenberg and aims to provide you with a comprehensive resource on how to use the WordPress Gutenberg editor on your site so that you can continue to churn out awesome content when Gutenberg goes public.

Whether this is the first time you’re hearing about the WordPress Gutenberg editor or you’re already somewhat familiar with it, this post will help you learn how you can use the new editor to build layouts for your WordPress content.

WordPress Gutenberg guide

What is Gutenberg?

In a nutshell, Gutenberg is the upcoming replacement to the WordPress TinyMCE editor (the current WYSIWYG text editor where you write your posts and pages).

#WordPress #Gutenberg guide: How to build your next site with the revolutionary editor
Click To Tweet

As a quick refresher, here’s what the WordPress TinyMCE editor looks like:

original wordpress tinymce editor

And here’s what things look like in the new WordPress Gutenberg editor:

new wordpress gutenberg editor

It’s more than an aesthetic update, though. Gutenberg is going to completely change the editing experience by moving to a block-based approach to content (more on exactly what blocks are in a second!).

While the current focus is on content creation, the eventual goal is to have Gutenberg “go beyond the post into page templates and ultimately, full site customization.”

That means eventually you’ll be able to build your whole site using Gutenberg, including landing pages and other important content.

When will Gutenberg be a part of WordPress?

Gutenberg will not officially become a part of the WordPress core until the next major release – WordPress 5.0.

When will WordPress 5.0 come out? Well – we don’t know an exact date yet, but it’s scheduled for…sometime in 2018.

That’s pretty vague – but it also means that the core team is hopefully going to wait to get things right before pushing Gutenberg out as the default WordPress editor.

With that being said, you can still install and use the WordPress Gutenberg editor right now via a plugin.

Because Gutenberg is still in beta, we don’t recommend that you do this on a live site, though.


How the WordPress Gutenberg editor works

A second ago, I told you that Gutenberg is a block-based editor. It was kind of rude to leave you hanging because, if you’re like most people, you might not know what that means.

So here’s block-based editing 101:

Essentially, Gutenberg replaces the single edit field of the current WordPress TinyMCE editor with lots of individual “blocks”.

These blocks then allow you to build more complex designs than those allowed in the current WordPress editor.

So what’s a block?

Well, a block can be pretty much anything. For example, you can have blocks for:

  • Regular text
  • Images
  • Video embeds
  • Buttons
  • Widgets (yes, those same widgets you use in your sidebar)
  • Tables
  • Etc.

And what’s neat is that developers will be able to create their own third-party blocks that you can access via plugins for even more flexibility.

Each block is its own entity that you can manipulate on an individual basis. For example, here’s a quick Gutenberg post that contains two blocks:

  • Text
  • Image

Watch how easily I can rearrange those two blocks just by clicking a button:

gutengberg blocks

And because each block is “separate”, you can also add things like custom backgrounds just for specific blocks.

In general, it gives you more flexibility and in-depth control.

So Gutenberg is a page builder then, right?

Ehh, not quite. At least not in its current form.

Gutenberg is going to make it a lot easier to style regular content like blog posts or standard pages, but it’s not a 1:1 substitute for page builders in its current form.

Just on a surface level, Gutenberg already lacks two essential things:

  • Columns
  • Drag and drop

With that being said, Gutenberg is poised to eliminate the need for page builders for most “standard” content, and it also creates a single unified method for creating more complex post layouts in WordPress.

But when it comes to building more complex pages, like a landing page, you’re probably going to appreciate the greater flexibility offered by page builders (at least during Gutenberg’s initial release).

For example, in our comparison between Elementor vs Divi Builder vs Beaver Builder, you can see how the top page builders offer things like:

  • Drag and drop editing
  • True multi-column support where you can create any number of columns to drag individual elements into
  • Tons of premade templates
  • Advanced styling options, with spots for custom margins/padding and lots more
  • Responsive design settings

Gutenberg might get there someday – for example, multi-column support is a real possibility in the future. But at least in its initial release form, page builders will still give you the flexibility to design more complicated standalone pages.

How to install Gutenberg on your site

Ready to see how Gutenberg works?

Like I said, Gutenberg will replace the default WordPress editor in WordPress 5.0. But for now, your only option to play around with it is to install the Gutenberg plugin.

Remember, though – Gutenberg is still in beta, so we definitely do not recommend that you install it on a live website.

Here’s how to install the Gutenberg plugin … though, it’s a fairly standard process:

  • Go to Plugins → Add New
  • Search for “Gutenberg”
  • Click Install Now
  • Wait for the Install Now button to change to Activate
  • Click Activate

Once you activate the plugin, your site will automatically use the Gutenberg editor when you go to Posts → Add New:


gutenberg editor


Use a Gutenberg theme for the best results

While Gutenberg is designed to work with any WordPress theme (just like the WordPress editor), choosing a theme that specifically offers Gutenberg compatibility will offer some very real benefits.

First, themes can offer built-in styling for the Gutenberg blocks. Better yet, themes can actually load these styles inside the editor. That means you can see the real styling for your blocks as you build your content for a better WYSIWYG experience (see a basic version of this in action here)

Gutenberg themes will also be able to offer pre-made templates comprised of various blocks so that all you need to do is plug your content into the existing blocks and hit Publish.

Because Gutenberg is still in beta, not many themes currently offer support. If you’re itching to try it out, you can install this theme from Tammie Lister on your test site. Otherwise, check back as we’ll update this section when themes start offering Gutenberg compatibility.

Building your first layout with the WordPress Gutenberg editor

Ok – now that you have Gutenberg installed, let’s dig into the meat of this article. Below, I’ll show you how to actually use the new WordPress Gutenberg editor to build a complete page layout.

That way, you’ll be ready to hit the ground running when WordPress 5.0 drops.

A quick tour of the Gutenberg interface

Before you start adding some blocks, let’s go over a quick run-down of the elements of the main Gutenberg interface:


wordpress gutenberg editor interface explained

  • (A) – lets you add new blocks.
  • (B) – undo/redo buttons
  • (C) – gives you access to document settings, covering things like categories & tags, featured images, etc. This is similar to the current sidebar in the WordPress editor
  • (D) – when you have an individual block selected, this gives you access to settings that are specific to that block
  • (E) – lets you access a live preview of your post or publish/update your post
  • (F) – once you add some blocks, this is where you’ll actually work with your post’s content

Adding blocks to Gutenberg

As I discussed in the intro, you’ll use separate “blocks” to build your layouts with Gutenberg.

To add a new block, all you need to do is click the +Plus icon and select the type of content you want to add:
adding a new block
In the example above, I showed you how to add a basic paragraph block. But Gutenberg actually includes a ton of different blocks, divided into different sections:
types of blocks
The Recent and Saved sections are unique to you and help you quickly access blocks that are relevant to your site. To access all the blocks, though, you’ll use the Blocks and Embeds tabs.

In the Blocks tab, you have:

  • Common Blocks – contains basic building blocks like images, paragraphs (regular text), headings, quotes, etc.
  • Formatting – let you add more formatted content like pull quotes, tables, or the classic WordPress text editor
  • Layout Blocks – let you split text into two columns, include buttons, separators, or the “More” tag
  • Widgets – let you add shortcodes, latest posts, or categories. It’s even possible to display sidebar widgets right in Gutenberg.

In the Embeds tab, you can embed content from tons of external sources including, in part:

  • YouTube
  • Facebook
  • Twitter
  • Instagram

Building a basic layout with Gutenberg

Let’s start off simple. Say you just want to build a basic blog post layout that includes:

  • Regular text
  • An image
  • A pull quote
  • An embedded YouTube video

Here’s how you’d do it with Gutenberg.

First, you’d write your entire post in the editor. Or, if you’re like me and prefer to write in Google Docs, you can paste it all in and then:

  • Hover over the paragraph block
  • Click on the three dots
  • Choose Convert to blocks
convert to blocks

Adding the non-text blocks

Now that your content is split into blocks, you can hover over the spot where you want to insert your first image and click the plus icon:

image block
This will allow you to insert an image block, from which you can upload or select images in a similar manner to the current WordPress editor:
insert image
Once you select your image, you should see it right there in your page layout:
inline image
Next, hover over the spot where you want to insert the pull quote and insert another block. You can either search for “pull quote” or go to the Blocks tab:
insert quote
Then, you’ll see your new pull quote block. To create your quote, all you need to do is click into the block and type:
enter quote
Finally, to insert the YouTube video, you can add a new YouTube block from the Embeds tab. To insert a video, all you need to do is enter the URL and click Embed:
youtube block
Now, all you need to do is click the Publish button:
publish post
And you’ll have your formatted blog post on the front-end.

How to customize individual Gutenberg blocks

Because the WordPress Gutenberg editor includes a ton of different blocks, I can’t show you how to use each individual block.

But I can give you a basic framework that applies to all blocks.

Basically, you control the content in the actual body of the editor:
editing a block
For basic text styling and alignment, you can use the menu bar that appears when you hover over a block:
styling a block
And for more advanced styling, you’ll usually style the block in the Block settings tab.

To access that tab, select the block you want to edit and browse to the Block tab:

customizing a block

How to rearrange individual Gutenberg blocks

To rearrange blocks, all you need to do is click the Up or Down arrow when hovering over a block to move the block in that respective direction:

rearranging blocks

Putting it all together

Once you pick up the flow of how things work with Gutenberg, it’s fairly painless and intuitive.

At first, you might experience some growing pains and struggle to perform basic actions that you’ve taken for granted.

But once you get the hang of things – you should be cruising through building layouts. And with the more advanced blocks that Gutenberg comes with, you’ll have more flexibility than the TinyMCE WordPress Editor.

Some neat, but more advanced, Gutenberg tricks

As you become more acquainted with the WordPress Gutenberg editor, you might find some of these tricks to be time-savers.


Quick-create a new block with typing

Above, I showed you how to create blocks using the insert button. But to save time, you can actually create blocks by simply typing this syntax:


An auto suggest box will appear to help you find the relevant block.

For example, here’s how to create an image block with just your keyboard:

Pretty convenient and a big time-saver!

block shortcut

Edit source code directly

At any point, you can edit the source code for your entire post by clicking on the three dots in the top-right and selecting Code Editor:

editing code in gutenberg

Gutenberg is the future

While Gutenberg has its detractors, it’s still coming in WordPress 5.0.

For most casual users, it will, after some growing pains, bring a more flexible content creation experience.

Non-developers will be able to intuitively craft more complex layouts with extra elements like buttons, content embeds, and lots more. And that will, hopefully, help WordPress to continue to grow.

Until WordPress 5.0 ships, you can play around with the WordPress Gutenberg editor by installing the plugin. And if you’d like to keep on top of the latest Gutenberg updates, you can follow along with the #gutenberg tag at Make WordPress Core.

Now, we’d love to hear from you. I’m sure many of you have strong thoughts on Gutenberg – so let us know about it in the comments!

#WordPress #Gutenberg guide: How to build your next site with the revolutionary editor
Click To Tweet

Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:


The post WordPress Gutenberg Guide: How to Build Your Next Site With the Revolutionary Editor appeared first on CodeinWP Blog.

Powered by WPeMatico

WordPress Gutenberg Guide: How to Build Your Next Site With the Revolutionary Editor
Tagged on:         
%d bloggers like this: