We’ve been using the WordPress block editor since the very beginning and watched it grow and evolve over time. It’s come a long way, but there are still times when it feels like I’m just randomly clicking around and having a hard time selecting the right block. Luckily, I’ve picked up some tips and tricks over the last few years that have made using the block editor a lot easier. So, if you want to level up your block editing skills, check out the tips I’ve gathered for you.
Block List View
The easiest way to navigate your blocks is by using the list view, especially when you have a long and complex page. To reach it, simply click on the icon at the top of the toolbar, which looks like this
This will open a list with all your blocks. Now you can easily dig into your nested content and find the exact block you need to tweak or change.
And, if you need to rearrange things, just drag and drop your blocks wherever you want them to go.
From here, you can also access additional block settings by clicking on the three dots on the right of each block.
Bottom breadcrumb navigation
Another way to easily navigate your nested blocks is located at the bottom of your editor screen.
This is my favourite way of selecting blocks since you don’t lose valuable screen space when building your pages but you can still select the exact block you want to edit.
Parent block selector
The parent block selector is the most recent feature in the WordPress block editor of ways to help you navigate your blocks and content. With this option, you can quickly locate the container for the currently selected block.
I’m in the habit of using the breadcrumb navigation I mentioned earlier, so I have to admit I don’t use this one much, but I can see how it can be useful.
This is another one of my favourites and saves me a ton of time. Instead of using the blue plus in the top-left toolbar, you can just hit enter for a new block and then type in a forward slash (/).
You might have noticed that the placeholder text describes exactly what I just mentioned.
If you can’t find the block you need from the list, simply start typing its name, and it’ll magically appear. You will, however, need to know the name of the block.
I’ll admit, this one isn’t so much of a “ways to navigate your blocks” tip, but more of a shortcut. Still, it’s a great time saver.
Speaking of shortcuts, other than the forward slash we just talked about, did you know there are many available throughout the editor? In my school days, my Photoshop teacher drilled into us that mastering software shortcuts is key to a faster workflow.
You can find all the shortcuts available in various places in the editor. I don’t want to bore you with an endless list, but I picked out some of the most useful shortcuts for you. You can find them all in the table below.
|Open the block list view||Shift + Alt + O||⌃ + ⌥ + O|
|Duplicating||Ctrl + Shift + D||⇧ + ⌘ + D|
|Insert block before||Ctrl + Alt + T||⌥ + ⌘ + T|
|Insert block after||Ctrl + Alt + Y||⌥ + ⌘ + Y|
|Save your changes||Ctrl + S||⌘ + S|
|Undo your last changes||Ctrl + Z||⌘ + Z|
|Redo your last undo||Ctrl + Shift + Z||⇧ + ⌘ + Z|
So there you have it! Hopefully, some, if not all of these tips can help you build your pages a little faster and a little better.