Image Showing Wordpress Gutenberg Tutorial

Since December 6, 2018, the classic content editor was replaced in WordPress 5.0 by Gutenberg, a completely new block editor. Since then, many users have been looking for WordPress Gutenberg Guide. 

The WP block editor or famously called Gutenberg Editor is a completely new and creative approach to creating content in WordPress.  So, if you are wondering how to use the new WordPress block editor? We’ll show you how to use Gutenberg editor and master it so you can build attractive blog articles and pages.

 

What is Gutenberg?

The WordPress block editor, which replaced the TinyMCE editor as the default WordPress editor in WordPress 5.0, is known as Gutenberg. 

While Gutenberg was the official name during development, it is now referred to as “the WordPress block editor” or “the WordPress editor.” As a result, I’ll refer to it in this piece as the “block editor” rather than “Gutenberg.”

But it’s more than a cosmetic change. Using a block-based approach to content, Gutenberg completely transforms the editing experience. 

While the present focus is on content production, the Gutenberg block editor will go beyond the post and page layouts. It will eventually be used for full site customization.” Full-site editing is the formal name for this change.

That means you’ll be able to create your entire site out of blocks soon. This includes landing pages and other crucial content. Some themes have even begun to offer this type of full-site editing. But these themes are still more in the “proof of concept” stage than something that will become global.

Advantages of Gutenberg

The benefits of Gutenberg are many. It offers the addition of content blocks to other simple-to-use features that assist in enriching a site’s pages. This new editor will help even beginners to create professional-looking material. 

As stated earlier, those basic features keep distractions to a minimum. This allows content creators to get into and stay in a workflow. There’s no need to pause to add HTML or fiddle with image and video embeds. Gutenberg will allow you to express yourself freely.

When compared to the present editor, Gutenberg also provides more writing areas. This feature is especially noticeable on smaller displays. This was most likely included as a reference to laptops and, to a lesser extent, mobile users. It also follows a common Gutenberg theme. This theme puts writing first and removes any possible distractions from content authors. 

The ability to collapse the right-hand sidebar in “Post Settings” takes this theme a step further. This allows you to use even more of your screen for writing and content production.

The future phases of Gutenberg would be more promising. The templates and customization that will be available will be a game-changer for businesses and marketing agencies. These will help them create uniformity across their sites.

Disadvantages of Gutenberg

There is some concern, like with many other WordPress plugins, over how Gutenberg may affect existing pages and posts. For now, this is an uncertainty. But, users can be confident that the current beta testing focuses on how the new editor will interact with existing WordPress assets. 

The Gutenberg Plugin Compatibility Database is a great archive of all the plugin progress made so far. These archives are great for pros who want to offer a hand (or novices who want to take a look).

Advanced Custom Fields is a success story worth mentioning here. This popular plugin lets you add custom fields to the editor page, and it’s already Gutenberg-ready. 

Another flaw in Gutenberg that will be fixed before it goes live is that it lacks support for custom plugin meta boxes. These meta boxes are prevalent in plugins like Yoast SEO, CoSchedule, and Jetpack, and their absence renders them useless. Given the necessity of this function, it’s unlikely that it won’t be added sooner rather than later.

Is Gutenberg a part of WordPress?

On December 6, 2018, Gutenberg was released as part of WordPress 5.0. If you’ve upgraded to WordPress 5.0, the block editor should now be visible by default. 

But, some managed WordPress providers have chosen not to update people’s sites straight once due to the size of the release. As a result, it’s possible that your site isn’t yet running WordPress 5.0. In that situation, the decision to upgrade or not is yours.

How the Gutenberg editor works

We explained to you that Gutenberg is a block-based editor. But if you’re new to WordPress like many people, you might not know what that means.

Let us start with block-based editing 101: 

Gutenberg replaces the current WordPress TinyMCE editor’s single edit field with a slew of distinct “blocks.” 

These blocks then allow you to create more intricate designs than what the old WordPress editor enabled.

A block can also be pretty much anything. You could, for example, have blocks for: 

  • Images 
  • Images 
  • Buttons 
  • Widgets 
  • Tables
  • Video Embeds

What’s more, developers will be able to design their own third-party blocks. These blocks will be accessible via plugins, giving you even more flexibility. 

Each block is a separate entity that you may change separately. Here’s an example of a short Gutenberg post with three blocks: 

  • Two text blocks 
  • One image block 

Try how you can rearrange those blocks by dragging and dropping them: 

You can also add things like different backgrounds for certain blocks because each block is “separate.” 

In general, it provides you with more flexibility and control.

For more information on the WP block editor, watch the WordPress Gutenberg Editor Tutorial Series. This is a multi-part series that goes through Gutenberg Block Editor.

Difference Between Block Editor (Gutenberg) and Classic Editor

In this section, we will compare the Gutenberg Block Editor and the Classic Editor.

Here’s how WordPress’s classic editor looked like:

Image Showing Classic Editor Look(Wordpress Gutenberg Guide)

If you upgrade to WordPress 5.0, the new block editor will appear like this: 

Image Showing Wordpress 5.0 Editor

As you can see, the two editors for writing content in WordPress are very different.  The old classic editor was a text editor that resembled Microsoft Word in terms of formatting buttons.  The new editor, dubbed ‘Blocks,’ takes a completely different approach. 

Blocks are content elements that you can use to create content layouts on the edit screen. Each item you include in your post or page is referred to as a block. You may use blocks to add images, videos, galleries, audio, lists, and more to each text. There are blocks for all major content elements, and WordPress plugins can add more.

Also Read: How to Bulk Convert Classic Blocks to Gutenberg in WordPress

What makes the new WordPress block editor superior to the old one? 

The new WordPress block editor makes adding various types of content to your posts and pages a breeze. 

For example, if you wanted to include a table in your content before, you had to use a separate table plugin. 

You can build a table block, select your columns and rows, and begin adding content with the new editor.

Image Showing Table Block Editor

You may create media-rich content by moving content items up and down and editing them as individual blocks. 

Above all, the new WordPress block editor is simple to use and understand. 

This gives all WordPress beginners who are starting their first blog or creating a DIY business website a huge advantage. 

How to use WordPress Block Editor

The purpose of the block editor is to be simple to use and adaptable. While it differs from the original WordPress editor in appearance, it retains all the functionality of the old editor. Let’s start by going over the basics of what you accomplished in the classic editor and how to do them in the block editor.

Creating a New Blog Post or Page Using The Block Editor

You’ll begin by writing a new blog post or page, just as you would normally. Go to your WordPress admin and click on the Posts » Add New menu. Go to the Pages » Add New menu if you’re making a new page. 

Image Showing How To Cfeate A New Post Using Block Editor

The new block editor will be launched as a result of this.

How to Add a Block in Gutenberg

The title is the first block of every post or page. After that, you can move below the title and begin writing. 

Image Showing How To Add A Block In Gutenberg

The following block is a paragraph block by default. Users can immediately begin writing as a result of this. If you wish to add anything else, you can do so by clicking the add new block button in the editor’s top left corner. It is present below an existing block or on the left side of a block. 

Image Showing How To Add A Block In Gutenberg

When you click the button, the add block menu appears, with a search bar at the top and commonly used blocks below. You can browse block categories by clicking on tabs or search for a block by typing in a keyword.

Image Showing How To Add A Block In Gutenberg

If you don’t want to use your mouse to click on the button, you can use a keyboard shortcut to search for and add a block by typing.

Rearrange Your Blocks

To rearrange your blocks without having to delete and re-add them, follow these steps: 

Select the block you want to move by clicking on it. 

An interface will emerge to the left of the block, allowing you to drag and drop the block to a new spot. Click and hold the rectangle composed of dots, then drag to a new spot. 

You can also use the arrow icons to move the block. The arrow icons will move the block one level at a time up and down.

Working with Blocks in The New Editor

Each block has its own toolbar, which shows on the block’s top. Depending on the block you’re editing, the toolbar’s buttons will vary. In this screenshot, we’re working on a paragraph block with basic formatting features, such as text alignment, bold, italic, insert-link, and strikethrough. 

Image Showing Working With Block Editor

Aside from the toolbar, each block can have its own set of block settings. These settings are present in the right column of the edit screen. You can drag and drop blocks or use the up and down keys next to each block to move them up and down.

Image Showing Working With Block Editor

Saving and Reusing Blocks in Gutenberg

One of the most appealing features of blocks is that they can be saved and reused separately. This is especially useful for bloggers who need to add certain content snippets to their articles on a regular basis. 

Click the menu button in the right corner of the toolbar for each block. Select the ‘Add to reusable blocks’ option from the menu. 

It will ask you to give this reusable block a name. After that, give your block a name and hit the save button. The block will now be saved as a reusable block in the block editor.  Now that you’ve created a reusable block, let’s look at how to use it in other WordPress posts and pages.

Make a change to the post or page where you want the reusable block to appear. Click the add block button from the post edit screen. 

Under the ‘Reusable’ tab, you’ll locate your stored block. You can also use the search bar to look for it by typing its name. 

If you hover your mouse over it, a short preview of the block will appear. To add the block to your post or page, now click on it.  All reusable blocks are saved in your WordPress database. You can manage them by selecting the link that says “manage all reusable blocks.” 

Image Showing Saving And Reusing Blocks In Gutenberg

This will take you to the page where you may manage your blocks. You can change or delete any of your reusable blocks from here. Reusable blocks can also be exported and used on any other WordPress website.

Image Showing Saving And Reusing Blocks In Gutenberg

Put Your Blocks in Groups

The Group block is a container that holds a collection of other blocks. Consider it a “parent” block that can include many “child” blocks.

Insert a Group block

To add a Group block, click on the + block inserter icon to open the block library and select the Group block:

Image Showing How To Insert A Group Block

After inserting a Group block, a block inserter icon will be displayed. It will allow you to add new blocks inside that Group block.

Navigating the Group block

After adding blocks inside a Group block, the Group block itself no longer shows. If you need to select the Group block again to access its settings, you can use the Block Navigation. It is present at the top of the editor screen.

Image Showing Navigating The Group Block

Blocks inside of a Group block are marked together by a single bold line. This line runs along the left side of all the blocks within that group.

Image Showing Navigating The Group Block

Using Block Patterns in the WordPress Block Editor

WordPress block patterns are a fun new method to use the WordPress block editor. You can use them to create pre-designed layouts for posts and pages. You can now create and share premade block layouts with WordPress block patterns.

Defining WordPress block patterns

WordPress block patterns are premade WordPress block layouts that are ready to use. Block patterns are a collection of WordPress blocks. These patterns enable users to create a variety of layouts with only a few clicks. 

Block patterns were first introduced in WordPress 5.5 as one of the top features. They paved the way for the WordPress block editor to become a full-fledged page builder. Block patterns were created to assist users in combining blocks. This allowed users to create the greatest designs possible for their page.

How WordPress block patterns work

The new WordPress block pattern system has helped to create the framework for a more dynamic, forward-thinking WP future. 

When WordPress block patterns are perfected, there will be a fully integrated interface. They will allow you to choose from a variety of patterns. When you come across a pattern that you wish to include in your design, click on it to have it put into your website or post. 

You won’t have to deal with a plethora of shortcodes. Neither would you have to figure out how to use sophisticated options in your themes anymore.

Using the WordPress block patterns

Use the “+” symbol in the top left corner of the WordPress page/post editor screen. With this, you may find the registered block patterns from your WP admin dashboard. 

Blocks, Reusable, and Patterns are the three tabs you’ll see. The Patterns page displays all your site’s available block patterns. You can add Block Patterns to your post/page like any other block.

Benefits of WordPress block patterns

When you learn the block patterns and start utilizing them, you’ll see how they add yet another layer of creativity to the Gutenberg editor.

Following are some of the benefits of using the WordPress block patterns:

  • Save time and frustration by using this method. 

The first thing you’ll notice is how much time you’ll save when it comes to building websites. WP block patterns collect common pre-designed page elements into a library of block patterns. You can use these in any post or page.

Developers may now put sophisticated layouts on their sites that would usually take hours to create using block patterns. Block patterns in WordPress will save you hours of time. 

Ever wondered why it was so difficult to create the personalized front page so that your theme’s demo appears well-crafted? 

By using WordPress block patterns, you may now create these kinds of pages on your own.

  • You can change the layouts for pages and posts at any time. 

Block designs are quite adaptable. In reality, you can delete or exchange individual blocks inside a pattern. You can also insert alternative patterns into a post and experiment with placement. 

  • Create Websites That Look Like Theme Demos 

We’ve all experienced the joy of seeing a stunning theme demo. The theme is then uploaded, and you have no idea how to duplicate it. Block patterns allow theme (and plugin) makers to give block patterns. You can use these patterns to duplicate home pages, about pages, portfolios, and other demo pages. You can do all this through the WordPress block editor.

  • Use Custom Block Combinations to Your Advantage 

Apart from its time-saving benefits, block patterns make it easier to give users more intricate and spectacular block combinations. 

This enables themes and plugins to provide their own custom block patterns. You can use these block patterns across a website without requiring any special coding.

  • Easily Change Themes 

Gone are the days when changing your site’s theme meant losing all your layouts. They provide a lot of design flexibility and save you a lot of time when recreating your layouts. 

This implies that if you change themes on your site, it will not affect the content of the block patterns. Even if your new theme doesn’t recognize the same patterns as the previous one, this holds true.

  • Make your own Block Patterns. 

Because they’re not too difficult to make, they’re also a wonderful page construction solution for beginners. To build bespoke patterns, you don’t need to be a coder or know HTML and PHP. Create your layout in the editor, then copy and paste the HTML into your plugin or theme code. You can duplicate those intricate layouts in seconds anywhere you want with WordPress block patterns.

Publishing and Managing Options in Gutenberg Block Editor

There is a lot of metadata in each WordPress post. This includes details such as the date of publication, categories and tags, highlighted photos, and so on. 

On the editor screen, all these options are organized in the right column.

Image Showing Publishing And Managing Options In Gutenberg Block Editor

Plugin Options in Gutenberg

You can use the API of the block editor by WP plugins to integrate their own settings into the edit screen. 

Some well-known plugins have already been made available as blocks. For example, WPForms, lets you use a widget block to insert forms into your content.

Image Showing Plugin Options In Gutenberg

Here’s how you can change your SEO settings in the new editor with Yoast SEO: 

Image Showing Plugin Options In Gutenberg

WooCommerce also has widget blocks. You can insert these widget blocks into any of your WordPress articles or pages.

Image Showing Plugin Options In Gutenberg

Adding Some Common Blocks in New Editor

The new editor can do all the functions of the original editor. But, you will be able to complete tasks much more quickly and beautifully than before. 

1. Using the new WordPress editor to add an image 

In the new WordPress editor, there is a ready-to-use picture block. Add the block and then upload or choose from the media library an image file. 

Image Showing Adding Some Common Blocks In New Editor

You may also drag and drop images from your computer into the editor. This will create an image block for you instantly. 

After you’ve uploaded an image, you’ll be able to access the block settings. Here you may add image info such as alt text, size, and a link.

Image Showing Adding Some Common Blocks In New Editor

2. Using the new block editor to add a link 

There are various blocks in the block editor where you can add text. The paragraph block, which has an insert link button in the toolbar, is the most widely used. 

The toolbar also has a link button for all other regularly used text blocks. 

Image Showing Using The New Block Editor To Add A Link

You may also use the keyboard shortcut Command + K on a Mac or CTRL + K on a Windows computer to insert a link. 

3. Using Gutenberg to create an image gallery 

The gallery block functions as the image block. After that, you upload or select image files.

Image Showing Using Gutenberg To Create An Image Gallery 

4. Using Gutenberg to add shortcodes to WordPress articles 

All your shortcodes will function the same way they did in the old editor. You can utilize the shortcode block or add them to a paragraph block.

Image Showing Using Gutenberg To Add Shortcodes To Wordpress Articles 

Exploring Some New Content Blocks in Gutenberg

By introducing new blocks, the aim is to address some long-standing usability concerns. 

Here are a few of our favorites that users will find quite useful. 

1. Using WordPress to add a picture next to some text 

Many of our readers were unable to add a picture next to text when using the old editor. With the Media & Text block, you can do this right now. 

Image Showing Using Wordpress To Add A Picture Next To Some Text 

This simple block is made up of two blocks. These blocks are positioned side by side, allowing you to add an image and text next to it.

2. Adding a button to posts and pages in WordPress 

In the traditional editor, adding a button to your blog articles or pages was a hassle. You could either use a plugin to create a shortcode for the button or go to HTML mode and type code manually. 

The button block in Gutenberg allows you to add a button to any post or page. 

Image Showing Button Block In Gutenberg

You can customize your button. You can do this by adding a link, changing the colors, and selecting one of three button designs.

3. Incorporating lovely cover pictures into blog content and landing pages 

The ‘Cover’ block, which allows you to add cover photos to your articles and pages, is another fascinating feature you should check out. 

A cover image is a larger image that is frequently used as the cover for a new section of a page or the start of an article. They have a lovely appearance and allow you to design interesting content arrangements. 

Create a cover block and then upload your own image. To generate a parallax effect when viewers scroll down the page. You can also choose an overlay color for the cover or make it a fixed background picture.

Image Showing Background Image Of Gutenberg Editor

4. Including tables within articles 

There was no way to insert tables into your WordPress posts using the traditional editor. In fact, the editing experience can be painful. You had to utilize a plugin or write custom CSS and HTML to make a table. 

The new Gutenberg editor has a default Table block. This makes inserting tables into your posts and pages a breeze. Specify the number of columns and rows you want to insert after adding the block. 

Image Showing How To Include Table Within The Articles

You may now begin filling in the table rows with data. If necessary, you can always add more rows and columns. Also, there are two basic style possibilities.

5. Creating content in many columns 

Another issue that the classic editor couldn’t solve was creating multi-column content. The Columns block in the block editor allows you to add two columns of paragraph blocks. 

This column block is quite adaptable. You can create up to 6 columns in a row, and each column can include other blocks.

Image Showing Creating Content In Many Columns In Gutenberg

This column block is quite adaptable. You can create up to 6 columns in a row, and each column can include other blocks.

Conclusion 

While the block editor is now part of the WordPress core, the Gutenberg project is far from complete. 

The core team is currently working on replacing WordPress widgets with the block editor. This will allow you to design navigation menus with blocks. 

These features aren’t available yet, but they’ll be soon. As a result, it will be beneficial to begin understanding the block editor interface as soon as possible! 

It will provide a more versatile content creation experience for most casual users.

Non-programmers will be able to create more complex layouts with extra features such as buttons, content embeds, and more. And, perhaps, this will aid WordPress’s continued growth.

 

Load More Related Articles
Load More By Janet Harbin
Load More In WordPress Plugins

Leave a Reply

Your email address will not be published. Required fields are marked *