Table of contents

What is the WordPress block editor?How block editors workHow to use WordPress block editorHow to disable blocks (and more)Next stepsAdditional resources

Get the industry’s fastest hosting for WordPress◦ 99.999% uptime
◦ Comprehensive security
◦ 24/7 support

WordPress Guide → Build → WordPress Blocks

WordPress blocks: A beginner’s guide

So you’ve heard about this magical thing called WordPress and you want to know what all the buzz is about. WordPress is a website-building tool that enables almost anyone to jump right in and start making highly functional and beautiful web pages.

A great place to start your WordPress knowledge is with the WordPress editor so, bravo, you have come to the right place.

In this blog, we’ll cover how to use the WordPress block editor. Make sure you have an account with WordPress so you can jump into the block editor to follow along.

Without further ado, let’s jump in.

What is the WordPress block editor?

The WordPress block editor is a tool for editing and building out web pages. Think of the WordPress block editor as the building blocks of the webpage. It’s highly effective with a helpful user experience.

The WordPress block editor can be broken down into three parts: top menu, settings menu, and the main content area. Each segment has elements that enable website editing and building in different ways. Each element of the site — such as paragraphs, headlines, videos, and buttons — can be considered a “block.” Framing your view of the editor down to individual building blocks makes building easier.

How do WordPress block editors work?

WordPress Block editors are usually third party additions using the Gutenberg blocks editor, enhancing it to further extend its capabilities.

There are plenty of different WordPress blocks. They come in many different types to help meet any need one would have to make a stunning site.

Types of WordPress blocks

Audio Block
Blog Post Block
Button Block
Calendar Block
Gallery Block
File Block
Group Block
Heading Block
Code Block
Custom HTML Block
Reusable Blocks (or Patterns)

Let’s look at some examples of popular WordPress editor plugins.

WooCommerce

WooCommerce blocks help you add products to your website. It’s easy to use and offers a user-friendly interface. It is a great addition to any developer’s toolkit and saves time in the workflow. If you run an ecommerce site, Woocommerce Gutenberg Blocks is a must — and it’s free!

WooCommerce hosting is also a must. Make sure your hosting solution is specially configured to optimize your ecommerce business.

Kadence

Kadence blocks are extremely helpful when working with complex websites with lots of content. Kadence prioritizes performance and functionality while building stunning websites.

How to use WordPress block editor

Using the WordPress block editors can be broken down into several steps depending on what you want to accomplish. Below, we’ll walk through the basic steps to find and add blocks to your site.

1. Click the plus icon and select your block type

Once you’re in the WordPress block editor, usually your first step will be to find the plus icon on the top left, or if your cursor is clicked on a certain part of your site, a plus icon will appear on its right hand side.

Once the plus icon is clicked, a menu will open with different block options. As mentioned earlier, there’s plenty of different blocks to fit any need.

In this stage, you might have to search for a specific block. Once you’ve found the right block, go ahead and click it.

2. Place your block

Now it’s time to move your block to where you want it on the page. If you used the plus icon on the top left, then you might have to move your block to its proper location.

Moving your block can be done by using the up and down arrows on the editor’s pop up menu (shown below). Another option to move any given block would be to click and drag on the editor using the “drag” icon which looks like a set of two lines of dots parallel to each other (shown below).

3. Customize your block

Now all that’s left is customizing the block to fit your site’s theme or branding. In this case, you can customize a paragraph block by changing the text color and font size.

Not only can you edit blocks using the floating bar, but you can also edit blocks using the right menu, otherwise called the Settings tabs.

Let’s walk through some of those customization options in the settings tab.

Each settings dropdown tab helps facilitate more customization on subjects like typography, spacing, effects, and even animation. The setting tab is where the magic happens. You’ll spend a lot of time tweaking your design to perfection in this section of the WordPress block editor.

Pro tip: Keep an eye on the list view, which can be opened by clicking the list icon on the top right. This will help with structuring the site and making it responsive to different screen sizes. Responsive design refers to how a website is designed and structured to respond to the size of any given screen size.

How to disable WordPress blocks and other options

WordPress lets you disable blocks, which can be useful in many cases such as:

Disabling blocks that you never use to cut down on clutter.
Disable blocks to restrict a third party editor on your site from using specific blocks.

You can limit access to certain blocks using a plugin called Disable Gutenberg Blocks. Using Disable Gutenberg Blocks to disable blocks is super easy. We break it down into quick steps below.

Download and install the plugin.
Head over to settings and then the Disable Blocks option.
Hover over any given block and click the option to disable.

When a block is disabled, it will be greyed out indicating its status. And that’s it — it’s a very quick way to disable blocks.

The only issue is that these blocks disable globally. If you would like to disable blocks to only specific editors on your site, be sure to use a plugin called Advanced Gutenberg. Disabling blocks using Advanced Gutenberg only adds about two extra steps: making a profile and disabling blocks for each user accordingly.

If you have serious issues with Gutenberg Blocks, do not fret. There is also a way to disable it and revert to the classic WordPress editor.

To disable the Gutenberg blocks, we’ll need another plugin: Classic Editor Plugin. It was developed by core WordPress contributors and will make the process easy. It works automatically after downloading and installing the plugin.

The Classic Editor Plugin also gives you the option to work on both editor versions.

To do that, head over to the settings page, then to the Writing page while in the WordPress admin. You will see the option labeled “classic editor settings.” Don’t forget to click save.

Another option is to disable Gutenberg Blocks with the plugin mentioned above, the Disable Gutenberg Plugin.

Getting started with WordPress blocks

Now you’re well versed in how to use WordPress blocks and the WordPress block editor. Hopefully you have a better idea of what the WordPress block editor is and how to get started. Jump in and give it a try yourself.

And if you’re just starting—or you’re ready to upgrade your web hosting—Liquid Web offers the widest range of hosting options specifically designed for WordPress sites. You can choose your server type, favorite OS, and the level of management support you need. Explore options below or start a chat to learn more!