What are WordPress blocks and how do they work?

What are WordPress blocks?

‘Blocks’ are a common feature of modern website building platforms like WordPress. If you’re already using the latest version of WordPress (5.0+) then you’re already acquainted with blocks.

Each item you add to your post or page is a block. You can add blocks for paragraphs, images, videos, galleries, audio, lists and more. There are blocks for all common content elements—and more can be added by plugins.

How to use WordPress blocks?

WordPress blocks are available whenever you start to create content in a post or page. For example, paragraphs and images all live inside blocks. A panel on the right-hand side shows the controls available for the current block.

Block properties panel for a paragraph ‘block’.

To use blocks, you need to type your content first. After a paragraph ends, just press [Enter] and WordPress will automatically arrange it using blocks.

If you want to add other things like images or links, then you need to click the ‘+’ button hovering near the right-hand page margin and your preferred image or link etc. will be added and arranged neatly.

Click the black ‘+’ button to add a new content block.

This button should be hovering somewhere around the right-hand page margin.

There are different types of blocks available in WordPress. By adding blocks you build up the content of the page. You can change the heading format or heading style, design, pattern etc.

As of WordPress 5.0 the available block types are:

• Heading

• Custom HTML

• Form

• Code

• Shortcode

• Image

• Preformatted

• Table

• Button

• Columns

• Gallery

• List

• Quote

• Pullquote

• Page Break

• Separator

• Spacer

• Audio

• Video

• Cover Image

• File

• Embedded links of external platforms like Twitter, Facebook and YouTube

Block wrapper

With every block comes a special block wrapper that allows you to rearrange and edit blocks easily. Additionally, you can change the position of a block or move it downwards or upwards in the page with ease. You just need to hold and drag an intersection between blocks (your cursor should change to indicate this). With practise—it becomes a breeze.

In earlier versions of WordPress, users had to cut and paste instead of dragging blocks. Often, the entire document was lost during the editing process. The new block system makes everything simple (at least for straightforward layouts).

Block benefits

This feature has made editing WordPress content far easier in most cases.

1. Blocks are user-friendly—you don’t need to be an expert to create and edit content.

2. Blocks are customisable—for example, you can change the background colour to call out a certain paragraph/section.

3. The standardised nature of blocks leads to a more consistent look and feel.

4. No more problems with copying and pasting content.

5. Rearranging/reordering blocks is straightforward—makes updating layouts easy.

6. Doesn’t alter the viewer’s experience—blocks are a useful feature for content creators. The website viewer won’t see them.

Final note of caution

For those of you that more familiar with HTML, CSS etc. you may be tempted to jump straight into the code to make changes to the appearance. In my experience, it’s best to stick solely to the block/visual editor if possible.

The block editor is useful, but it doesn’t cope well with complex or improperly formed HTML. I recently spent ages trying to unpick a WordPress page containing a mix of block- and hand-written code. The two were hopelessly mixed up—full of deeply nested and improperly closed tags. So be careful as you work. And consider making a duplicate of your page or post before making extensive changes—that way you always have a backup.