If you are struggling to understand how to use blocks in the new editor of WordPress, you are in the right place. Today I’ll explain to you how it works step by step, and I will illustrate the editor’s key features by walking you through what it’s like to create a basic WordPress post, but you can use the same approach no matter what type of content you’re creating. The WordPress theme I use in this video is Neve, a super fast and featherweight theme which works perfectly with WordPress blocks. And even more, I will introduce you Otter, a WordPress plugin that comes with new feature-rich blocks to enhance your content creation experience. First of all, I’ll explain what blocks are. Blocks are the new way in which WordPress organizes the content inside your blog posts and pages.
If you create a new post, for example, you’ll see this content editing panel that’s block-based instead of what was previously there. Compared to its predecessor, this new block editor is a huge upgrade. The editing experience is distraction-free and much more streamlined. This is because you only see the main canvas and no other unnecessary elements. The first thing you’ll want to do is give your post a title, using the dedicated field at the top of the editor. This works exactly the same way as it did in the classic editor. After that, however, things start to change. If you hover over the area directly below your post’s title, you’ll see a few icons. The Plus icon lets you select WordPress blocks and add them to your post.
On the right, there are also options to quickly add the most commonly-used blocks – the text, image, and gallery options. For now, click on the Plus icon, and you’ll see a new menu. This menu lists out all the blocks that the editor currently includes. There’s a section at the top with your own Most Used options, a number of organized categories underneath, and even a search bar to help you find what you need quickly. If you have installed the Otter plugin, you can see even more blocks here. I’ll show you more details later in this video, so keep watching. To add a block to your post, you just have to find and click on it. Let’s start simple, with a Paragraph block. Place the block in your post, then move to the next step. You can also create a paragraph block by simply typing in the editor, which is the default block actually.
When you add a paragraph block, it doesn’t look like much right away. However, once you begin to start typing into the field, new options will appear. You’ll see some basic formatting settings, such as alignment, bold, and italics. In addition, check out the right-hand sidebar of the editor screen. There, you’ll find more block-specific options. In this case, you can change the text’s font size and color, add a drop cap, and even include some custom CSS in the Advanced menu. Any changes you make, either here or on the block itself, will be immediately visible.
What I like about the new block editor is that it lets you set a different background color for each block. This can be useful if you want to highlight specific sections, for example. Each one of the WordPress blocks on offer comes with its own unique settings. Furthermore, if you hit Enter, you’ll add a new block below your paragraph block. However, this time you can try adding an image block by using that same plus sign. As you can see, you’re able to upload an image or add one that’s already in your Media Library. You can edit the image, alter its alignment, and so on. As an alternative to hitting the Plus sign, you can type a “/” in an empty block followed by the name of the block that you want to insert. Once you learn which blocks are available, this is a much faster way to add new blocks.
There’s no doubt that you’ll use plenty of paragraph and image blocks. However, the blocks editor has more to offer. There are also a number of WordPress blocks offering new options not available in the classic editor. For instance, you can add a Button block to your post. This creates a clickable button for visitors to interact with. You can edit the text of the button itself, and include the URL it will link to right below.
By selecting the icon in the top-left corner of the block, you can change the style of your button, and if you want to change its position, click these icons here. In addition, you can alter both the background and text colors in the sidebar. While this isn’t a huge range of options, it’s enough to create a handy customized button, which you can use to encourage visitors to sign up for an email list, buy a product, or whatever else strikes your fancy. Want to have buttons with more options? Use the Button Group provided by Otter and you will be able to insert up to 5 buttons in the same group, which you can style separately using the Color & Border settings, here. Just select the button you want to customize in this drop-down and then choose the colors and settings as needed. Let’s say we want a white button with blue text and a blue border. After selecting the border color, you need to adjust its width here and its radius, if you want that, here.
You can also change how the button looks on hover. Cool, right? I also like that these buttons have the “Open in New Tab” option here, which is not available, for now, in the default button block. Further down, there are three more panels where you can set a Box Shadow for your button which includes Shadow Properties and Hover settings too. This is more than enough to create interactive buttons that look great and are made to boosts conversions.
Once you’ve added a few blocks, you may find yourself wanting to make some changes. Fortunately, the new blocks editor is pretty flexible in letting you modify your content’s layout. If you want to delete a block, for example, you can select the Options icon above it, and click on Remove Block. By hovering over a block, you can use the up and down arrows to rearrange your blocks at will.
Or, you can also click on the six dots between the arrows to use drag and drop to move a block. The blocks editor includes a number of keyboard shortcuts that can help you quickly delete blocks or insert new blocks. Type Shift + Alt + H to view all the keyboard shortcuts. It’s also worth noting that you can create multi-column layouts. This is an exciting feature. You can access it by placing a Columns block in your post. This lets you create up to six side-by-side columns, and place whatever blocks you’d like within each one. It’s an option that offers a lot of potential for creating unique layouts. For example, if you want to create a pricing section, set the number of columns to three, and then add the pricing block offered by Otter in each column, one by one. To work faster, you can customize the first pricing table, and then duplicate it and drag it over to the next column. Finally, it’s important to note you still have access to post-wide, or page-wide settings as well. In the right-hand sidebar, click on the Document tab to find them. The Neve WordPress theme I have installed earlier will give you even more options here.
While with the latest default theme of WordPress, Twenty Nineteen, you have a few options, with Neve you can also change the post settings here. The container and sidebar options will adjust the blog post structure. For example, you can choose whether your sidebar will be on the left side of your content, on the right side of it, or you can create a post with no sidebar at all. Right below these settings, you can turn off the blog post components such as the header, title, featured image and footer. Just check the box for the component you want to turn off. Then, if you want to adjust the width of your content, check this box and change this parameter here. If the sidebar it’s on, you can see that the width of your sidebar will adapt to the percentage you set here. One of the most powerful things about the WordPress block editor is that you can use plugins to add all kinds of new blocks. In fact, some of your favorite plugins might have already added their own blocks.
Beyond that, you can also find tons of plugins that are solely focused on adding new blocks. The Otter Blocks plugin mentioned earlier, gives you blocks for more advanced sections, where you can find a huge variety of templates to use immediately. You can filter them out by categories in this drop down, and you can insert this template, for example, into your blog post like so. Then you can edit the content as needed. Even more so, you can choose the Post Grid block, the About Author block, Advanced Heading, Button Group, Font Awesome Icons, Google Map, Plugin Card, Sharing Icons, Pricing, and Testimonials. Once you are done creating your blog posts, you can choose categories and tags, add featured image and so on. You can even modify comment settings in the discussion menu. However, you won’t need to save your content, as it will autosave at frequent intervals while you are working. Just remember that you need to hit the publish button twice to actually publish the blog post. This may be not all you need to know in order to use the WordPress blocks editor! There is more to learn about it but you’ll get used to it and you will know each choice on offer after experimenting with the various blocks and available features.
Are you comfortable using the new blocks editor? Do you feel like something is missing or it’s not working as it should be? Let’s chat about it in the comments section below. I’m just waiting to see what’s in your mind. If you want to learn more about WordPress, here are some popular videos that I’ve published lately. Feel free to check them out. See you in the next one. .
As found on Youtube