Using the block editor: Tips and shortcuts for efficiency
In this session, we will explore eight tips and shortcuts you could use to work faster and more efficiently in the block editor. Learn how to save time and simplify content creation.
- Copying and pasting styles
- Styling an individual block & applying it globally
- Using slash commands
- Duplicating blocks
- Dragging and dropping blocks
- Copying, pasting and deleting blocks
- Creating and managing Reusable blocks
- Accessing keyboard shortcuts
- How can you save time in the block editor?
Good day, and welcome to Learn WordPress. If you’re like most of us, there’s never enough time in the day. In this tutorial, we will look at some tips and shortcuts to be more efficient when using the block editor. The features we will cover are copying and pasting styles, styling an individual block and applying it globally, using slash commands, using duplication to save time, drag and drop options, copying and pasting and deleting blocks. We’ll also take a closer look at Reusable blocks and keyboard shortcuts.
Let’s jump straight in and talk about how you can copy and paste styles. A new option has been added to allow you to copy and paste block styles, making it easy to reuse designs you’ve created. So, for example, we can use the style of this Buttons block in the top and apply it to the example at the bottom. So select the Buttons block, click on the three vertical dots and then select Copy styles. And now, we can go to the destination button. Click on the three vertical dots again and select Paste styles this time, and now you will notice the style has been applied. In the next example, I will copy the style of the image on the left and apply it to the image on the right, and there we have it.
Next, let’s talk about how you can style an individual block and apply it globally in the site editor. So let’s go to the site editor and open up one of our templates. So let’s select the Buttons block, for example, and open up our styles, and change the background colour, text colour and then also add a 10-pixel radius. Now I like my new design, and now I would like all my other Buttons blocks on my website to look the same. So what we can do is we can select the Buttons block and click on Advanced in our sidebar settings. At the bottom, you will see an option Apply globally. It says Apply this block’s typography, spacing, dimensions and colour styles to all Button blocks. Once I select Apply globally, all my Buttons blocks on my site will have this design.
Next, let’s talk about selecting blocks using slash commands. There are three ways to add a new block. Firstly, you can click on the Inserter within a page or post. Secondly, you can click on the Inserter top left and select a block from there. Lastly, the easiest or fastest way is to type forward slash and the block’s name, for example, Navigation, Row or Columns Block. When you’re ready, you can merely click on the name, and it will insert into your page or post.
Next, let’s talk about the duplication feature, something I use a lot in my work. If you are creating a pricing table, for example, you only have to design the style and layout for the first column and then merely duplicate and then start modifying accordingly. So, for example, let’s select our first column, click on the three vertical dots and select duplicate and duplicate again. Now we can delete the two empty columns and then start modifying the content for each plan.
Let’s move on to drag-and-drop options. When you select a block, you can, of course, use the movers in the block toolbar to reposition the block. But you can also use the drag and drop function in the list view. Hold it in and then drag and drop it to where I want it on the page. Let’s look at another example. Select the block, hold, drag and drop. There is also a third option, so when you select your block, go to your toolbar, click on the grid of dots, hold it in and drag the block wherever you want it.
Another option worth mentioning is that you can copy, paste and delete individual or multiple blocks simultaneously. I have my list view open, so I will go ahead and select the first block, hold in shift and select the second block that I want to copy. Then I will click on the three vertical dots, and right at the top, select Copy blocks. Now I can paste these blocks on this page, but I will create a new page and paste it there. To delete multiple blocks, I will open up my list view again, select my first block, hold in shift, select the second block, click on the three vertical dots and at the bottom, select Remove blocks. So as you can see, there are many advantages to using the list view.
If you want to reuse your designs, you can always create a Reusable block. To get started, select a group of blocks, click on the three vertical dots and select Create reusable block, and then name it appropriately. To add a Reusable block, type in forward slash reusable or click on the Inserter top left and make your way to Reusable blocks and merely click on the Reusable block to insert to your page. The appearance of your blocks might differ on the backend of your site but will appear correctly on the front end. Reusable blocks update globally. So if you change something from one place, it will automatically update everywhere else the Reusable block has been added. If you want to use a Reusable block as a starting point and make changes for only that page or post, you can convert the Reusable block to regular blocks, and it will not affect the Reusable block.
To end, I wanted to remind you of all the keyboard shortcuts available. When you go to wordpress.org and search for Use keyboard shortcuts for the block editor, you will find this article which I will also share under the Resources section of the post. Here you will find shortcuts for Windows, Mac, global shortcuts, selection shortcuts, block shortcuts and shortcuts for text formatting. If you’re in your site editor and editing one of your templates, you can also go to the three vertical dots top right and view your keyboard shortcuts from here. And that’s a wrap.
Visit Learn WordPress for more tutorials and training material.
I am an Instructional Designer for the WordPress open-source project sponsored by Automattic. I am a strong supporter of the open-source movement. I have a background in education and content development. I am a husband, father, dreamer and lifelong learner.