Use Coupon Code ILOVEJENIUS for 10% off

How To Use The WordPress Gutenberg Editor – A Full Information For Inexperienced persons

As I write and also you learn this, the WordPress core workforce is within the technique of creating a wholly new content material editor for WordPress – Gutenberg – and it’s at present scheduled for launch in some unspecified time in the future in 2018 as a part of WordPress

When that occurs, 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 can assist you prepare for the change that I’ve penned down this publish on How To Use The WordPress Gutenberg Editor.

I’ll present you precisely how you should use the brand new editor to jot down a weblog publish so that you’re prepared for the transition when WordPress and Gutenberg get launched.

An Introduction To The WordPress Gutenberg Editor Interface

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

the wordpress gutenberg editor interface

It’s considerably much like the present WordPress TinyMCE editor, however the largest distinction to you’d be the absence of the one textual content field for you which of them you at present use to jot down and format all of your content material.

As an alternative, you should have one massive white space that begins with ‘Write your story’. For those who 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 can assist you create your content material, fairly 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:

  • A daily paragraph of textual content
  • A picture
  • A CTA button
  • An embedded video

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

How To Use The Gutenberg Editor Interface

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

how to use the wordpress gutenberg editor

  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 consists of most of the identical choices as the present WordPress editor sidebar. It’s the place you add classes/tags, set the featured picture, select the publishing date and many others.
  4. When you choose a person block, this settings space consists of settings which can be particular to that block. It’s the place you may select colours, kinds, and different essential block-specific particulars.
  5. These two buttons allow you to preview or publish your publish.

For those who click on on the +Plus button to insert a block, it would open a window that allows you to browse all obtainable blocks that you should use in your content material:

adding blocks to your content

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

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

How To Write A Weblog Publish Utilizing The Gutenberg Editor

Now that you understand how the interface works, nicely, to an extent, I’ll present you how one can really use Gutenberg to jot down a weblog publish in your website.

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

  • A number of common textual content
  • An embedded YouTube video
  • A desk

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 every thing with Gutenberg.

Step 1: Write your textual content utilizing paragraph blocks

To put in writing the textual content of your weblog publish, Gutenberg doesn’t require you to really add a brand new block. As an alternative, you may simply click on on the web page and begin writing like this:

how to add text to gutenberg

Fairly straightforward up to now, proper?

All you do is kind. 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:

formatting text with gutenberg

Step 2: Add a picture block

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

Once you try this, you will note the +Plus icon seem. Clicking on it would open the block checklist, which is able to allow you to select the Picture block.

Once 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 insert an image with gutenberg

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

Step three: Add a YouTube embed block

To embed a YouTube video, you observe an virtually similar course of:

  • Hover over the place you need to embed your YouTube video
  • Click on the +Plus icon
  • Go to the Embeds tab
  • Select YouTube

Then, all you must 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:

Step three: 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’ll need to observe the identical course of as above. And when you add it, you may add or take away rows and columns through the use of the floating menu bar:

embed a video in gutenberg

Step four: Add and elegance 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 have been beforehand troublesome so as to add with out realizing the utilization of customized CSS. However with Gutenberg, utilizing buttons is straightforward.

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 must do is click on and sort:

how to add cta button in gutenberg

You can even go to the Block tab to vary the colours of your button:

how to style button in gutenberg

And that’s it! You simply wrote a complete 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 singular background coloration to any paragraph block in your publish:

gutenberg block background

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

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 kind, Gutenberg will mechanically counsel blocks that match:

With this function, you may add blocks simply through the use of your keyboard, which helps preserve you in your circulation.

What Do You Suppose Of The New Gutenberg Editor?

Now that you just’ve had an opportunity to see extra of how the brand new Gutenberg editor capabilities, tell us what you consider it.

Do you suppose it would make your running a blog simpler? Or do you continue to desire the present WordPress editor?

Tell us within the feedback!

Listed below are a couple of different hand-picked articles so that you can learn subsequent:


Leave a Reply