Home » The Blog » WordPress » WordPress Block Basics

WordPress Block Basics

It's good to embrace change!

The Gutenberg block editor was controversial when added into WordPress 5.0. You either love the addition of blocks, or you hated them. Some folks hate it to this day.

The thing is, like life, change never stops in technology. So my advice, especially after all this time, is to embrace it.

For me, I’ve always embraced the new and jumped into using blocks – you can read all about that here. History shows the only way to go is forward.

With WordPress moving closer to Full Site Editing, blocks are something you want to embrace as well. So today, we’ll cover the basics — an orientation to help you wrap your head around using blocks in WordPress

What Exactly Are Blocks?

You have to designate paragraphs, headings, images, columns, and bulleted lists as you create your content. You needed to know the HTML tags to get that formatting the way you wanted back in the day.

WordPress included a visual WYSIWYG (What You See Is What You Get) editor with little buttons you could click to get these layouts without knowing the code. But with that, problems could be caused by incorrect use: bloated code, broken code, and layout issues.

Due to resistance from some, WordPress offered the Classic Editor plugin to keep things as they were. No change. But with that, folks fell behind embracing the inevitable—time to toss out that Classic Editor and move into the future.

Enter the Gutenberg Editor

Each element of your content is now a block. Want a new paragraph? Use a paragraph block. Want to add a headline? Use the Headline block. Bulleted list — yep, list block.

What’s neat about blocks is that each block has settings to allow you to customize that block further. That’s something that was not available with the visual editor. You needed to know code to extend things further.

All you have to do is choose from the available blocks on the left by clicking on the plus sign. You also have a plus sign icon to click and search the available blocks within your post.

How to choose a block.
How to choose from the available blocks.
Paragraph Block Options in the Sidebar

Basic blocks to choose from:

  • Text Blocks: Paragraph, Heading, List, Quote…
  • Media Blocks: Image, Gallery, Audio, Video…
  • Design Blocks: Buttons, Rows, Columns, Spacer…
  • Widget Blocks: Here is where you’ll find the standard and customary widgets as blocks that you were used to seeing in Appearance > Widgets.
  • Embed Blocks
  • Theme Specific Blocks
  • Plugin Specific Blocks

Each block has its own set of tools and customization options in the sidebar on the right of the screen. Make sure you are on the Block panel, and you can customize your block content even further.

I use the Kadence theme, which has its own set of blocks available for additional formatting options.

Reuseable Blocks

Once you customize a block, you can save it as a reusable block that you can then simply add in the future when needed.

The Basic Block Basics

Each block has its toolbar of options that will display above each block. For example, here’s the paragraph toolbar:

Paragraph block toolbar.
Paragraph Toolbar

You can drag the block elsewhere on the page by clicking the six dots or the up/down arrow. Next comes alignment, dynamic content, bold, italics, link, additional formatting tools, and the last three dots are even more options. Just for that paragraph!

Paragraph block "more" toolbar.
Paragraph Toolbar “More” Options

Here’s the toolbar and sidebar for lists:

List Block Toolbar

List Block toolbar.
List Block Toolbar
  • For each block, you’ll have options in the toolbar above each block and in the right sidebar of the page you are working on.
  • Always be sure to check both so that you are aware of all the options available to you.

List Block Sidebar Tools

List Block sidebar tool options.
List Block Tools in the Sidebar

So as you can see, you have a whole slew of different options depending on the block you are using.

To get the above layout, I used the column block. I used a Headline block, Image block, and List block in the left column. In the right column is a Headline block and an Image block. The fancy icon checkmarks in my lists are courtesy of the Kadence Pro Icon list block with many styling options.

When selecting the column block, you can choose how many columns and spacing. Next, you load up each column with the blocks you want. One or several — it’s up to you.

Column block options.
Columns Block Layout Options

There is no need to know any code; just choose your block and customize it. Pretty cool, right?

Transform a block?

Let’s say you started a block as a paragraph and then decided the content would be better if it were displayed in a list? Then, click on the toolbar icon for that paragraph, and just transform it!

Transform a Block Options

More Blocks

There are a bunch of block plugins you can install on your website to add even more block options to make your website content precisely the way you want it. Here are a few that I’ve used and can recommend:

Experiment, Test, and Play

Create a page or post that you leave in draft mode to get your feet wet. Then, click around and add blocks and get familiar with all the tools available to you. When you are unsure whether a block will fit the bill, open that draft to test it out first until you are comfortable.

There is no way to detail all the available blocks and the possibilities. Instead, I hope to help you wrap your head around a new way of thinking when creating your website’s content and layout with this article.

Once you “get it” and the light bulb goes off, you’ll wonder, just like me, how I ever lived without blocks. So click around and play, you won’t break anything, and that’s how we all learn.

What are you going to create today?

Judith: WordPress Consultant and Business Coach
WordPress website products and services you can trust!