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

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 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, designed to be a lot more like website and page builder tools. 

The editor will endeavour 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.

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

With Gutenberg creating content in WordPress get more easier for the beginners. It helps you to see how, your content will look on the front end while editing on 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 the 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 get access to 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, ie. Font, Color settings, etc.
  9. All your Document Settings tab.

Let’s know more about 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 use /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, 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 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 the simple Follow us image or links.

How to create reusable block templates?

To create 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, and scroll to the Reusable section in the block inserter, and click the Manage all reusable blocks.

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 post and pages, then you can install this, Cool plugin Unlimited Blocks, to supercharge your Gutenberg editor.

The Unlimited Blocks is an Addon Plugin For 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 onto 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 for converting the old classic editor content to 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.

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 gallery you can display multiple images in your block. you can just select multiple image, 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 styling, 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 Text overlay, also there are many more customizations, like Color overlay, gradient overlay, Opacity, etc.

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 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, 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 website 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