The way to Use The WordPress Gutenberg Editor – A entire manual For novices

As I write and also you read this, the WordPress middle team is within the system of growing a completely new content material editor for WordPress – Gutenberg – and it's far presently scheduled for launch sooner or later in 2018 as part of WordPress 5.0.when that happens, the way that you write your weblog posts in WordPress will notably exchange (even though you'll be capable of install a plugin to preserve using the contemporary editor, if preferred).

it is that will help you get ready for the trade that i've penned down this put up on a way to Use The WordPress Gutenberg Editor.I’ll display you exactly how you may use the brand new editor to write a blog submit so you are ready for the transition when WordPress five.zero and Gutenberg get released.

An creation To The WordPress Gutenberg Editor Interface
When you first go to create a brand new post or page with Gutenberg, here’s what you’ll see:

it's miles particularly just like the present day WordPress TinyMCE editor, but the largest difference to you would be the absence of the unmarried textual content container for you which you currently use to write and format all of your content.as a substitute, you may have one huge white place that starts with ‘Write your story’. in case you read my post on what the WordPress Gutenberg editor is, you’ll recognize that is because Gutenberg uses “blocks” to help you create your content, in preference to a single text enter place.For extra facts on what blocks are, I advocate that you examine my publish above. but as a quick refresher, a block can basically be something. it is able to be:

• A everyday paragraph of text
• An photograph
• A CTA button
• An embedded video

0.33-birthday party builders may also be capable of code their personal blocks to feature greater functionality. you may already see an instance of this with the BlocksWP Social share Block.the way to Use The Gutenberg Editor InterfaceHere are what the diverse regions of the Gutenberg interface allow you to do:

click on this button to feature a brand new block.
Undo/redo buttons allow you to move ahead or backward to edit without difficulty, much like Microsoft word.
This settings area includes many of the equal alternatives because the contemporary WordPress editor sidebar. it's far where you upload categories/tags, set the featured picture, pick the publishing date etc.
whilst you pick out an character block, this settings area includes settings which can be precise to that block. it's far in which you could pick out shades, styles, and different important block-specific details.
these  buttons assist you to preview or submit your publish.
if you click on on the +Plus button to insert a block, it'll open a window that lets you browse all to be had blocks that you can use in your content:

The current and stored tabs assist you to get entry to blocks which you frequently use, while the Blocks and Embeds tabs allow you to browse all available blocks.you can additionally use the hunt box to speedy discover a particular block by way of typing inside the block’s name.

The way to Write A weblog submit the use of The Gutenberg Editor

Now which you realize how the interface works, well, to an extent, I’ll show you the way you can genuinely use Gutenberg to put in writing a weblog put up in your web page.as an instance, permit’s say which you need to put in writing a blog publish that includes:
lots of everyday textual content
An photograph
An embedded YouTube video
A table
A CTA button

formerly, you might’ve wanted a few separate plugins or custom CSS to deal with growing a table and CTA button – however now you may do the entirety with Gutenberg.

Step One-Use Your Text 

to write down the textual content of your weblog post, Gutenberg doesn’t require you to genuinely upload a brand new block. as an alternative, you could simply click at the page and begin writing like this:

Pretty smooth thus far, proper?All you do is type. And each time you hit enter to start a brand new paragraph, Gutenberg will robotically create a brand new block.in case you want to add a link, alternate alignment, or layout the text with formidable or italics, you can just click on the text block and use the floating menu bar:

Step 2: Add an image block

To add an image anywhere in your blog post, all you need to do is hover over the spot where you want to insert your image.

When you do that, you will see the +Plus icon appear. Clicking on it will open the block list, which will help you choose the Image block.

When you do that, you’ll be able to upload a new image or select an image from your Media Library, just like you do with the current WordPress editor:

Once you insert the image block, you’ll see the actual image right there in the editor.

Step 3: Add a YouTube embed block

To embed a YouTube video, you follow an almost identical process:

• Hover over where you want to embed your YouTube video
• Click the +Plus icon
• Go to the Embeds tab
• Choose YouTube

Then, all you need to do is paste in the URL to the video, click Embed, and you’ll see the embedded video right there in your post:

Step 3: Add a table block

The table block lets you insert and manipulate a table anywhere in your content with ease.

To do so, you will need to follow the same process as above. And once you add it, you can add or remove rows and columns by using the floating menu bar:

Step 4: Add and style button block

The button block is one of my favorite additions to the Gutenberg editor because buttons are something that were previously difficult to add without knowing the usage of custom CSS. But with Gutenberg, using buttons is simple.

First, you can insert a button by following the same process similar to other blocks. To edit the button’s text, all you need to do is click and type:

You can also go to the Block tab to change the colors of your button:

And that’s it! You just wrote an entire blog post using the new WordPress Gutenberg editor. It is that simple.

Some Other Helpful Things That You Can Do With The WordPress Gutenberg Editor

Apart from what I demonstrated above, there are also some other helpful things that you can do with Gutenberg.

One feature that’s helpful is the ability to add a unique background color to any paragraph block in your post:

You can also use the up and down buttons next to each block to quickly change the positioning of the block i.e. without the old copy and paste method:

And finally, if you want to save some time while inserting new blocks, I like the quick-insert autosuggest feature. Rather than needing to use the +Plus icon every time you want to insert a new block, you can just start typing and use this format /block-name.

As you type, Gutenberg will automatically suggest blocks that match:

With this feature, you can add blocks just by using your keyboard, which helps keep you in your flow.

What Do You Think Of The New Gutenberg Editor?

Now that you’ve had a chance to see more of how the new Gutenberg editor functions, let us know what you think about it.

Do you think it will make your blogging easier? Or do you still prefer the current WordPress editor?

Let us know in the comments!