Definitions

Interacting with modern WordPress means you’ll hear the terms “Gutenberg” and “Blocks” a lot. Gutenberg is the name for the new content editing experience introduced to WordPress in late 2018. 

Blocks are the actual elements used to build your page such as headings, text, images, columns, and so on. 

When people talk about Gutenberg, they’re usually referring to the “block editor” which is the interface you actually work in when editing a page or post. The old interface style is typically called “classic editor” or by its techie name of TinyMCE. 

Another important term is the word “Core.” When people say Core, they are referring to the native WordPress experience with no extra plugins or themes added on top. We’ll cover more on this later. 

So now when you read other content or watch tutorials, you’ll know what the terms Gutenberg, Blocks, and Core actually mean. 

First Question

One key thing you have to decide up front is whether building your content with Blocks is the right approach for you. 

Some of the key advantages of building with Blocks in WordPress are: 

1. You’re closer to Core WordPress
   1. Page builders come and go, and migrating between them can be a pain
2. Extremely fast and performant
   1. Load times, both backend and frontend, are extremely fast out of the box
3. Can be as simple or as complex as you need it to be
   1. Tailor the editing experience to be exactly what your end-users need 

Some of the cons to building in Blocks vary based on personal taste and experience levels, but in general you’ll find the following:

1. Core blocks are extremely limited
   1. You’ll need to add a block package, slightly reducing the “closer to core” advantage I mentioned earlier 
2. Workflow changes coming from a WordPress page builder can feel jarring
3. The block editor is developing rapidly in some ways and not at all in others

Ultimately for me, the decision comes down to stability, performance, and the custom tailored editing experiences I can create for clients with Blocks. 

I spent many years with page builders such as Oxygen, WP Bakery, etc and Blocks has been a great fit for my personal sites and client projects. 

Choose a Block Package

One of the first decisions you’ll need to make is picking a Block Package. This is essentially just a WordPress plugin that extends the features and types of blocks available to you. 

WordPress core blocks are extremely basic and leave a lot to be desired when it comes to styling and layout controls, so you’ll want a Block Package to enhance your site. 

There are a number of free and paid block packages. My personal favorite is called GenerateBlocks and the free version is very useful. 

There are many other popular block packages like Kadence, Stackable, Greenshift, and more. 

Any block package you choose will have a different philosophy and feature set. I chose GenerateBlocks despite the fact that it has “fewer” blocks as compared to Kadence and Stackable. 

GenerateBlocks allows me to build anything I need in any way I want, without having the extra clutter that comes with pre-built blocks like Info Boxes, Cards, and hero sections. 

Any pre-built block like those I just mentioned can be created using a simple selection of blocks added by GenerateBlocks, such as the headline, image, and grid. 

Because of that, I don’t want my block package to add a bunch of extra junk I’m never going to use. 

With that said, if you prefer to have a large selection of pre-built blocks and not make your own, you might want to consider Kadence or Stackable for your website. 

It is possible to have more than one block package installed, and it’s possible to switch between them, but not without headache in both cases, so I’d recommend you stick to one block package per site. 

Another consideration is that both GenerateBlocks and Kadence have a theme that tightly integrates with the Block Package, so it likely makes sense to use both the Block Package and corresponding theme. 

For GenerateBlocks, the corresponding theme is called GeneratePress and for Kadence the theme is also called Kadence. 

Later in this tutorial, I’m going to show you how to work with the Block Editor in detail, and I will also install both GenerateBlocks and GeneratePress. 

Install Your Block Package & Theme

Once you’ve decided which Block Package is right for you, we will start by installing the plugin. 

In your WordPress admin dashboard, hover over plugins and click Add New.

We’re going to type GenerateBlocks into our search bar and press enter. Then, you’ll see the plugin and we’ll click install, then after a moment we can also click activate. 

Now that we have the Block Package installed, I will hover over appearance and click themes in the backend here. You can see I have the default 2023 WordPress theme installed which will work perfectly fine with GenerateBlocks, but not as seamlessly as with GeneratePress as our theme. 

Again, you’re not required to use GeneratePress but as compared to the default WordPress theme, it’s far more flexible and looks way better out of the box. 

So, let’s go ahead and click Add New, search for GeneratePress, and install & activate that theme as well. 

With the block plugin installed and our theme active, we are now ready to really dig into the interface and how to work with Blocks. 

Key Interface Areas

At this point, the most likely place you’ll want to start editing is your home page. Let’s go ahead and begin there. 

Let’s click the pages button in our admin sidebar, then click Home. 

Once the interface is loaded, it can feel a bit overwhelming because you’re presented with a blank white page, but let’s make it easy by covering the key interface areas you’ll interact with regularly. 

Take a look in the upper left corner to start off with. The blue plus button allows you to see all of the available Blocks on your site that you can add to the page. At the very top of this list are the blocks that come with GenerateBlocks, which are denoted with blue icons. Anything with black text is from the WordPress core blocks. 

Let’s go ahead and click “container” and we can see that block has now  been added to our page. 

The next icon worth mentioning is the back arrow, which is simply just undo and the button next to it is redo. The steps are very granular so if you make a mistake, you can use that button or ctrl-z on your keyboard to undo, just as you would with a Word Doc or Google Doc. 

Lastly, you’ll see the icon with 3 lines which is called Document Overview. In other WordPress builders, it’s referred to as the Structure Panel. 

I click this icon pretty much immediately when I load into the block editor because it’s extremely helpful and the fastest way to navigate around your page as the layout gets more and more complex. 

As of now, we only see our container in the Document Overview, but if we click the black “Add Block” button inside our Container, you can see a search field and some commonly used blocks appear for you to select from.

Go ahead and click Headline and you can see that the headline is now nested inside the Container, and that is reflected in the Document Overview panel on the left side. 

The next crucial area to pay attention to is your right sidebar, which is called the Settings panel. 

There are two tabs inside this Settings panel, one is called Page and one is called Block. 

The page tab has a ton of settings related to the page you’re currently working on. This allows you to perform changes like modify publish dates, set visibility, change feature image, and more. 

The options found here will change drastically depending on what plugins you have installed and whether you’re editing a post or a page. 

The second tab in the settings panel is the Block tab. This one is really important and you’ll spend a lot of time inside this tab because it allows you to manipulate all of the styling for the block you currently have selected. We’ll cover more on this later. 

Adding Blocks More Easily

I generally don’t use the Blue and Black add block button s because there’s an even easier way to add blocks to your page. 

When you have a block selected, you can simply press the return key on your keyboard which jumps to a new line, similar to a word processor. Now, press the forward slash and start typing the name of the block you want. Let’s just type the word /grid which is going to filter down to our GenerateBlocks Grid block. 

Press return again and that Grid block will be added to the page. As you can see, there’s a few further options now, so I’ll choose the 3 container layout. 

So, there’s really no wrong or right way to add blocks to your page but I find the most convenient and non-disruptive way to do it is to use the slash approach. 

Insert Before and After

Every once in a while, the return key and slash approach to add new Blocks won’t work due to layouts and overflow issues, so a great way around this is inside our Document Overview panel, select a block and you’ll see 3 little dots appear. Click that and there’s a variety of options that are fairly straightforward. 

You can click Insert Before which positions your cursor above that block, and you can then use the black add block button, or the slash approach we discussed before. The same approach applies for Insert After. 

You’ll notice that when you click Insert Before or Insert After, the Document Overview shows a paragraph element, which is a core block. 

This is because you can start typing anything you want immediately in that space, even without selecting a block. I typically don’t do this unless I know for a fact I won’t need to modify the styling of that text at all. 

I use this Insert Before and After feature very regularly and I suspect you will too.  

Styling a Block

Let’s go ahead and type something into the headline element such as “Pineapple on Pizza?” and now in our Block tab on the right, we can adjust any styling we want. 

You might wonder where the default styling is coming from and that’s set inside our theme, GeneratePress. Let me know in the comments below if you want a beginners guide to GeneratePress and theme styles. 

Now, let’s go ahead and set this heading to have an uppercase text-transform as well as a font-size of 5rem. 

As you can see, the headline block is changing in real time. 

Now let’s say we want to adjust the styling of our container element. All we need to do is either click the element itself in the middle of the block editor, or select it from the Document Overview. Sometimes clicking the element on the page itself isn’t possible, so the Document Overview is a good fallback and why I mentioned I open this panel immediately on page load. 

Now that we have our container selected, I’m going to go ahead and give it an off-white background color and padding of 2rem on all sides. 

Once again, our styling is changing in real time on the page. When you’re ready, you can go ahead and click the blue publish or update button in the upper right of the page. 

You’ll see a little black Snackbar popup in the lower left to confirm the page was updated successfully with a View Page link. If you miss that and the snackbar disappears, you can always click the open in new page icon directly next to the blue update button in the upper right. 

Let’s go ahead and take a look on the front-end. We can see our styling changes have taken effect exactly as we intended. 

Layout Blocks

In GenerateBlocks, the primary two blocks you’ll use to create layouts such as columns and sidebars will be either the Grid block itself, or you can create your own with containers nested inside of other containers. 

This topic can become complex quite quickly, but for basic layouts it’s very common to use the Grid block. If you use Containers, you’ll have more flexibility, but it takes a bit more work so we’ll cover that in a different tutorial. 

When we create a layout using a Grid block, it’s essentially just a container which has multiple additional containers nested underneath it. We then have the ability to control the width of each inner container to create the layout we need. 

Want to put 4 images side by side? Easy! Just add a grid to the page with /grid, then click the visual representation of a 4 column layout. This sets each inner container to a width of 25%. 

Now, we can add an image block inside. Remember to click the blue icon which is the GenerateBlocks image block, which is a lot more customizable. You can upload a new image, or grab one of the photos out of your media library. 

Then, if I wanted I could hit enter and type /headline to add a headline to my grid column. 

Inside your Document Overview panel, you can see all the Blocks we just added are now visible in that panel and can be clicked to select them. 

Let’s change the width of this grid container, which we can do by selecting the container inside of the Grid block, then in the Block panel on the right, changing it to one of the common presets like 33% or 50%. 

As you can see, we can get a really long way with even just the basic 6 blocks that GenerateBlocks offers us. 

Usability Tips

There’s a few quality of life usability features you’ll end up using often when working in the block editor. 

First of all, in our Document Overview we can drag and drop blocks anywhere we want. If I wanted to get my headline out of the container for whatever reason, all I have to do is click and hold, drag it where I want, and let go. 

You can also hold shift + click and perform the same drag and drop operation, or apply styling to multiple blocks at once. 

Sometimes drag and drop is a bit clunky, so you can rearrange blocks by clicking it. You’ll notice the little up and down arrows which move the element up and down in the Document Overview accordingly. 

Lastly, a lot of common keyboard shortcuts work like save, undo, and redo. You can also delete a block or multi-select a group of blocks to be deleted with the keyboard shortcut of ctrl+option+z or ctrl+alt+z. 

Wrapping Up

With this introduction to the Block Editor and gutenberg, you should now feel comfortable with creating basic page layouts. 

Don’t try to make it perfect the first time. I promise you’ll get it wrong, but what will happen is you’ll learn a ton and you’ll get better every single time you work with the Block Editor. 

It’s also far easier to edit and existing page than it is to create anew, so if you’re looking for assistance building out your website, please feel free to reach out to me or another blocks export to get help on your site.