Your Digital Commerce Experts
Nexcess Logo

Nexcess Blog

December 16, 2021

How to Use WordPress Gutenberg Blocks

WordPress is the most popular Content Management System (CMS) in the world. Simply put, a CMS is an interface you use to control the layers of your website.

Each website consists of the front and backend. The frontend is the visual layer, which visitors see when they enter your site, and it is made up of various pages. The backend is the layer you work on to control how your website functions.

Plugins are a good example of backend components that help you add functionality to your website, whether it be security, design, media, and more.

One of the most important types of plugins is page builders. Page builders have drag and drop features that let users see changes in real time. Unfortunately, page builders can add weight to your website because they still use code even if you cannot see it. Weight slows down your website, and that sabotages your search engine ranking.

Having a website that uses clean code, is lightweight, and loads super fast is really important and is now a ranking factor for search engines. If you want to rank at the top of search results, you need to have a site that makes it easy for you to do these things.

The Gutenberg Block Editor

In November 2018, WordPress introduced a new block editor called Gutenberg.

Gutenberg helps you build your websites visually, dragging and dropping, just like page builder plugins. However, it’s not a third-party add-on. It is inbuilt in the core of WordPress itself. It uses clean code, is lightweight, and is super fast. This way, Gutenberg allows you to be search engine friendly. Gutenberg makes it very easy for complete beginners and experts alike to make super-fast websites so they can rank higher organically.

The compositor is called a “block editor” because the content is categorized into “blocks.” Blocks are a handy tool to help you build your site. They help you insert, edit, design, and rearrange multimedia content without having to write custom code. This way, you can focus on creating engaging and quality content without having to worry about code.

Blocks are very flexible, and they allow you to be creative and build your own brand design. One of the best features is the “custom blocks” option which you can use to create unique features that go with your brand aesthetic. Not having to be limited to pre-designed themes and features is creatively liberating.

Gutenberg is More Than an Editor

Gutenberg is revolutionizing the way pages, posts, and products are created, giving WordPress a significant advantage over other CMS options.

Despite this, Gutenberg is a controversial change. Some people think that it is a necessary change, while others prefer the way they have always done things. However, it is beyond doubt that Gutenberg is not simply a new editor. It opens up many possibilities for exciting developments in WordPress.

How to Use the Gutenberg Block Editor

Now that you understand the difference between the Gutenberg block editor and classic WordPress page builders, let’s learn more about how to use Gutenberg. This way, you can see firsthand if the Gutenberg block editor is the right thing for you.

Related reading: A Real-World Guide to Using Gutenberg

How to Add Content in Gutenberg

If you want to add a page title, you can simply type in the “add title” section. After that, you can start adding content to your page by typing in the white space below or by adding a block. We have put together a Gutenberg block tutorial to help you do just that.

After you have done that, you have officially started to design your post or page. Editing and moving the content you add is super easy if you use Gutenberg blocks.

Adding Blocks in Gutenberg

As we mentioned before, the new WordPress editor is called a “block editor” because all content here is divided into blocks. Gutenberg has many types of blocks for whatever kind of content or multimedia you want to use.

You can add a block simply by clicking on the plus sign in the white space or in the top left corner. When you click on it, Gutenberg will offer you a few types of blocks you can add.

There are more than 50 types of blocks from which you can choose. By clicking “browse all,” you can look at all the different types of blocks and choose the best one for the task at hand. There are particular types of Gutenberg blocks for any kind of content, including text, media, design, themes, and embeds.

Editing Blocks in Gutenberg

After you pick your ideal block, follow its instructions to create your content in that block. You can repeat this process many times and add as many blocks as you need.

You can edit any block by selecting it and then viewing the settings for that block. When you choose a block, some settings will appear right above it. You can use the arrows to rearrange the blocks, or press and hold the dots to drag the block to your desired location.

Gutenberg also allows you to save a block as a “reusable block.” By using the Advanced Custom Fields plugin, you can build reusable blocks, which can be used through Gutenberg. This is important if you create designs that you will reuse again because you won’t have to redesign things from scratch, and it will save you time. You can also use different plugins to add section blocks.

A WordPress Gutenberg section block is a valuable feature that allows you to organize multiple blocks inside one section. Any standard or custom Gutenberg blocks can be added to a section, which can then be utilized as a whole block.

How to Publish a Post on WordPress with Gutenberg

Once you are done editing, you have to publish or make your post go live on your website. You can start with the publishing process by clicking on the “publish” button at the top right corner of your Gutenberg page. After clicking on the publish button, there will appear a few options you can alter to your liking.

Visibility settings help you control and restrict who can view your content. You can also schedule posts to go live at a specific date or time. This way, you don’t have to manually push the publish button whenever you want your post to go live. Adding tags is also recommended because they can help viewers find your content.

Before you go ahead and publish your post, Gutenberg allows you to preview how it will look on different screens like desktop, tablet, and mobile.

When you make sure that everything looks great, you are ready to publish your content.

Now You Know

The new WordPress Gutenberg block editor is revolutionizing the way pages, posts, and products are created. With Gutenberg, you can visually design your website without knowing how to code. Now you know the basics of Gutenberg, how to make a post, and how to publish it.

Want to try to use the Gutenberg block editor? Power your website with a professional web host designed for WordPress.

Check out our fully managed WordPress hosting plans to get started today.

Related Resources

Nexcess
Nexcess

Power up your sites and stores with custom-built technology designed to make every aspect of the digital commerce experience better. Make your digital commerce experience better with Nexcess. Visit Nexcess.net today and see how we can help.