Gutenberg

Basics

Gutenberg is the default WordPress page builder and content editor. It is a WYSIWYG block editor that started as a simple drag-and-drop web design tool with limited objects and tools. Over time, many objects and tools have been added based on user feedback. This had a positive impact on existing users who know their way around the application, and each new tool makes the software more powerful. However, if you’re not very experienced, it can feel a bit overwhelming, and that’s where blocks come in handy!

Blocks are content elements that you add to the editing screen to create content layouts. Each item you add to your post or page is a block. With Gutenberg blocks, you can easily drag and drop predefined blocks (headings/footers, text blocks, forms) onto any page, so you have the basic layout ready in just a few minutes. You can add blocks for each paragraph, images, videos, galleries, audio, lists, and more. There are blocks for all common content elements, and additional ones can be added by plugins. With the block editor, you can simply add a table block, select your columns and rows, and start adding content.

Using Gutenberg – WordPress Block Editor

If you have experience with the old WordPress editor, you can see how it looks different from Gutenberg. It has the same functionality as the old one, and you can do everything you could before. Let’s start by covering the basic things you used to do in the classic editor and how they are done in the block editor. Creating a new blog post or page with the block editor

You will start creating a new blog post or a new page by simply clicking on the “Posts” menu and selecting “Add New” in the admin panel. If you’re creating a page, go to the “Pages” menu and select “Add New.”

This will start the block-editor.

How to add a block in Gutenberg

The first block of every post or page is the title. You can use the mouse to move below the title or press the tab key on the keyboard to move the cursor downward and start typing.

By default, the next block is a paragraph block. This allows you to start typing right away.

However, if you want to add something else, you can click on the Add new block (+) button in the top left corner of the editor, below an existing block, or on the right side of a block.

If you click on the button, the Add block menu will appear with a search field at the top and common blocks below.

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

Working with blocks in the new editor

Each block comes with its own toolbar that appears on top of the block. The buttons in the toolbar change depending on the block you are editing. For example, in the screenshot below, we are working in a paragraph block that displays basic formatting buttons like text alignment, bold, italic, insert link, and more.

In addition to the toolbar, each block can also have its own block settings that would appear in the right-hand column of your editing screen.

The block editor comes with handy tools to manage and organise your content layouts.

You can select multiple blocks by clicking on them while holding down the SHIFT key on your keyboard.

The blue outline indicates which blocks are selected.

Then you click on the block type button in the toolbar to transform the selected blocks into groups or columns.

You can then apply styles to the entire group block, such as changing their alignment or spacing.

The block editor also allows you to add an empty group or column block. After that, you can fill them with other blocks.

“Select “Columns” or “Group”.

The block editor also allows you to add an empty group or column block. After that, you can fill them with other blocks.

When you select “Group,” a blue box with a ‘+’ sign should appear.

To add to the group, click on the ‘+’ sign and choose the type of block you want to add. You can then fill each column with any type of block to create beautiful layouts.

Save and Reuse Blocks in Gutenberg

One of the best things about blocks is that they can be saved and reused. This is especially useful for those who run blogs and websites where you often need to add specific snippets of content to your articles or pages.

Just click the menu button in the right corner of each block’s toolbar. From the menu, select the “Add to Reusable Blocks” option.

You must enter a name for your reusable block so that you can identify and reuse it later.

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

Now that you’ve saved a block, let’s see how to add the reusable block to other WordPress posts and pages on your site.

Simply edit the post or page where you want to add the reusable block. From the post editing screen, click the Add Block button.

You will find your saved block under the “Reusable” tab. You can also find it by typing its name in the search bar.

You can hover your mouse over it to see a quick preview of the block. Just click on the block to insert it into your post or page.

All reusable blocks are stored in your WordPress database, and you can manage them by clicking the “manage reusable blocks” link.

This will take you to the block manager page. From here you can edit or delete all your reusable blocks. You can also export reusable blocks and use them on any other WordPress site.

Note! You can also use entire groups and columns as reusable blocks. This allows you to save entire sections and use them when needed.

Publishing and management options in the Gutenberg Block Editor

Adding an image to the WordPress block editor

There is a ready-made image block in the WordPress block editor. Just add the block and then upload an image file or choose from the media library.

You can also drag and drop images from your computer, and the editor will automatically create an image block for it.

After adding an image, you will be able to see the block settings where you can add metadata for the image such as alt text, size and add a link to the image.

Adding a link to the block editor

The block editor comes with several blocks where you can add text. The most common is the paragraph block which comes with an insert link button in the toolbar.

All other regular text blocks also include a link button in the toolbar.

You can also insert a link using the keyboard shortcut, which is Command + K for Mac and CTRL + K on Windows computers.

Adding an image gallery to Gutenberg

The gallery block works like the image block. You add it and then upload or select image files.

Explore some new content blocks in Gutenberg

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

The following are some of our favourites that we think users will find immensely helpful.

Adding an image next to some text in WordPress

Adding a button to WordPress posts and pages

Adding beautiful cover images to blog posts and landing pages

Another cool feature you might want to try is the “Cover Block”, which lets you add cover images or color background covers to your posts and pages.

A cover image is a wider image that is often used as the cover for a new section of a page or the beginning of a story. They look great and allow you to create engaging content layouts.

Just add a cover block and then upload the image you want to use. You can choose an overlay colour for the cover or make it a fixed background image to create a parallax effect when users scroll down the page.

Create tables inside articles

The classic editor did not have a button to add tables to your WordPress posts. You had to use a plugin or create a table that wrote custom CSS and HTML.

The Gutenberg editor comes with a standard table block, making it super easy to add tables to your posts and pages. Just add the block and then select the number of columns and rows you want to insert.

You can now go ahead and start adding data to table rows. You can always add more rows and columns if needed. There are also two basic style options available.

Create multi-column content

Creating multi-column content was another issue that the classic editor didn’t handle at all. The block editor allows you to add a column block, which basically adds two columns of paragraph blocks.

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