How To Use The WordPress Gutenberg Editor – A Complete Guide For Saviours

By WP Saviour •  Updated: 03/04/21 •  10 min read

On this publish, I’ll introduce you to what the Gutenberg editor is, provide you with a quick have a look at explaining the way it works. I may also inform you when you may anticipate to see the brand new editor, and share just a few different minor related particulars.

The best way that you just write your weblog posts in WordPress will drastically change (although it is possible for you to to put in a plugin to maintain utilizing the present editor, if desired).

It’s that will help you prepare for the change that I’ve penned down this publish on How To Use The WordPress Gutenberg Editor.

It’s a full redesigned enhancing expertise.

I’ll present you precisely how you should use the brand new editor to put in writing a weblog publish so that you’re prepared for the transition to WordPress Gutenberg.

Gutenberg is a totally redesigned editor aimed toward changing the present TinyMCE editor that WordPress has used for, properly, just about ceaselessly.

Gutenberg’s aim is to make it simpler and extra accessible for informal customers to create distinctive content material buildings by utilizing blocks (I’ll clarify this in a second).

Or, within the phrases of Matt Mullenweg, co-founder of WordPress:

The editor will endeavour to create a brand new web page and publish constructing expertise that makes writing wealthy posts easy, and has “blocks” to make it straightforward what as we speak may take shortcodes, customized HTML, or “thriller meat” embed discovery.

In case you’re not aware of what I’m speaking about after I say TinyMCE editor, that is what the present WordPress TinyMCE editor seems to be like:

gutenberg-editor-1-3804295

In distinction, right here’s what the brand new WordPress Gutenberg editor seems to be like:

the-wordpress-gutenberg-editor-2645839

However aside from the brand new interface styling, the true change that Gutenberg will carry is in that block-based enhancing strategy.

Additionally see:

How Does The WordPress Gutenberg Editor Work?

Should you’re utilizing WordPress, I’m certain you’re aware of how the present editor works – you’ve got a single field the place you write your textual content, add your photos, embed movies, and so forth.

Gutenberg adjustments that by letting you write your posts utilizing a number of “blocks”.

A “block” will be just about something. For instance, these rely as a block:

Right here’s an instance of how the totally different blocks work. Within the GIF under, you may see that I’ve added 4 totally different blocks:

what-is-the-wordpress-gutenberg-editor-3-5391627

And since every block is a separate entity, you can even simply apply a colour background to only a single block:

what-is-the-wordpress-gutenberg-editor-4-7760142

However right here’s the actually cool half about blocks:

Builders will have the ability to write their very own blocks as properly, which paves approach for the elimination of issues like shortcodes and embed codes.

For instance, reasonably than needing to insert a shortcode so as to add a gallery to your publish, you’ll finally simply have the ability to use a “gallery block” to insert your gallery and see a reside preview within the editor itself.

In a nutshell, the brand new WordPress Gutenberg editor sits someplace in between the present TinyMCE editor and extra highly effective web page builders.

With it, you’ll have the ability to construct extra engaging pages with no need to know any code. And that ought to unlock a ton of useful new functionalities in your weblog!

An Introduction To The WordPress Gutenberg Editor Interface

If you first go to create a brand new publish or web page with Gutenberg, right here’s what you’ll see:

how-to-use-wordpress-gutenberg-editor-2497730

It’s considerably much like the present WordPress TinyMCE editor, however the largest distinction to you’d be the absence of the only textual content field for you which ones you presently use to put in writing and format all of your content material.

As a substitute, you should have one huge white space that begins with ‘Write your story’. Should you learn my publish on what the WordPress Gutenberg editor is, you’ll know that’s as a result of Gutenberg makes use of “blocks” that will help you create your content material, reasonably than a single textual content enter space.

For extra info on what blocks are, I like to recommend that you just learn my publish above. However as a fast refresher, a block can principally be something. It may be:

Third-party builders may also have the ability to code their very own blocks so as to add extra performance. You’ll be able to already see an instance of this with the BlocksWP Social Share Block.

How To Use The Gutenberg Editor Interface

Listed below are what the assorted areas of the Gutenberg interface allow you to do:

how-to-use-wordpress-gutenberg-editor-2-9996972

  1. Click on this button so as to add a brand new block.
  2. Undo/redo buttons allow you to transfer ahead or backward to edit simply, identical to Microsoft Phrase.
  3. This settings space contains lots of the similar choices as the present WordPress editor sidebar. It’s the place you add classes/tags, set the featured picture, select the publishing date and so forth.
  4. When you choose a person block, this settings space contains settings which can be particular to that block. It’s the place you may select colours, types, and different vital block-specific particulars.
  5. These two buttons allow you to preview or publish your publish.

Should you click on on the +Plus button to insert a block, it is going to open a window that permits you to browse all obtainable blocks that you should use in your content material:

how-to-use-wordpress-gutenberg-editor-2-1-6805997

The Latest and Saved tabs help you entry blocks that you just steadily use, whereas the Blocks and Embeds tabs allow you to browse all obtainable blocks.

You too can use the search field to rapidly discover a particular block by typing within the block’s identify.

How To Write A Weblog Submit Utilizing The Gutenberg Editor

Now that you know the way the interface works, properly, to an extent, I’ll present you how one can truly use Gutenberg to put in writing a weblog publish in your website.

For instance, let’s say that you just need to write a weblog publish that features:

Beforehand, you may’ve wanted some separate plugins or customized CSS to deal with making a desk and CTA button – however now you are able to do all the things with Gutenberg.

Step 1: Write your textual content utilizing paragraph blocks

To jot down the textual content of your weblog publish, Gutenberg doesn’t require you to truly add a brand new block. As a substitute, you may simply click on on the web page and begin writing like this:

how-to-use-wordpress-gutenberg-editor-3-7989331

Fairly straightforward up to now, proper?

All you do is sort. And everytime you hit enter to begin a brand new paragraph, Gutenberg will mechanically create a brand new block.

If you wish to add a hyperlink, change alignment, or format the textual content with daring or italics, you may simply click on on the textual content block and use the floating menu bar:

how-to-use-wordpress-gutenberg-editor-4-5312888

Step 2: Add a picture block

So as to add a picture anyplace in your weblog publish, all you’ll want to do is hover over the spot the place you need to insert your picture.

If you try this, you will note the +Plus icon seem. Clicking on it is going to open the block checklist, which can assist you select the Picture block.

If you try this, you’ll have the ability to add a brand new picture or choose a picture out of your Media Library, identical to you do with the present WordPress editor:

how-to-use-wordpress-gutenberg-editor-5-1152884

When you insert the picture block, you’ll see the precise picture proper there within the editor.

Step 3: Add a YouTube embed block

To embed a YouTube video, you comply with an nearly an identical course of:

Then, all you’ll want to do is paste within the URL to the video, click on Embed, and also you’ll see the embedded video proper there in your publish:

how-to-use-wordpress-gutenberg-editor-6-5050700

Step 3: Add a desk block

The desk block permits you to insert and manipulate a desk anyplace in your content material with ease.

To take action, you have to to comply with the identical course of as above. And when you add it, you may add or take away rows and columns by utilizing the floating menu bar:

how-to-use-wordpress-gutenberg-editor-7-4501173

Step 4: Add and magnificence button block

The button block is one in all my favourite additions to the Gutenberg editor as a result of buttons are one thing that had been beforehand tough so as to add with out understanding the utilization of customized CSS. However with Gutenberg, utilizing buttons is easy.

First, you may insert a button by following the identical course of much like different blocks. To edit the button’s textual content, all you’ll want to do is click on and sort:

how-to-use-wordpress-gutenberg-editor-8-7387058

You too can go to the Block tab to alter the colours of your button:

how-to-use-wordpress-gutenberg-editor-9-1638117

And that’s it! You simply wrote a whole weblog publish utilizing the brand new WordPress Gutenberg editor. It’s that straightforward.

Some Different Useful Issues That You Can Do With The WordPress Gutenberg Editor

Other than what I demonstrated above, there are additionally another useful issues that you are able to do with Gutenberg.

One function that’s useful is the flexibility so as to add a novel background colour to any paragraph block in your publish:

how-to-use-wordpress-gutenberg-editor-10-1988021

You too can use the up and down buttons subsequent to every block to rapidly change the positioning of the block i.e. with out the outdated copy and paste methodology:

how-to-use-wordpress-gutenberg-editor-11-4749895

And at last, if you wish to save a while whereas inserting new blocks, I just like the quick-insert autosuggest function. Moderately than needing to make use of the +Plus icon each time you need to insert a brand new block, you may simply begin typing and use this format /block-name.

As you sort, Gutenberg will mechanically counsel blocks that match:

how-to-use-wordpress-gutenberg-editor-12-7780810

With this function, you may add blocks simply by utilizing your keyboard, which helps preserve you in your circulation.

Gutenberg May Have Rising Pains, However It Ought to Be Good In The Lengthy Run

WordPress has been utilizing just about the identical TinyMCE editor for so long as most individuals can keep in mind, so I believe it’s pretty unavoidable that there are going to be rising pains when WordPress 5.zero comes.

You will have to be taught a totally new interface, which is clearly going to take some adjustment.

However in the long term, that new interface ought to provide you with extra energy to create superior content material.

gp-1113766 as-5834419

WP Saviour