How to Use the WordPress Block Editor (Gutenberg Tutorial)

The block editor in WordPress is the default tool we now use to write content and edit sites. It was launched in 2019 and is affectionately known as "Gutenberg". This new editor replaces the old classic editor that came before it. The block editor is exceptionally simple and intuitive to use, and it is capable of creating content and editing WordPress sites.

What is the difference between the Block Editor (Gutenberg) and the Classic Editor?

Before we dive into the block editor, let's compare and understand the differences between the Gutenberg block editor and the old classic editor.The classic editor in WordPress is shown below:

It has a text editor box with some basic formatting options. It has very limited functionality and visual appearance.The block editor in WordPress is shown below:

As you can see, they are two completely different editors for creating content in WordPress. The old classic editor is a text editor with formatting buttons similar to Microsoft Word. The new editor uses a different approach called "blocks" (hence the name "Block Editor").

Blocks are content elements that can be added to edit screens to create layouts. Each item added to a post or page is a block. For example, blocks can be added for paragraphs, images, videos, galleries, audio, lists, and more. All common content elements have blocks and more can be added through WordPress plugins.

What are the advantages of WordPress Block Editor over Classic Editor?

The WordPress block editor provides an easy way to add different types of content to posts and pages. For example, previously, if you wanted to add tables to content using the classic editor, then a separate table plugin was required. With the block editor, you can simply add a table block, select the columns and rows, and start adding content.

Content elements can be moved up and down, edited as individual blocks, and rich media content can be created with ease. Best of all, the WordPress block editor is easy to use and learn. This offers a huge advantage to all WordPress beginners who are just starting their first blog or building a DIY business website.

That said, let's see how to use the WordPress block editor to create great content like a pro.

Using Gutenberg - WordPress Block Editor

The block editor is designed to be intuitive and flexible. Although it looks different from the old WordPress editor, it still does everything you can do in the classic editor.

Creating a new blog post or page using the block editor

Start creating a new blog post or page as usual. Simply click the WordPress Administrator in thePosts " Add New PostMenu. If you want to create a page, go to Page"Add newMenu.

This starts the block editor.

How to add blocks in the block editor

The first block of each post or page is the title. You can use the mouse to move under the title or press the Tab key on your keyboard to move the cursor down and start writing.

By default, the next block is a paragraph block so that the user can start writing. However, if you want to add other types of content, it's easy. Simply click the "Add New Block" button [+] in the upper left corner of the editor, or click this button below or to the right of an existing block to add a new block of content.

Clicking this button will display the Add Block menu with a search bar at the top and frequently used blocks below. You can click on the tabs to browse block categories or enter a keyword to quickly search for a specific block.

If you don't want to use the mouse to click on the buttons, then you can also use keyboard shortcuts. First type / to search for a block and then press Enter on your keyboard to insert it.

Using blocks in the new editor

Each block has its own toolbar, displayed at the top of the block. The buttons in the toolbar will change depending on the block you are editing. For example, in the screenshot below, we are developing a paragraph block that displays basic formatting buttons such as text alignment, bold, italics, insert link, and more options available under the three-dot menu.

In addition to the toolbar, each block can have its own block settings, which are displayed in the right column of the editing screen. These settings vary depending on the block being edited. For example, the Paragraph block allows you to edit the text, background, link color, and layout.

It is possible to move blocks up and down and rearrange them. If you want to perform this operation, just click Drag and Drop or click the Up and Down buttons in the block toolbar.

Organize blocks by groups and columns

The Block Editor also comes with handy tools to manage and organize your content layout. Multiple blocks can be selected by clicking on them while holding down the Shift key on your keyboard.

After that, go ahead and click the Block Type button in the toolbar to convert the selected block to a group or column. Styles can then be applied to the entire group of blocks, such as changing alignment or spacing.

The block editor can also add empty group or column blocks. They can be filled with other blocks later.

Any type of block can be added to each column as needed. This allows you to create nice layouts for different used columns.

Preserving and Reusing Blocks in Gutenberg

The best advantage of using blocks is that they can be saved and reused. This is especially useful for website owners and bloggers who often need to add specific pieces of content to their posts or pages. Simply click the menu button located in the upper right corner of each block's toolbar. Select the "Create Pattern" option from the menu.

Attention:You can also save entire groups and columns as reusable blocks. This way, you can save entire sections and use them quickly when you need them later. To save as a reusable block, simply click on the relevant option and a window will pop up. In this window, you will need to give the block a name so that you can easily find it when you need to use it later. Also, you can choose a category to save the block in. This way, you can manage these reusable blocks in a more organized way.

Next, click the Create button to save your pattern. WordPress will store your pattern and all the blocks in it. To reuse your pattern, simply edit the post or page you want to add it to. Then, click the [+] Add Block button or use the / keyboard shortcut. The pattern can be found by typing the name you specified.

The patterns feature makes it easier for website owners to add some common elements to their page layouts, such as catchy banners, social media sharing buttons, banner ads, and more. The WordPress theme or plugin you choose may come with some patterns, or you can go to the WordPress block pattern gallery to find patterns shared by others and see if there are any favorites.

Publishing and managing options in the Gutenberg block editor

Every WordPress post contains tons of metadata. This includes information such as post date, categories and tags, featured images, and more. All of these options are neatly placed in the right column of the editor screen.

Plugin Options in Gutenberg

WordPress plugins can integrate their settings into editing screens using the block editor API. Some popular plugins come with their own blocks. For example.WPForms, the best WordPress form builder plugin to add forms to your content using blocks.

Other WordPress plugins may also add their settings to the Block Editor screen. For example, the followingAll-in-one SEO for WordPressHow to allow editing of SEO settings at the bottom of the block editor:

Similarly, if you run an online store using WooCommerce, then you will notice that it also has its own blocks. These blocks allow you to add products to any WordPress posts and pages.

Adding some common blocks to the block editor

Basically, the block editor is powerful and fully capable of doing the job done by the old classic editors. Not only that, using it, your work will become faster and smoother. What's even more impressive is that it comes with even more new features, such as providing rich no-code options to design content easily. Here are some common blocks to easily use it as needed.

1. Adding images to the WordPress block editor

The WordPress block editor has a ready-to-use image block. Simply add the block and then upload the image file or select it from the media library.

It is also possible to drag and drop images from your computer and the editor will automatically create image blocks. After adding an image, you will see the block settings where you can add metadata about the image, such as alternative text, image resolution size, and add a link to the image.

2. Adding links in the block editor

The block editor comes with several blocks in which you can add text. The most commonly used is the paragraph block, which has an Insert Link button in the toolbar. All other commonly used text blocks also have a link button in the toolbar.

Links can also be inserted using the keyboard shortcut Command + K on a Mac or CTRL + K on a Windows computer.

3. Adding a photo gallery to Gutenberg

The gallery block works similar to the image block. Add it and then upload or select an image file.

4. Using Gutenberg to add shortcodes to WordPress posts

All shortcodes used in the Classic Editor also work perfectly in the Block Editor. They can be inserted directly into paragraph blocks, or you can choose to use specialized shortcode blocks for this purpose.

Explore other content blocks in the block editor

The Gutenberg editor promises to address some long-standing usability issues in WordPress by introducing some new blocks.

1. Add images next to some text in WordPress

With older editors, many users were unable to place images next to text. However, it is now possible to perform this step using media and text blocks.

This simple block contains two blocks placed side by side, allowing you to easily add images with some text next to them.

2. Adding buttons to WordPress posts and pages

Adding buttons to blog posts or pages was a real headache in previous editors. You might have to find a specialized plugin to generate the shortcode for the button, or just switch to HTML mode to write the code manually. Luckily, Gutenberg Editor has a built-in button block that allows you to add buttons to any post or page easily and quickly, so you don't have to worry about it anymore!

You can add links to buttons, change colors, and more.

3. Add beautiful cover images to blog posts and landing pages

Another great feature is the cover block. It allows you to easily add a cover image or a background cover with colors to posts and pages. The cover image is generally wider and is often used as a decoration for a new part of the page or the beginning of a story. It looks especially beautiful and also helps you create eye-catching content layouts.

It's easy to use, just add a cover block and upload a favorite image. There's also the option to add an overlay color to the cover, or set it to a fixed background image so users can create a super cool parallax effect when scrolling down the page.

4. Creating tables in articles

Adding tables to WordPress posts is not an easy task in the classic editor, one has to create them with the help of plugins, or write your own CSS and HTML code. But here comes the good news, now the block editor has a default table block built-in that makes it easy and quick to add tables to posts and pages. Simply add this block, then select the number of columns and rows you want to insert, and you're done!

You can now go ahead and start adding data to the table rows. More rows and columns can be added at any time if needed, and there are two basic styling options available.

5. Creating multi-column content

The classic editor is really not very powerful when it comes to creating multi-column content, which gives a lot of people headaches. It's good that the block editor provides us with the column block feature, which can easily get two columns of paragraph blocks with a simple addition, making our content presentation more varied and flexible.

This column block is very flexible. You can add up to 6 columns in a row and even use other blocks in each column.

Additional tips for professional use of Gutenberg

You might be worried that using the block editor won't take more time to add and tweak blocks than to actually create content. Actually, don't worry at all, the block editor is super fast. With a little bit of familiarization, you can easily add all kinds of blocks without much thinking at all. I'm sure you'll soon find that using the block editor makes your workflow faster and smoother.

Here are some additional tips for advanced users to help you get up and running with the WordPress Block Editor faster.

1. Move the block toolbar to the top

You may have noticed in the screenshot above that there is a toolbar at the top of each block. You can move this toolbar to the top of the editor. Simply click the three-dot button in the upper right corner of the screen and select the "Top Toolbar" option.

2. Use keyboard shortcuts

Gutenberg comes with a couple handy shortcuts to make your workflow faster and easier. The first is /. Simply type /, start typing, and the editor will show you matching blocks that can be added immediately. For more shortcuts, go ahead and click the three-dot menu in the upper-right corner of the screen and select Keyboard Shortcuts.

A pop-up window will appear here with a list of all the keyboard shortcuts you can use. This list will have different shortcuts for Windows and Mac users.

3. Drag and drop media to automatically create media blocks

Gutenberg lets you drag and drop files anywhere on the screen and it will automatically create a block for you. For example, a single image or video file can be placed and it will create the block for you. Or, multiple image files can be deleted to create a gallery block.

4. Add YouTube, Twitter, Vimeo and other embedded content

The Block Editor makes it easier to embed third-party content into your WordPress content. All popular third-party services have blocks.

Feel free to copy and paste the embed URL and it will automatically create a block for you. For example, if you add a YouTube video URL, then it will automatically create a YouTube embed block and display the video.

The default embedding options don't apply to Facebook and Instagram embeds, but there is a workaround for that, which I'll tell you about later.

Adding More Blocks to the Gutenberg Block Editor in WordPress

Block editor developers in WordPress can create their own blocks. There are some excellent WordPress plugins that offer block bundles for new editors.

Here's a couple:

1. Spectra WordPress Gutenberg Block

Spectra WordPress Gutenberg Blocksis a block library containing many advanced blocks to add more design elements to the content.

Spectra by Popular Astra WordPress Themeswas created by a team of developers that can help you create beautiful designs without writing any code.

2. PublishPress blocks

PublishPress Blocksis another powerful block library with additional blocks to extend the Gutenberg block editor. It includes nice layout options, sliders, buttons, icons, image gallery, maps, tabs, recommendations, accordions (accordions) and more.

3. Stackable - Gutenberg Blocks

Stackable - Gutenberg BlocksIs a collection of beautifully designed Gutenberg blocks to use them on your website. It includes blocks for containers, posts, feature grids, accordions, image boxes, icon lists, call-to-action phrases, and more.

Hopefully this Gutenberg tutorial will help you learn how to use the WordPress block editor.