How to use the WordPress Block Editor

by Nov 29, 2024Tips & Tricks

In this tutorial, you will learn what the WordPress Gutenberg Block Editor is, how to use the WordPress Block Editor, and I will point you to some other helpful articles that go even more in depth. 

What is the WordPress Block Editor?

The Gutenberg Block Editor is WordPress’s very own way of allowing you to create and edit content on your website or blog. WordPress used to use what’s called the Classic Editor, but it switched to using blocks back in 2018. The general idea is that you have an editor with available “blocks” that you can choose from. The blocks make up your content, and the editor provides ways of modifying those blocks.

Now, there are other editing tools out there, like Elementor and Divi, but the default editor is Gutenberg, and its advantage is that it is simple to learn and easy to use. There are not a lot of moving parts like there are with other editors. Especially for someone not well-versed in HTML, CSS, and editing in general, Gutenberg is a great way to go. Another great perk to the Gutenberg editor is that you can actually use it alongside other page builders as well.

Navigating to the WordPress Block Editor

To navigate to the Block Editor, go to your WordPress dashboard and click on either Posts or Pages. Create a new one or select an existing one to edit. This will take you to the Block Editor screen. 

Navigating to the block editor in WordPress
Navigating to a Post

Page/Post Settings Sidebar

A few things you might want to do before you start typing is to fill in general settings about your post or page. In the editor, in the upper right corner, go to the settings and select the “Post” or “Page” tab. This will give you the page settings, like publish time, slug (the URL definition. Use this if you want the URL of the post to be something other than the title you give it), post category, excerpt, and more.

Page/Post Settings Sidebar
General Post Settings

The most important post settings in my opinion:

  • Featured Image
    This is the image that displays at the top of the post and on your home page and other pages when referencing this specific article
  • Excerpt
    Write a short summary of your post between 150-160 characters. This will display in search engine results right after the title of the page.
  • Post Category
    This categorizes your posts into what you see on the home page, so make sure you select which category you want it to live in. 

Some other helpful settings include 1) scheduling your posts to publish at a specific date and time, 2) setting the author of the post, and 3) selecting tags for your post, if that’s how you are organizing your website.

Check out this article by WordPress to learn more about the Page/Post settings sidebar.

Creating Content in the WordPress Block Editor

Once you have your page/post settings completed, you can begin creating your content! When you want to add different types of items, you can add new “blocks” (what we were talking about earlier). A block is basically just another word for a section. You can choose different kinds of blocks, like an image, an ad, a paragraph, a recipe, a video, a link, etc. See the picture below where it highlights different ways you can add a block.

Add blocks to the WordPress Gutenberg Block Editor
The Block Editor (see the blue plus icons and the forward slash option)

In the block editor, whenever you see a “+” sign, that’s an indicator that you can add a block. When typing in the block editor, you can also type a forward slash – “/”, which opens up a quick block selector where you can pick from frequently chosen blocks.

WordPress Block Selection
Block Selection Example

Some common examples of blocks to choose from include the gallery block, where you can add multiple pictures to a section, the columns block where you can split the screen into columns and add content to the different columns, or the “media and text” block where you can place an image or video on one half of the screen and text on the other. Just play around with it and have some fun getting to know the different blocks!

This article by WordPress provides a detailed list of all the blocks that are available.

Another helpful feature of the Gutenberg Block Editor is that you can change certain styles about each block by clicking on it, and then going to the “Block” tab in the right-hand sidebar. This is where you can change colors, font sizes, block dimensions, and more. Each block has different styling options.

WordPress Block Settings
Block Settings in the Right Sidebar

If you don’t see the right hand sidebar with the “Block” tab, just make sure you click this button in the upper right corner of your editor:

WordPress block settings

Here is another good article that covers some basics of changing block settings by WordPress.com.

Publishing Your Content

Now that you have the page settings and content complete, you are ready to publish your post. 

Always make sure you preview your changes before publishing. You can preview what your post will look like by selecting the “View” button in the top bar and selecting to preview in a new tab:

Preview a page in WordPress

Once you are happy with your edits, simply push the “Publish” button in the upper right corner of your screen, and voila! Your page is live!

Publish a page in WordPress

0 Comments