WordPress Gutenberg Tutorial- Gutenberg WordPress Editor The new era of publishing.

The New Beta Version of WordPress 6.0 has been released a few weeks ago, and the stable version is likely to be released on 21th May 2022.

There are major changes that have been done to the latest beta WordPress 5.9 Version. There are new features and most important full site editing has been released by WordPress.

If you are using WordPress for the last 2-3 years then you have seen many changes in WordPress Editor.

You have seen a WordPress Classic editor and a new WordPress Block Editor, which is also called Gutenberg Editor.

The new block editor comes with many new possibilities that help you to do more with the new WordPress Gutenberg or Block Editor.

The Gutenberg editor gives you the freedom to create a new page or post with a new interface and also with new easy-to-use features.

No more complexities like the old WordPress Classic editor. Create anything with the new WordPress Block Editor.

So in today’s blog, I am going to tell you everything about the new Gutenberg WordPress Editor, or the WordPress Block Editor.

What’s New on WordPress 6.0

There are many new changes in WordPress 6.0 Version. The new Site Editor has been introduced and also been some major changes to Gutenberg Interface and Functionality.

The WordPress new generation of themes allows greater customization and simpler building. Themes can now be created entirely with blocks.

This means you get all the familiar editing tools and the same blocks you use when creating posts and pages to allow you to edit all parts of your site, including your header and footer.

All the templates from the theme can be edited using the Block Editor, like the Homepage, Blog, Archive page, or single pages.

WordPress Full Site Editing Theme

With this new Full site editing feature, you can now create your WordPress Website and can design a Homepage without any with your unique custom design, and edit them via a new customizer.

Note- The new Full site editing feature will only be available for themes that support this new feature in version 5.9.

wordpress full site editing 22

New Theme Blocks on WordPress 5.9

wordpress 5 9 verison

With the new Full Site Editing feature, there is also new blocks have been added to the Theme section of the Editor. Site editor blocks can also be used inside a WordPress post or page if needed. The New Blocks are given below.

  • Header
  • Footer
  • Navigation
  • Template Part
  • Archive Title
  • Next Post
  • Previous Post
  • Post Comments
  • Post Author
  • Term Description

New Patterns

There are various new pre-build blog patterns are added with the Twenty Twenty-Two theme. and with Explore button you can add a new block to your site.

Patterns can be used to create different sections like Header and Footers. In a few clicks, you can. now create a new header without changing your theme.

Open the inserter, switch to the patterns tab, and select Explore to see what’s available. All these new features help you to get where you want to go faster, whether it’s writing new posts or building new landing pages.

patterns 31

The theme also comes with a new pre-made pattern that you can use in the site editor or the block editor when writing content.

Drag and Drop List View Sections

The list view has several changes, including being able to rely on the familiar experience of drag and drop to place your content exactly where you want to.

wordpress list view

What is Gutenberg WordPress Editor

The Gutenberg Editor is a new WordPress editor that replaces the old Classic Visual Editor, and it is called WordPress Block Editor. The Gutenberg editor is just like Elementor and many other Page builders. This editor, is designed to be a lot more like website and page builder tools. 

The editor will endeavor to create a new page and post-building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

wordpress gutenberg editor 21

The new Gutenberg editor has changed the way you create posts, pages, and many other things on your website. The Gutenberg editor adds content blocks and page builder-like functionality to every up-to-date WordPress website.

With Gutenberg creating content in WordPress gets easier for beginners. It helps you to see how your content will look on the front end while editing on the back end.

The new WordPress Block Editor is now more customizable and completely changes the editing experience for you.

Blocks are a great new tool for building engaging content. With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge.

WordPress Blocks are a great new tool for building engaging content. With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge. Instead of using custom code, you can add a block and focus on your content.

Use of Gutenberg WordPress Editor

  1. Easier Editing – Already available in WordPress since 5.0, with ongoing improvements.
  2. Customization – Full Site editing, Block Patterns, Block Directory, Block based themes.
  3. Collaboration – A more intuitive way to co-author content
  4. Multi-lingual – Core implementation for Multi-lingual sites

Understanding Gutenberg block editor- WordPress Gutenberg Tutorial

Here is a quick guide for understanding the Gutenberg WordPress Editor, with WordPress Gutenberg Tutorial.

Wordpress Gutenberg Tutorial
  1. By clicking the (+) icon you can add a new block, i.e. Heading, paragraph, etc.
  2. undo and redo buttons, you can also use your keyboard commands for undo/redo.
  3. With the (i) button you can see the details of the content like- Characters, Words, Headings, Paragraphs, and Blocks
  4. Add the title for your post.
  5. From here you can start typing the content of your post.
  6. You can save draft your post, Preview, and Publish your post.
  7. With the Document tab, you can access document settings, covering things like Permalink, categories & tags, featured images, etc. This is similar to the current sidebar in the WordPress editor.
  8. when you have an individual block selected, this gives you access to settings that are specific to that block, i.e. Font, Color settings, etc.
  9. All your Document Settings tab.

Let’s know more about the above features in detail.

How to use Gutenberg block editor

All the content here is divided up into individual ‘blocks’. Gutenberg has many different types of blocks and sections that you can use in your post. Let’s learn more about them.

How to add new Block

To add a new block in your post click on the (+) icon and select any type of block you want to use, ie. if you want to add a new paragraph when clicking on the paragraph.

Wordpress Gutenberg Tutorial

You can get various types of blocks, in which you can create and add many things to your blog, Let’s know what are those blocks for.

  • Text- In the text section you can add blocks for, Heading, Paragraph, List, Quote, Table, etc.
  • Media- In the Media section you can add blocks for, Image, Gallery, Audio, Video, etc.
  • Design- In the Design section you can add blocks for, Buttons, columns, separators, etc.
  • Widgets- Here you can add blocks for, shortcodes, custom HTML, tag cloud, and many more things.
  • Embeds- You can embed the content from, Twitter, YouTube, WordPress, Spotify, etc.

Add new block with Syntax

You can add a new block by typing the name of the block, you can add blocks by adding this Syntax- /BLOCK-NAME

For example, you can see in the below image, how to use Syntax. We have used/Image Syntax to add the image block.

Wordpress Gutenberg Tutorial

After adding the block you can add an image by simply uploading the image. Also when you use / An auto-suggest box will appear to help you find the relevant block. This method is used as a keyboard shortcut.

Add WordPress Block Patterns

Block Patterns are predefined block layouts, ready to insert and tweak. The WordPress Block Patterns are the pre-built page elements that you can use to create a page on your website.

  1. Patterns- Click here to add pre-build page elements
  2. Select Buttons, Columns, galleries, Headers, and Text for your page.
Wordpress Gutenberg Tutorial

The concept of using predefined sections of page content in web design is not new by any means. Most website builders — Elementor, and Wix, have long provided patterns of some sort to help people design websites easily.

Create reusable block templates in WordPress Editor

The reusable block in the WordPress editor is a content block that can be saved to be used later.

Many bloggers often add the same content snippets in multiple articles such as call-to-actions at the end of the blog post or links to follow the blog on social media, or simple Follow Us images or links.

How to create reusable block templates?

To create a reusable block first Select the blocks that you want to include.

  1. Click on the Three Dots
  2. Now click on the Add to Reusable Blocks
how to create reusable blocks in gutenberg

How to Edit Reusable Blocks?

To edit created reusable blocks content go to your reusable block, click on three dots, scroll to the Reusable section in the block inserter, and click the Manage all reusable blocks.

edit reusable blocks 31

Or you can directly visit domain.com/wp-admin/edit.php?post_type=wp_block 

Unlimited Blocks for Gutenberg

If you want to add more elements to your posts and pages, then you can install this, Cool plugin Unlimited Blocks, to supercharge your Gutenberg editor.

The Unlimited Blocks is an Addon Plugin For the Gutenberg Block Editor. Quickstart the Gutenberg editor with Powerful and elegant blocks to design stunning websites.

Wordpress Gutenberg Tutorial

Free Unlimited Blocks plugin that amplifies the default WordPress Gutenberg Editor with 18+ powerful blocks.

Create mobile-friendly designs with Unlimited Blocks built-in responsive settings. Each block can be tweaked to provide a consistent experience for mobile, tablet, and desktop.

Unlimited Blocks is the editor block that is used to create content layouts that you can insert anywhere on your WordPress post or pages.

Get Unlimited Blocks For Gutenberg >

How to change WordPress classic editor to Block Editor

What about the old content that you have created using a classic WordPress editor, you also need to convert your old block to a new block editor. So convert the old classic editor content to the new Gutenberg editor do this-

Open your old content, and select the content. After selecting the content you will see a Convert to blocks option, as you can see in the given screenshot below. Click on Convert to blocks, and your old content will be converted into a new block editor.

old wordpress content to block editor 31

This Classic block is basically the TinyMCE editor but embedded inside the new block editor. Please note that Classic Editor will be supported until 2022. so convert your old content to a new editor now.

Do more with Gutenberg WordPress Editor

You can do many more things with Gutenberg WordPress Editor, you can create almost everything with the new WordPress block editor. so let’s explore some of the most used blocks from the Gutenberg editor.

With a gallery, you can display multiple images in your block. you can just select multiple images, or you can also drag images from your folder to blocks.

Create Buttons

You can create beautiful buttons with Gutenberg. To insert buttons to your block Click on the (+) icon and select the buttons element. or you can also search the Button on the block search bar.

  1. After adding buttons, you can add a link to your button, and also some more customizations.
  2. At the right panel, you can add, your button stylings, like shape and size. Also, you can change color settings and many more things to create buttons according to your preferences.
Wordpress Gutenberg Tutorial

You can also use your buttons as reusable blocks if you use them frequently.

Add Cover image or video

With Cover you can add any image or video with a Text overlay, also there are many more customizations, like Color overlay, gradient overlay, Opacity, etc.

cover image gutenberg

You can choose between a number of background types, including image, video, solid color, and gradient. Backgrounds can optionally be set to a fixed position, providing a parallax-like effect upon the scroll.

While you could utilize the Cover block for its background alone, adding text is a great way to attract attention to important content.

Conclusion

The Gutenberg WordPress Editor is very useful for creating content. You can create almost anything with the new Block editor, also it is easy to use with lots of features.

Blocks have visual editing built-in which creates a more rich, more dynamic experience for building your site. The block concept is very powerful, and when designed thoughtfully, can offer an outstanding editing and publishing experience.

Try Gutenberg WordPress block editor, it will help you to create beautiful websites and content.

I hope you have enjoyed this article about WordPress Gutenberg Tutorial. You get to know some of the needful things about WordPress Gutenberg.

If you have any questions regarding anything, do not hesitate just comment down below, we will help you to solve your problem. Thanks for reading this blog. 🙂

Please Subscribe to our YouTube Channel, we also upload great content there and also Do Follow us on Facebook and Twitter

Recommended Hostings

HostingPlan StartsGet Deals
Kinsta$35/mo*Get Discount
Siteground$2.99/mo*Get Discount
Namecheap$1.98 /mo*Get Discount
A2 Hosting$2.99/mo*Get Discount
InMotion$2.29/mo*Get Discount