9 Tips For Mastering The WordPress Block Editor.

Published in WordPress.

The WordPress block editor is very intuitive. But even if you’ve been using it since its first release, it’s possible that there are still tricks and little things that you haven’t noticed and that can make part of your work as a writer easier. And that’s why I think it’s worth spending a few minutes of your time to reading this post that will help you master the block editor.

If you’re still with the classic WordPress editor and don’t know how to get started with the block editor, I recommend that you read this introductory article to Gutenberg by David.

Assuming you’re already familiar with the new editor, here’s a list of new features or tricks that you may not be familiar with. I’ll start by commenting on some new blocks that make it much easier to create content and, then, some tricks you can use in the editor that can be practical for you.

#1 Add A Button

With the classic WordPress editor, if you wanted to add a button in the middle of a post or a page you basically had two options: either switch to HTML mode and write the code, or use some plugin that created a shortcode for the button in question.

The block editor already incorporates the button block that allows you to quickly create a button in the middle of a post:

Layout elements blocks of the Gutenberg editor.
Layout elements blocks of the Gutenberg editor.

The Button block allows you to create a button in which you define its appearance, the background and font colors, and you can even add a CSS class.

Creating a block with the WordPress block editor
Creating a button in this post is very easy!

It’s that easy! And the result is a button like this one, which you should click you want to subscribe to Nelio Content 😉

#2 Add a Table

As with the button, adding a simple table with the classic editor also meant doing it with HTML and CSS or with some plugin. In fact, it was often easier to create the table with any other editor and then insert it into a post as an image.

Now you have the Table block that you’ll find in the set of Formatting blocks.

Formatting blocks of the Gutenberg editor.
Formatting blocks of the Gutenberg editor.

After selecting the Table block, you must indicate the number of rows and columns that you want to create by default. But don’t worry, then you have the option to add or delete rows and columns. You can also indicate the style of the table.

Creating a Table block with the WordPress block editor.
Creating a Table block with the WordPress block editor.

In this way, you can create the following table with some features of Nelio A /B Testing very easily.

BasicProfessionalEnterprise
$29 /mo$89 /mo$259 /mo
5,000 tested page views35,000 tested page views200,000 tested page views
1 site5 sites10 sites
For IndividualsFor Small BusinessFor Large Businesses

#3 Embed An External Element Just By Copying And Pasting

Other blocks that can be very useful are embedded types, which allow you to embed external elements such as videos, Facebook posts, tweets, etc.

Some of the blocks of the Gutenberg editor to embed third party elements.
Some of the blocks of the Gutenberg editor to embed third-party elements.

But you can also, instead of creating a block of this type, directly copy and paste the URL you want to embed and automatically insert the item in question. Just paste a link such as https://youtu.be/7SzwJQ55jus and let WordPress do the magic:

#4 Use The Spacer Block To Increase The Space Between Blocks

This is one of the blocks that perhaps you didn’t know existed either: the Spacer block. Its function, as its name suggests, is to increase the spacing between blocks.

The Spacer block has by default exactly 100 pixels but you can customize the height of it as you want. Just position the cursor over the blue dot below the block and increase the size by dragging the blue dot as far as you want.

Spacer block
Customize the size of the spacer block by dragging the blue dot.

In addition, you can also use an additional CSS class to define how you want the spacer block to be. This can be very useful in the creation of pages.

#5 Information On The Number of Words and Structure

In the classic editor, you would select a post and, automatically, get number of words in that post. Now, where is this information in the block editor?

Don’t worry, in the toolbar you have this information at all times very handy by clicking on the icon of a circle with an i. And it doesn’t just count the words, it also tells you the structure of the whole post or page you’re editing.

Information about top toolbar.
In the upper toolbar you’ll find the information icon about the number of words and structure of your postor page.

#6 Move The Block Toolbar To The Top

By default, when you are editing a block you have the block toolbar floating on top of the block itself. The big advantage of this is that you have it more at hand but the problem with floating toolbars is that they can cover part of the previous block.

Floating toolbar block
Floating toolbar block in the WordPress block editor.

As you can see in the image, the toolbar is covering part of the previous headline. If this is impractical or annoying, you can easily change it. Click on the three dots of Show more tools & options and check the Top Toolbar option.

Checking Top toolbar option.
Checking Top toolbar option.

Once checked, you have the toolbar fixed at the top of your editor.

Fixed top tool bar.
Fixed top tool bar.

#7 Use The Slash (/) As A Shortcut

The block editor gives you some shortcuts so you can be more efficient editing your posts. The first one you should use is the slash, /. As easy as starting to type the name of a block with the slash and it will show you the types of blocks you can add:

Start typing with a slash
Start typing with a slash and choose the type of block you want.

#8 Learn About Other Keyboard Shortcuts

One of the features that the new editor has incorporated is that you have many other keyboard shortcuts that can help you be much faster typing. To know them all, click on the three dots of Show more tools & options:

Keyboard shortcuts.
Look at the keyboard shortcuts you have available in the editor.

Alternatively, you can also access this help with the shortcut or Ctrl H (for Mac) or Alt H (for Windows). And below I show you the shortcuts that I think you may find most useful.

Global actionsShortcut in MacShortcut in Windows
Display this helpCtrl  H  Alt H
Save your changes SCtrl S
Undo your last changes ZCtrl Z
Redo your last undo ZCtrl  Z
Show or hide the settings sidebar ,Ctrl  ,
Open the block navigation menuCtrl  O Alt O
Switch between Visual Editor and Code editor    MCtrl  Alt M
Block actionsShortcut in MacShortcut in Windows
Duplicate the selected block(s) D Ctrl D
Remove the selected block(s)Ctrl  o Alt Z
Insert a new block before the selected block(s)  TCtrl Alt T
Insert a new block after the selected block(s) YCtrl Alt Y
Change the block type after adding a new paragraph/ /
Text formattingShortcut in MacShortcut in Windows
Make the selected text bold B Ctrl B
Make the selected text italic I Ctrl I
Underline the selected text UCtrl U
Convert the selected text into a link KCtrl K
Remove a link K Ctrl K
Add a strikethrough to the selected textCtrl  D Alt D
Display the selected text in a monoespaced fontCtrl  X Alt X

#9 Convert A Block Into Header With Hashtag (#)

You might consider this as a keyboard shortcut. Gutenberg’s block editor supports three types of headers: H2, H3 and H4. When you are typing the block by default is paragraph type. But you can turn it into a header very easily: start typing the new paragraph with ## for H2, ### for H3 y #### for H4. Try it and you’ll see how easy it is.

Conclusion

The first experience you have with the new block editor after years of using the classic WordPress editor may not be what you were expecting. But it’s normal, changes are difficult.

In the beginning, you might not be able to find certain things or think the editor is slower to use… And it’s true: the block editor still needs improvement in quite a few aspects. But if you learn to master it, little by little you will see its advantages and you will see that there are things that you couldn’t easily do before that you can now do.

Our recommendation? Go ahead and give the new editor a shot—you’ll soon forget how the classic editor worked!

Featured image of Rana Sawalha on Unsplash.

PoorNot badGoodGreatExcellent (2 votes, average: 5.00 out of 5)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.