Adding Blocks in the WordPress Editor

This edition of WordPress Wednesday takes a closer look at how to add blocks to a WordPress page or post. It turns out, WordPress is super flexible and makes it oh-so simple to add any type of block you need to make your content look amazing!

What Are Blocks?

Thanks for asking to make sure we’re all on the same page! Blocks are essentially like placeholders for different kinds of content – text, rich media, divider elements, and more. To build the layout of a page, blocks are added as rows or columns. For more advanced structures, content within each page/blog can be added, edited, duplicated, and moved, as well as saved for future use.

Each time you create a new page or post, a paragraph block will automatically be added by default. However, you need more than just a title and a big block of text in a paragraph block! So, let’s review how to add blocks.

Adding Different Types of Blocks

You can pull up all your block options from a couple different areas in the editor. First, you can click the “plus” sign in the top left corner of the editor to reveal all available blocks. When you click the plus sign, a small window pops up. If you know which block you want to add, you can use the search bar that appears at the top of the window. Beneath the search bar, WordPress offers several submenus. Click on the drop-down arrow to see the block types within each submenu. Click on the drop-down arrow again to collapse the list and return to the other list options. Here are the list options and the types of blocks included in each:

• For your convenience, your “most used” blocks list appears first.
• The “common blocks” list includes those that are most popularly used in WordPress because they are essential elements every WordPress user will need at some point (e.g., paragraphs, images, lists).
• “Formatting” blocks help enable you to apply custom stylization, and elements to a page, including custom HTML, pre-written code, and pull quotes.
• “Layout element” blocks are for those pieces of a page that need a designer’s touch. These blocks include things like buttons, line breaks, columns, and more.
• “Widget” blocks are the ones that you add to the sidebar of a blog, such as archives, categories, and so on.
• “Embed” blocks enable you to bring in content from elsewhere on the web, including videos, audio playlists, and social media feeds.
• “Reusable” blocks are, well, reusable! Once you create on your own, and as you build more pages for your site, you’ll find there are certain elements worth replicating across them. You can use this feature to do that.

Adding a Block

To add a new block to the page, navigate to the block type from your options (above), click your choice, and WordPress will drop it in for you. But let’s quickly explore a few more ways to add a new block.

You’ll notice there is another “plus” sign below the last block on your page. As with the plus sign on the top menu, you click it to reveal your block options. When you select a block, WordPress will drop it in below the current block.

A “plus” also sign appears when you hover over the top of a block. You can use this option to insert a block between two existing block elements.

Finally, you can quickly add a block of the same type from any existing block. To do this, click on the block and select the “more” option button on the right of the toolbar. WordPress then gives you the option to “insert before” or “insert after.” By clicking insert before/after, you will respectively add a new block in the same style directly above or below the existing block.

Moving Things Around

If you’re unhappy with where the block has been placed, there is no need to delete it. Simply use the up and down arrows to the left to shift the order of the blocks. Once you have your blocks in place, create the custom content that belongs in each.

 To adjust the settings for any blog, you can do so with the basic toolbar that appears directly above the blog. You can also use the sidebar on the right, which includes more advanced settings for HTML anchors, and more. If you prefer to hide the sidebar, click on “more options” on the toolbar and choose to hide block settings. And who doesn’t like more options? So, let’s take a look at a few worth taking knowing.

“Duplicate” allows you to create the same block directly below the existing block. Duplicating a block preserves the settings, so you can focus on populating the block with content. “Edit as HTML” changes this block to HTML format. If you prefer the visual editor, simply click to return to visual.

You may also add any block to your list of reusable blocks, making it easier to replicate any block of content across the site. Select “replicate,” give the block a recognizable name, and save it. When you return to the “add blocks” areas, and you’ll find your new reusable block listed there! One final thing you can do under more options is to remove a block, which will delete the block entirely from the page.

As you can see, there are a number of ways to add new content using Gutenberg blocks. Play around with your options and see what feels easiest and most natural to you. You’ll be a power user before you know it!