Do you need to learn to use the WordPress block editor (Gutenberg)?

When WordPress 5.0 was launched in 2019, it changed the outdated traditional editor with a model new block editor nicknamed “Gutenberg”. The block editor launched a special manner of making content material in WordPress.

On this tutorial, we’ll present you how one can use the WordPress block editor and grasp it to create visually beautiful weblog posts and pages.

What’s The Distinction Between Block Editor (Gutenberg) and Basic Editor?

Earlier than we dive into the block editor, let’s first examine and perceive the variations between Gutenberg Block Editor and the Older Basic Editor.

Here’s what the traditional editor in WordPress regarded like:

And that is how the fashionable WordPress block editor appears to be like like:

As you may see, they’re two utterly totally different editors for creating content material in WordPress.

The outdated traditional editor was a textual content editor with formatting buttons similar to Microsoft Phrase.

The brand new editor makes use of a completely totally different strategy, known as ‘Blocks’ (therefore, the title Block Editor).

Blocks are content material parts that you simply add to the edit display to create content material layouts. Every merchandise you add to your put up or web page is a block.

You possibly can add blocks for every paragraph, pictures, movies, galleries, audio, lists, and extra. There are blocks for all frequent content material parts, and extra could be added by WordPress plugins.

How is the WordPress block editor higher than the traditional editor?

The WordPress block editor provides a easy manner so as to add various kinds of content material to your posts and pages.

For instance, beforehand when you wished so as to add a desk in your content material, then you definitely wanted a separate desk plugin.

With the block editor, you may merely add a desk block, choose your columns and rows, and begin including content material.

You possibly can transfer content material parts up and down, edit them as particular person blocks, and simply create media-rich content material.

Most significantly, the WordPress block editor is straightforward to make use of and be taught.

This offers an immense benefit to all WordPress learners who’re simply beginning their first weblog or constructing a DIY enterprise web site.

That being mentioned, let’s check out how one can use the WordPress block editor like a professional to create nice content material.

Here’s what we are going to cowl on this Gutenberg tutorial:

1. Utilizing Gutenberg – The WordPress block editor
2. Creating a brand new weblog put up or web page
3. The way to add a block in Gutenberg
4. Working with blocks within the new editor
5. Saving and reusing blocks in Gutenberg
6. Publishing and put up settings in Gutenberg
7. Plugin settings in new editor
8. Including some frequent blocks in Gutenberg
9. Exploring some new content material blocks in Gutenberg
10. Bonus tips about utilizing Gutenberg like a professional
11. Including extra blocks to Gutenberg Block Editor
12. FAQs about Gutenberg

Prepared? Let’s dive in.

Video Tutorial

If you happen to’d choose written directions, then simply preserve studying.

Utilizing Gutenberg – The WordPress Block Editor

The block editor is designed to be intuitive and versatile. Whereas it appears to be like totally different than the outdated WordPress editor, it nonetheless does all of the issues that you simply have been in a position to do within the traditional editor.

Let’s begin with overlaying the essential issues that you simply did within the traditional editor, and the way they’re accomplished within the block editor.

Making a New Weblog Publish or Web page Utilizing The Block Editor

You’ll begin creating a brand new weblog put up or web page such as you usually would. Merely click on on the Posts » Add New menu in your WordPress admin. In case you are making a web page, then go to Pages » Add New menu.

This may launch the block editor.

The way to Add a Block in Gutenberg

The primary block of each put up or web page is the title.

You should utilize the mouse to maneuver beneath the title or press the tab key in your keyboard to maneuver the cursor down and begin writing.

By default, the following block is a paragraph block. This enables customers to begin writing immediately.

Nonetheless, if you wish to add one thing totally different, then you may click on on the add new block button (+) on the highest left nook of the editor, beneath an present block, or on the suitable facet of a block.

Clicking on the button will present the add block menu with a search bar on high and generally used blocks beneath.

You possibly can click on on tabs to browse block classes or kind in a key phrase to rapidly seek for a block.

If you happen to don’t need to use a mouse to click on on the button, then you should utilize a keyboard shortcut by typing / to go looking and add a block.

Working with Blocks in The New Editor

Every block comes with its personal toolbar which seems on high of the block. The buttons within the toolbar would change relying on the block you’re modifying.

For instance, on this screenshot, we’re working in a paragraph block that exhibits fundamental formatting buttons like textual content alignment, daring, italic, insert hyperlink, and extra.

Aside from the toolbar, every block can even have its personal block settings which would seem in the suitable column of your edit display.

You possibly can transfer blocks up and down by merely dragging them or by clicking the up and down buttons subsequent to every block.

Organizing Blocks in Teams and Columns

The block editor comes with useful instruments to handle and set up your content material layouts.

You possibly can choose a number of blocks by clicking on them whereas urgent the SHIFT key in your keyboard.

After that, click on on the block kind button within the toolbar to remodel the chosen blocks into Teams or Columns.

You possibly can then apply types to your entire group block comparable to altering their alignment or spacing.

The block editor additionally lets you add an empty Group or Columns block. After that, you may fill them with different blocks.

You possibly can then fill in every column with any kind of block to create stunning layouts.

Saving and Reusing Blocks in Gutenberg

Among the finest issues about blocks is that they are often saved and reused. That is significantly useful for web site homeowners and bloggers who continuously want so as to add particular content material snippets to their articles or pages.

Merely click on on the menu button positioned on the proper nook of every block’s toolbar. From the menu, choose the ‘Add to reusable blocks’ possibility.

You’ll want to offer a reputation on your reusable block so as to determine and reuse it later.

The block editor will now save the block as a reusable block.

Now that you’ve got saved a block, let’s see how one can add the reusable block into different WordPress posts and pages in your website.

Merely edit the put up or web page the place you need to add the reusable block. From the put up edit display, click on on the add block button.

You will discover your saved block beneath the ‘Reusable’ tab. You may as well discover it by typing its title within the search bar.

You possibly can take your mouse over it to see a fast preview of the block. Merely click on on the block to insert it into your put up or web page.

All reusable blocks are saved in your WordPress database, and you may handle them by clicking on the ‘handle all reusable blocks’ hyperlink.

This may carry you to the block supervisor web page. From right here, you may edit or delete any of your reusable blocks. You may as well export reusable blocks and use them on another WordPress web site.

Notice: You should utilize total teams and columns as reusable blocks too. This lets you save total sections and use them at any time when wanted.

Publishing and Managing Choices in Gutenberg Block Editor

Every WordPress put up incorporates numerous metadata. This consists of data like publish date, classes and tags, featured pictures, and extra.

All these choices are neatly positioned in the suitable column on the editor display.

Plugin Choices in Gutenberg

WordPress plugins are in a position to make the most of the block editor’s API to combine their very own settings inside the edit display.

Some well-liked plugins include their very own blocks. For instance, WPForms, one of the best WordPress type builder plugin lets you add types into your content material utilizing a block.

Right here is how All in One search engine optimization for WordPress lets you edit your search engine optimization settings within the block editor:

WooCommerce additionally comes with blocks you could simply add to any of your WordPress posts and pages.

Including Some Frequent Blocks in New Editor

Mainly, the block editor can do all the things the traditional editor did. Nonetheless, you’ll be doing issues extra rapidly and elegantly than earlier than.

1. Including a picture within the WordPress block editor

There’s a ready-to-use picture block within the WordPress block editor. Merely add the block after which add a picture file or choose from the media library.

You may as well drag and drop pictures out of your pc, and the editor will robotically create a picture block for it.

After you have added a picture, it is possible for you to to see the block settings the place you may add metadata for the picture like alt textual content, dimension, and add a hyperlink to the picture.

2. Including a hyperlink within the block editor

The block editor comes with a number of blocks the place you may add textual content. Essentially the most generally used one is the paragraph block which comes with an insert hyperlink button within the toolbar.

All different generally used textual content blocks additionally embrace a hyperlink button within the toolbar.

You may as well insert a hyperlink utilizing the keyboard shortcut, which is Command + Okay for Mac and CTRL + Okay on Home windows computer systems.

3. Including a picture gallery in Gutenberg

The gallery block works just like the picture block. You add it after which add or choose picture recordsdata.

4. Including shortcodes in WordPress posts utilizing Gutenberg

All of your shortcodes will work identical to they did within the traditional editor. You possibly can merely add them to a paragraph block, or you should utilize the shortcode block.

Exploring Some New Content Blocks in Gutenberg

The Gutenberg editor guarantees to unravel some long-standing usability points in WordPress by introducing some new blocks.

Following are among the favorites that we imagine customers will discover immensely useful.

1. Including a picture subsequent to some textual content in WordPress

Utilizing the outdated editor, a lot of our customers have been unable to position a picture subsequent to the textual content. You are able to do this now with the Media & Textual content block.

This easy block comes with two blocks positioned side-by-side permitting you to simply add a picture with some textual content subsequent to it.

2. Including a button in WordPress posts and pages

Including a button to your weblog posts or pages was one other annoyance within the outdated editor. You both had to make use of a plugin that created a shortcode for the button, otherwise you needed to change to HTML mode and write code.

Gutenberg comes with a button block that lets you rapidly add a button to any put up or web page.

You possibly can add a hyperlink on your button, change colours, and extra. For particulars, see our article on how one can simply add buttons in WordPress.

3. Including stunning cowl pictures in weblog posts and touchdown pages

One other cool function that you could be need to strive is the ‘Cowl’ block, which lets you add cowl pictures or coloration background cowl to your posts and pages.

A canopy picture is a wider picture usually used as a canopy for a brand new part in a web page or the start of a narrative. They appear stunning and help you create partaking content material layouts.

Merely add a canopy block after which add the picture you need to use. You possibly can select an overlay coloration for the duvet or make it a hard and fast background picture to create parallax impact when customers scroll down the web page.

For extra particulars, see our article on the distinction between cowl pictures and options picture in WordPress.

4. Creating tables inside articles

The traditional editor didn’t have a button so as to add tables into your WordPress posts. You had to make use of a plugin or create a desk writing customized CSS and HTML.

The Gutenberg editor comes with a default Desk block, which makes it tremendous straightforward so as to add tables into your posts and pages. Merely add the block after which choose the variety of columns and rows you need to insert.

Now you can go forward and begin including information to desk rows. You possibly can all the time add extra rows and columns if wanted. There are additionally two fundamental type choices out there.

5. Creating multi-column content material

Creating multi-column content material was one other situation that the traditional editor didn’t deal with in any respect. The block editor lets you add a Columns block, which mainly provides two columns of paragraph blocks.

This columns block is kind of versatile. You possibly can add as much as 6 columns in a row and even use different blocks inside every column.

Bonus Tricks to Use Gutenberg like a Professional

Trying on the block editor, chances are you’ll be questioning whether or not you’ll be spending extra time including and adjusting blocks than creating precise content material?

Nicely, the block editor is extremely quick and even very fundamental utilization for a couple of minutes will help you immediately add blocks with out even pondering.

Fairly quickly you’ll understand how a lot sooner your workflow will develop into with this strategy.

For energy customers, listed here are some bonus ideas that will help you work even sooner with the WordPress block editor.

1. Transfer the block toolbar to the highest.

You might have observed within the screenshots above that there’s a toolbar that seems on high of each block. You possibly can transfer this toolbar to the highest of the editor.

Merely click on on the three-dot button on the high proper nook of the display after which choose the Prime Toolbar possibility.

2. Use keyboard shortcuts

Gutenberg comes with a number of useful shortcuts that can make your workflow even higher. The primary one you need to begin utilizing immediately is the /.

Merely enter / after which begin typing, and it’ll present you matching blocks you could immediately add.

For extra shortcuts, click on on the three-dot menu on the top-right nook of your display after which choose ‘Keyboard Shortcuts’.

This may carry up a popup with the record of all of the keyboard shortcuts that you should utilize. The record can have totally different shortcuts for Home windows and Mac customers.

3. Drag and drop media to robotically create media blocks

Gutenberg lets you simply drag and drop recordsdata anyplace on the display and it’ll robotically create a block for you.

You possibly can drop a single picture or video file, and it’ll create the block for you. You may as well drop a number of picture recordsdata to create a gallery block.

4. Including YouTube, Twitter, Vimeo, and different embeds

The block editor makes it simpler to embed third-party content material into your WordPress content material. There are blocks for all well-liked third-party providers.

Nonetheless, you may simply copy and paste the embed URL at any level, and it’ll robotically create a block for you.

For instance, when you added a YouTube video URL, then it is going to robotically create a YouTube embed block and show the video.

For Fb and Instagram embeds, see our article on how one can embed Fb and Instagram posts in WordPress.

Including Extra Blocks to Gutenberg Block Editor in WordPress

The block editor in WordPress permits builders to create their very own blocks. There are some superior WordPress plugins providing block bundles for the brand new editor.

Listed below are a couple of of them:

1. Final Addons for Gutenberg

Final Addons for Gutenberg is a block library that comes with many superior blocks that assist you add extra design parts to your content material.

Created by the oldsters behind the favored Astra WordPress theme, Final Addons assist you create stunning designs with out writing any code.

2. PublishPress Blocks

PublishPress Blocks is one other highly effective block library that comes with further blocks to increase Gutenberg block editor.

It consists of stunning structure choices, sliders, buttons, icons, picture galleries, maps, tabs, testimonials, accordions, and extra.

3. Stackable – Gutenberg Blocks

Stackable – Gutenberg Blocks is a set of superbly designed Gutenberg blocks that you should utilize in your web site. It consists of blocks for the container, posts, function grid, accordion, picture field, icon record, name to motion, and extra.

FAQs about Gutenberg – The Block Editor in WordPress

Since Gutenberg turned the default WordPress editor, we’ve been getting numerous questions. Listed below are the solutions to among the most continuously requested questions on Gutenberg.

1. What occurs to my older posts and pages? Can I nonetheless edit them?

Your outdated posts and pages are utterly protected and unaffected by the block editor. You possibly can nonetheless edit them, and the editor will robotically open them in a block containing the traditional editor.

You possibly can edit them contained in the outdated editor, or you may convert older articles into blocks and use the block editor.

2. Can I nonetheless preserve utilizing the outdated editor?

Sure, you may nonetheless preserve utilizing the outdated editor. Merely set up and activate the Basic Editor plugin.

Upon activation, it is going to disable the block editor, and it is possible for you to to proceed utilizing the traditional editor.

Please notice that the Basic Editor can be supported till 2022. It will be higher to begin utilizing the block editor so that you simply get acquainted with it.

3. What to do if the block editor doesn’t work with a plugin or theme I’m utilizing?

Undertaking Gutenberg was beneath growth for a very long time. This gave plugin and theme authors loads of time to check their code for compatibility.

Nonetheless, there’s nonetheless an opportunity that some plugins and themes could not work effectively with the block editor. In that case, you may set up the traditional editor plugin, request the developer so as to add Gutenberg assist, or just discover an alternate plugin or theme.

4. The way to be taught extra Gutenberg ideas and methods?

WPBeginner is one of the best place to be taught in regards to the block editor in WordPress. We’re the most important WordPress useful resource website on the web.

We can be publishing new articles and updating our outdated sources that will help you grasp the block editor.

In the meantime, in case you have any questions, then be happy to achieve out to us by leaving a remark or by utilizing the contact type on our web site.

We hope this Gutenberg tutorial helped you learn to use the WordPress block editor. You might also need to see our full WordPress efficiency information for enhancing your web site pace, or try our comparability of one of the best electronic mail advertising and marketing providers for small enterprise.

If you happen to appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may as well discover us on Twitter and Fb.