Quick Tour of the WordPress Block Editor

You are here:
Estimated reading time: 5 min

In this article we give you a quick tour of the Block Editor. The block editor was released along with WordPress 5.0 in December 6th, 2018, also called the WordPress Gutenberg editor. It introduced a new approach to content editing with different types of “blocks”.

A lot of people use the Classic Editor plugin to keep using the previous WordPress editor but I think this is a mistake. WordPress, just like any other software, evolves and we need to move right alongside it. Which is why I bring you this tour and urge you to use the block editor as much as you can so you get used to it and are able to adapt quickly when new changes come our way (which they will, hello Full Site Editing!). .

Viewing the Block Editor Intro

When you have a brand new site and you try to create a post or page you will see a brief intro to the block editor. Like most people I dismiss this as soon as I see it, but when preparing for this demo I went searching for it. I found it in the sidebar, but first you have to create a new Post/Page.

Create a new post or page

At the top right side of the screen there are three dots, click them and a menu will appear with new options. What you are looking for is in the TOOLS section under “Welcome Guide”. This will show you the block editor intro.

Welcome guide to the block editor

If you follow the brief tour, you can get to know a few of the main features of the editor.

Block editor intro

Creating a Block

Once you have created a new post/page WordPress will guide you by showing you several ways you can add blocks into the page. The first one is a sentence guiding you saying “Start writing or type / to choose a block”. Typing the slash (/) symbol will bring up a list of blocks.

There will also appear a black box with a white cross. This square/box appears when you are hovering around the page and it indicates you can click there to create a block.

The third place to add a block is right at the top left of the page next to the WordPress logo. A blue square/box this time, this one will show an entire list of blocks for you to use.

Different ways to create blocks

There are several types of blocks: Text, media, design, widgets, embeds. There is a search bar on top of these blocks so you can find your block more easily. Below the search bar you can see three different types of blocks, normal blocks, patterns and reusable blocks. Patterns are groupings of blocks that you can use to make your content more appealing. Reusable blocks, are blocks you create with content that repeats itself several times in your website and you save them to a reusable block. That way you can just edit one instance of the block and all the others will change accordingly.

List of blocks, patterns and reusable blocks

Block Categories

Here is a look at those types of blocks (design, text, media, widgets, embed). Make sure to play around with them, adding them to your posts to see what different effects you can create. The columns block in the Design area is especially helpful because you can divide your page in sections.

Embeds

Testing Out Different Blocks

Lets create a heading for our post. We’ve already given the post the title of “Using the Block Editor” and I’ve clicked on the black square to open up the most common or latest used blocks.

Create a heading block

After a heading we can add a paragraph of text to the post. If you notice under the blue “Publish” button we have the word “Document” underlined in blue, if we click on “Block” which is next to it we will see different ways to customize our heading/paragraph. We’ll see this a little bit later.

Create a paragraph block

Changing the Type of Block

Let’s say you want to change your paragraph to a heading or another type of block (like a quote, list, etc) you can do so by clicking on the left side of the block bar.

Change the type of block

Inserting an image block

Hover over the page to find the black square and click on it. Select the image block to create one.

Creating an image block

Once we have chosen the image and it is displayed on our post we can click on the “Block” section of the right sidebar to see what customizations can be made. For images you can change the style, the size and add some alternative text that describes your image to someone that can’t see it (perhaps it failed to load or the link was broken).

Image block settings

Block Patterns

Patterns are combinations of types of blocks like for example a headline and two columns of text below it. It can also be special items like buttons or images and text together. Patterns are built into WordPress. Theme/plugin developers can add custom block patterns programmatically using the register_block_pattern function.

Patterns

Below you can see more pattern samples with images included.

More sample patterns

Once you add a block pattern you can click on the sidebar to edit it at the block level. Here you can see you can change the color of the text. You can also change the font size.

Changing color of a block

Reusable Blocks

Reusable blocks are blocks of information that are saved to be used over and over again in different places of your website.

Reusable blocks

In order to create a reusable block you select the text/image you want and then click on the three dots at the right of the block bar to open the menu. Choose “Add to Reusable blocks”.

Adding reusable blocks

When you select a block that is reusable you will see its name at the left top corner of the block. At the right side you can click the button to edit the content of the block. Remember, these changes will affect all the other instances of this reusable block (meaning you change one and all the others will change).

If you want to use a reusable block but later want to change just that instance, you can click on the three dots and you will have the option to “Convert to regular block”.

Reusable blocks

Gallery

For the gallery you simply choose the images you want and create the gallery.

Create a gallery block
Choosing the gallery images

On the right sidebar you can see at the block level we can customize our gallery. You can add or reduce columns (default is 3) and you can link the images to themselves (to show in full screen).

Manage your gallery

Other useful blocks

The “Page break” block makes it so that your post is divided into different pages instead of just one big page. This helps readers consume your content more comfortably.

Page break

The “Read More” block shows WordPress where to add that read more link in the main blog page. This doesn’t work in all themes because most themes manipulate the summary that is shown at the blog/archive page so it suits their design. But technically that’s what the “Read More” block should do.

Read more block

The “Separator block” helps give your content a little bit of division. It comes from the HTML tag <hr> and is generally a line that goes from start to end of the page but with the block we can make it a smaller line and can change its colors, styles and width.

Separator Block

The spacer block is handy when you want to give paragraphs or items in your page some space in between one another. You can drag the block to make it bigger or smaller.

Spacer block

Conclusion

The block editor is here to stay and there are bigger and better plans for it, so I think it’s a good idea that you get used to writing your content with it. If you go and see the WordPress roadmap you will see there is a lot of mention of Gutenberg in it.

Resources

WordPress roadmap – https://wordpress.org/about/roadmap/

Lorem Ipsum – https://www.lipsum.com/

Thank you for reading.

Was this article helpful?
Dislike 0
Views: 29