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:
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.
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.
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.
In this way, you can create the following table with some features of Nelio A /B Testing very easily.
| Basic | Professional | Enterprise |
| $29 /mo | $89 /mo | $259 /mo |
| 5,000 tested page views | 35,000 tested page views | 200,000 tested page views |
| 1 site | 5 sites | 10 sites |
| For Individuals | For Small Business | For 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.
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.
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.
#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.
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.
Once checked, you have the toolbar fixed at the top of your editor.
#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:
#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:
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 actions | Shortcut in Mac | Shortcut in Windows |
| Display this help | Ctrl ⌥ H | ⇧ Alt H |
| Save your changes | ⌘ S | Ctrl S |
| Undo your last changes | ⌘ Z | Ctrl Z |
| Redo your last undo | ⇧ ⌘ Z | Ctrl ⇧ Z |
| Show or hide the settings sidebar | ⇧ ⌘, | Ctrl ⇧ , |
| Open the block navigation menu | Ctrl ⌥ O | ⇧ Alt O |
| Switch between Visual Editor and Code editor | ⇧ ⌥ ⌘ M | Ctrl ⇧ Alt M |
| Block actions | Shortcut in Mac | Shortcut 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) | ⌥ ⌘ T | Ctrl Alt T |
| Insert a new block after the selected block(s) | ⌥ ⌘ Y | Ctrl Alt Y |
| Change the block type after adding a new paragraph | / | / |
| Text formatting | Shortcut in Mac | Shortcut in Windows |
| Make the selected text bold | ⌘ B | Ctrl B |
| Make the selected text italic | ⌘ I | Ctrl I |
| Underline the selected text | ⌘ U | Ctrl U |
| Convert the selected text into a link | ⌘ K | Ctrl K |
| Remove a link | ⌘ ⇧ K | Ctrl ⇧ K |
| Add a strikethrough to the | Ctrl ⌥ D | ⇧ Alt D |
Display the selected text in a monoespaced font | Ctrl ⌥ 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.
Nelio Content
I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.
Panozk
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.
Leave a Reply