WordPress Block Editor Tutorial
If you’ve never used WordPress before, you may find the interface a bit daunting, as many do. Content production apps like video editors, graphic design software, and Content Management Systems (CMSs or website builders for the uninitiated) have a reputation for being dense and confusing, and in most cases, they are!
But that shouldn’t stop you. You, dear reader, are a tenacious and voracious learner who will not be stopped by petty things like fear and confusion. Plus, it’s not really that hard when you know where things are.
By the end of this tutorial, you will know everything you need to know about building a page in WordPress. With that knowledge comes great power, and usually some websites, so I hope you’re ready for that responsibility. It’s too late to turn back now. You’re about to learn real good.
Table of Contents
What Is Gutenberg?
Most people are not web developers. Aside from being a rather obvious statement, that’s why CMSs like WordPress are so popular, with our star CMS powering 43% of the web all by itself in 2023. The Gutenberg Block Editor is WordPress’ answer to the need for people to be able to edit websites without code. It provides you with a simple visual interface to make the web development and maintenance process easier.
Most modern website builders have some form of block editor because they simplify the creation process for those not blessed with coding skills. There are prettier CMSs that offer more customization and flashier templates. Like WordPress, some of them are even free, like Webflow, which allows for drag-and-drop site-building and seemingly infinite customization.
The benefit of using WordPress over other, more polished CMS software is that it’s built to give the user just the right amount of control. I use WordPress for most of my clients specifically because if they don’t want to work with me in the future, they have the freedom to edit their website on their own without having to learn programming. You don’t have to know much about how websites work to maintain a website with WordPress.
Enough talk, let’s get into the tutorial!
How to Use the WordPress Block Editor
To give you an idea of how it works, I’m giving you a glimpse into the back end of studiooriley.com.
As you may have guessed, you work with blocks in the block editor. Blocks are a naturally easy way to work with web page elements because web pages are built using something called the DOM, or Document Object Model, which separates elements into boxes with smaller boxes inside of them, smaller boxes inside of them, and so on. Gutenberg allows you to create these boxes at the click of a button instead of defining their properties through hand-coded HTML and CSS.
When you first use the block editor, your page will be blank unless you’ve already chosen a WordPress Theme with default content. You can use the Gutenberg editor in two main places, the Edit Page screen and the Edit Post screen.
To get there, start in the dashboard and find Pages or Posts in the left-hand sidebar. From either page or in the dropdown options, choose “Add New” and you’ll be brought to the edit screen for the page or post you’re customizing.
Below is a screenshot of my contact page before my recent update. It features two short paragraphs, a spacer block, and three custom HTML blocks. In the screenshot, the left panel is called the Block Inserter, and this is where you choose blocks for your page. You can do it the old-fashioned way by scrolling through the menu until you find what you’re looking for, or you can just type the name of your target block into the search field. It’s smart enough to intelligently filter and suggest blocks as you type. The Block Inserter also keeps track of the most recent few block types you’ve used, and keeps them up toward the top as you work. This is helpful so that if you need to add the same block over and over, you don’t have to scroll or search to find it!
You’ll notice that the first section in my Block Inserter is labeled Kadence Blocks. These are not default Gutenberg blocks.
One of the cool things about WordPress is its versatility regarding plugins, and this extends to the block editor. I’ve installed Kadence blocks to give me a wider selection of blocks than comes with Gutenberg. Don’t let that give you the wrong idea, though. Gutenberg has plenty of options for most use cases without the need for plugins!
Each block has a default design and performs a different function, described by its name. To use a block, you can simply open the Block Inserter and click on a block! The chosen block will appear on the page beneath whichever block you last edited.
Another benefit to WordPress and similar block editors is that the edit screen doubles as a live preview of what your page will look like when it’s published! There are only three ways in which this preview isn’t entirely accurate:
- Extra spacing is added between elements in the editor to make the editing experience less claustrophobic. You’ll develop a sense of when you need to add spacer blocks between elements as you gain experience with the editor.
- Custom HTML blocks like those in the screenshot above are not rendered until the real page is loaded, so you’ll see the actual code in the edit screen.
- Some blocks, particularly those that come from plugins and are not part of the Gutenberg editor, are not integrated with the WordPress preview generator and therefore will appear with a message like “Block unable to load. Attempt block recovery?” There’s not necessarily anything wrong with the block or the plugin. It’s just not compatible, and therefore not able to render, but your browser will render it just fine!
There are also other ways to interact with the block editor.
Other Ways to Use the Editor
1. First, you can hover your mouse between two elements and wait for a blue button to appear with a line extending to the sides of the editor, like this:
Clicking that button will bring up a smaller version of the Block Inserter right above or below where you’re working.
2. In the case of images and other files you’d like to add to the page, you can simply drag and drop them from your file system to Gutenburg. Simply keep holding down your click and move your cursor until you see the blue line appear between two elements or wherever you’d like to place the file.
3. As long as you have a block selected, you can simply press Return (or Enter in Windows) to create a paragraph block below the one you’re working with.
4. When you have a block selected, Gutenberg places a small toolbar above or below it, depending on its position on the screen. To change a block type, you don’t have to delete the block and start over. You can simply click on the block symbol in the leftmost position in the toolbar. This will bring up that same smaller version of the Block inserter.
5. In the same toolbar, you can customize each block individually. The options available will change depending on the block type.
There’s lots more that you can do with the Gutenberg block editor, but in an effort to keep these articles easy to digest, I’m breaking them down into smaller chunks. So if you want to learn what all of the blocks do and how to style and further customize them in WordPress, look for Part 2 and Part 3 in the coming weeks!
In the meantime, take a look at the page now that I’ve added some new blocks and rearranged things a little. This is what my contact page looks like using only Gutenberg blocks:
Have questions? Feel free to ask them in the comments. I always answer them, and I’m happy to explain things further. If enough people have the same questions, I’ll even write another article to cover it!
If you need help with your website, visit the contact page we used in this tutorial to get in touch! A phone call isn’t a contract. I’m happy to just talk about your project and advise you on the best way to move forward with your website. Looking forward to meeting you sometime!