Tutorial: How to Use the WordPress Block Editor

In this post, we’ll help you discover the Gutenberg WordPress block editor to get you started on making your website all your own. Learn how to add new pages and posts to start managing your website infrastructure like a pro (because you already are one).

Teakie Tutorials is a series of free resources available on the Teakie Academy with step-by-step how-to articles designed to help you quickly understand, build, and grow your digital platform.

Jump-To Section:

1. Introduction
2. Getting Started with Gutenberg
3. Creating a New Post or Page
4. Adding a Title
5. How to Add a Block
6. How to Use the Blocks
7. Conclusion

1. Introduction

In early 2020, WordPress — one of the world’s most popular content management systems — introduced a new, sleek, and simplified content editor known as Gutenberg. Gutenberg is a block editor, which is a completely new — and arguably more user-friendly — way for users to create content within their WordPress theme.

The former WordPress editor was a basic text editor, similar to what you see in a Word document. With this new approach, WordPress is elevating their user experience while also making it easier, more functional, and more intuitive for you to create a website you love.

In our opinion, WordPress is the best platform for professional content publishing (more on that in a future article), and the platform we’ve designed our Teakie Care membership around.

To get started with the WordPress Gutenberg block editor, grab a hot coffee, tea — or lemon water — and follow along with our tutorial, inspired by wpbeginner’s post on the subject.

1. Getting Started with Gutenberg

First things first: login to your WordPress Dashboard (learn how here) with your username and password.

2. Creating a New Post or Page

Once you’re in, take a peek at the navigation tabs on the left hand side of the Dashboard.

There, you’ll see both a Posts and a Pages navigation label — which you’ll choose is dependent on what you want to do. Do you need an entirely new website page, or do you simply want to add a new blog post?

Whichever route you choose, simply hover your cursor over the Pages or Posts navigation label, and click ‘Add New’.

3. Adding a Title

By default, your post or page will be set up ready to add in your title.

After you add it in, simply press ‘enter’ on your keyboard, and you’ll have added a new paragraph block!

4. How to Add a Block

Like every other step so far, adding a block is quite intuitive. To add a new block, click the ‘+’ box in the upper left hand corner of the page to see the varying types of blocks you can add.

Hover over each type of block to see an example of what your content will look like on the page.

Teakie Tip: For a shortcut, you can also add a block by hitting enter when editing the body of your post. Then, click the ‘+’ box that appears on the right hand side.

There are many types of blocks that you can add with the WordPress block editor.

The following are the types of blocks you’ll be adding most often:

• Add a header or a sub-header: Use the ‘Header’ block to add headers and sub-headers to your page. You can change the heading level (heading size) by clicking into the block, and choosing between H1 to H6.
• Add a paragraph: Use this block to add body text to your page.
• Add a list: Use this block to add numbered lists or bulletpoint text to your page.
• Add a link: To hyperlink to anything in your heading or text, click into the block you’re working in, highlight the text you would like to add a link to, and click on the ‘-‘ in brackets (it looks something like this: (-)). From there, simply add the URL of your link into the address bar that pops up, and press the ‘Enter’ key or ‘Submit’.
• Add a button: Go to the ‘+’ box in the upper left hand corner of the page. Click into the ‘Search for a block’ bar and search for ‘Button’ (you can do this with any type of block you’d like to add). Add text to the button by typing into the block, and add a link to the button by clicking on the ‘-‘ in brackets.
• Add an image: Go to the ‘+’ box in the upper left hand corner of the page. Click the ‘Image’ block. Once added to the page, you can upload a new image, select an image from your media library, or insert a new image via URL.
• Add an image gallery: Follow the same steps as the Add an image section, but click on the ‘Gallery’ block. From there, you can either upload new images or select images from your media library.

5. How to Use the Blocks

• Toolbar: Every block has a built-in toolbar that allows you to change the appearance and settings for the block. For example, you can change the alignment of where you images will appear in a block to move it from left-aligned to centered.
• Moving blocks: To move or reorder blocks, simply press the up or down arrows that appear in the toolbar of each block.
• Saving and reusing blocks: In the toolbar, you’ll see three vertical dots — these are the block settings. Click on them, and then click ‘Add to reusable blocks’. A bar will appear to name the block, then click “Save”. It can now be found in the ‘+’ box under the ‘Reusable’ label.
• Removing blocks: To remove a block, go to the block settings and click ‘Remove Block’. Voila!
• Explore different blocks: As you’ve seen, Gutenberg is extremely user-friendly — and on top of that, there’s a variety of blocks you can add to diversify the content on your website! A few of our favorites are:
  • Cover images
  • Gallery images
  • Tables
  • Shortcodes
  • Drag-and-drop media
  • Adding YouTube, Vimeo, and other video links

6. Conclusion

As you can probably tell, we’re in love with the Gutenberg editor in WordPress and truly believe this platform helps our clients create websites that stand out, and make running their online platform as easy as 1-2-3.

If you’re ready to make the change to WordPress — and receive complete support for your digital platform and its assets — becoming a Teakie Care member may be the right fit for you. Learn more about the benefits of being a Teakie Care member on our website today.