Home » WordPress Tutorials » Basics » How to Move Blocks in Gutenberg?

How to Move Blocks in Gutenberg?

What you need to know:

Moving blocks up and down your document hierarchy allows you to rearrange your content. The three most popular ways of moving blocks include dragging and dropping a block to a new place, using the Move Handles from the Contextual Toolbar, and via the keyboard shortcut Ctrl + Shift + Alt + T or Y on Windows/Linux and + + + T or Y on macOS.

Have you ever created a post or a page in WordPress only to realize at some later point that your content would look and work better if it was rearranged? If so, this tutorial is for you. Here, we’ll show you how to rearrange your page elements by moving the blocks that contain them up and down your document hierarchy.

Table of Contents:

 

What Is Gutenberg?

Gutenberg, also known as the WordPress Block Editor, is the main way of creating posts, pages, and widgets on your WordPress site. Unlike its predecessor, Gutenberg stores every piece of content in its own block. This allows you to effortlessly manage and edit a single block with minimal negative repercussions on its neighboring blocks.

If you are new to Gutenberg, we suggest reading our tutorial on the basics of the WordPress Block Editor as well as our guide on the Gutenberg interface. After you have done so, you can further your knowledge by learning the various keyboard shortcuts and the best third-party plugins that are available for Gutenberg as well as the best ways to customize the block editor to your liking.

Tip:

If you don’t have your own website yet, you can take advantage of our free hosting plan or one of our premium WordPress hosting packages and install WordPress in a few easy steps.

 

What Are Blocks in WordPress?

Gutenberg differs from most document editors in the way it stores and lays out content. Most editors emphasize free-from text and make it the backbone of the entire document. And should the document contain images or other multimedia elements, these will get inserted among the text itself. All of this makes for a messy document that is difficult to maintain and edit.

The WordPress Block Editor takes a different approach by encapsulating every piece of content in its own block. So, you can have a heading block followed by an image block, three paragraph blocks, a quote block, and so on. All of these blocks are self-contained entities that can be modified independently.

As you might imagine, there are many different types of blocks available in Gutenberg. All of them are stored in the WordPress Block Library along with any available block patterns and reusable blocks.

Tip:

If you wish to expand the number of available blocks even further, take a look at our roundup of the best WordPress plugins that add new blocks to Gutenberg. You can also try updating WordPress as new versions often include new blocks as well.

 

What Is the Benefit of Moving Blocks?

Every block contains a small portion of your website. So, by moving blocks up and down your WordPress document hierarchy, you will be able to rearrange the content that your visitors see.

 

How to Move Blocks in WordPress?

Since moving blocks is a basic feature of the WordPress Block Editor, there are five different ways of doing so. We will cover all approaches in the next few sections, starting with the more popular options.

 

Via Drag and Drop

Perhaps the most intuitive way to move blocks in your WordPress document is via drag and drop. To do so, follow these steps:

  1. Click on the block that you wish to move to select it.
  2. From the Contextual Toolbar that appears, click and hold on the Drag grabber. This is the second button on the toolbar.
  3. Drag the block to its new position within your document.
  4. Release the left mouse button to move the block.

You can drag a block and drop it in a different place in your WordPress document in order to move it.

You can drag a block and drop it in a different place in your WordPress document in order to move it.

Tip:

You will notice some blue lines that appear as you drag your block across the document. These are indicators of where your block would be placed if you dropped it at that moment.

 

Via the Move Handles

Another straightforward way of moving blocks in Gutenberg is to use the Move Handles from the Contextual Toolbar. These two small buttons can move the selected block either up or down the document structure.

The Move Handles can be used to quickly move a block up and down the document structure.

The Move Handles can be used to quickly move a block up and down the document structure.

 

Via a Keyboard Shortcut

If you like using keyboard shortcuts, you will be pleased to learn that there is a keyboard shortcut that can move blocks in WordPress. To start, select the block that you wish to move. Then, press Ctrl + Shift + Alt + T on Windows/Linux and + + + T on macOS if you wish to move the block up. Conversely, press Ctrl + Shift + Alt + Y on Windows/Linux and + + + Y on macOS if you wish to move the selected block down.

Tip:

Did you know that there are even more keyboard shortcuts available in WordPress? To learn more, you can check our guides on the keyboard shortcuts available in Gutenberg, when moderating comments, and when navigating the WordPress back-end.

 

Via the Move to Option

The Move to option offers a mix between using the mouse and keyboard to move a block in WordPress. Here’s how it’s done:

  1. Select the block that you wish to move.
  2. Click on the three-dot button at the end of the Contextual Toolbar.
  3. Choose the Move to option.
  4. Use the Up and Down arrows on your keyboard to move a blue placeholder up or down your document.
  5. Once the blue placeholder is in your desired position, press Enter to move your block there.

Activate the Move to option from the Contextual toolbar and use your arrow keys to reposition the selected block.

Activate the Move to option from the Contextual toolbar and use your arrow keys to reposition the selected block.

 

Via the Tools Button

The last way of moving blocks in WordPress that we’ll look at is by using the Tools button from the Top Toolbar. Here are the steps that you need to follow:

  1. Click on the Tools button from the Top Toolbar and choose the Select option.
  2. Click on the block that you wish to move.
  3. A minimal Contextual Toolbar with just a few options will appear.
  4. Click and hold on the Drag grabber (the middle button) and drag the block to a new position in your document.
  5. Release the left mouse button to move the block to its new place in your WordPress document.

You can leverage the more streamlined Contextual Toolbar provided by the Select tool when moving blocks in WordPress.

You can leverage the more streamlined Contextual Toolbar provided by the Select tool when moving blocks in WordPress.

Admittedly, this way of moving blocks is nearly identical to the drag and drop method we discussed earlier. The main difference is the more streamlined Contextual Toolbar that is used when you are selecting the blocks in Select mode.

 

How to Move Blocks in and Out of Block Groups?

It is notable that not all of the above methods of moving blocks work when it comes to WordPress block groups. If you wish to move a block in or out of a block group in WordPress, you should use either drag and drop or the Select option from the Tools button. Conversely, the Move Handles, the keyboard shortcuts, and the Move to option are not capable of moving a block in or out of a block group.

 

Next Steps

At this point, you should have a good grasp of the various methods you can use to move blocks in WordPress. Not only that, but you should also be aware which ways of moving blocks work with block groups and which do not.

In order to fully cover the basics when it comes to creating content in WordPress, we recommend going over our tutorials on inserting, editing, and deleting blocks. And finally, you should also take a look at our tutorial on publishing in WordPress, so that other people can find and consume your content.

Was this article useful?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Newest Articles:

How to Add a Site Logo Block in WordPress with Gutenberg

Adding a site logo in WordPress with Gutenberg is straightforward and requires only a few mouse clicks and just several minutes of your time. In the following paragraphs, you will read how to add a site logo to your WordPress website via the Gutenberg editor step by...

How to Add Images to WordPress with Gutenberg

Adding images with Gutenberg is quite simple. The block editor is very user-friendly and allows you to add images in several ways. In the following paragraphs, you will read about 4 methods you can instantly use to upload the media files you want.   How to Add...

How to Disable Gutenberg in WordPress

If Gutenberg is not suitable for your needs and wish to switch back to the Classic Editor, continue reading, as in this article we will show you 3 simple methods of how to disable the block editor. In the following sections, you will read how to disable Gutenberg by:...

5 Best Gutenberg Plugins for WordPress

One of the fastest and most convenient ways of enhancing the functionalities of Gutenberg is by using various WordPress plugins. Although Gutenberg is very versatile and feature-rich by itself, the open-source nature of WordPress has inspired developers all around the...

How to Add a Contact Form with WordPress Gutenberg Editor

If you are using Gutenberg to craft your WordPress website, then you should know that the process is very easy, especially by using the block editor. In the following paragraphs, you will read how to add one to your pages.   How to Add a Contact Form with...

Ready to Create Your Website?