Tutorials

How to Move Blocks in WordPress Gutenberg Editor?

  • Updated on
How to Move Blocks in WordPress Gutenberg Editor?

Are you wondering how to move blocks in WordPress Gutenberg Editor? If that’s the case, then you’ve come to the right place to master that. 

There can be times when you’ve published your post and wanted to rearrange it later for a better look. Well, it’s not an issue with the WordPress Gutenberg block editor. With the help of the Gutenberg editor, you can quickly move blocks with your content easily. 

However, there are 5 different methods to move blocks around your post. Now, you might be wondering what they could be. Here, we’ll walk you through all the methods. So stick with us as we guide you through until the end of this article. 

Now, let’s get started!

Moving Blocks in WordPress – Video Tutorial

Do you want to watch our video tutorial instead?

If you want to learn more about Gutenberg blocks and the step-by-step process to move them, then keep reading the content below.


What is Gutenberg Editor?

Before learning how to move blocks in WordPress Gutenberg editor, let’s know what Gutenberg editor is. 

The Gutenberg Editor is a new page builder known as WordPress block editor. So, it’s a part of WordPress core. You can use this editor to create content like posts, pages, etc., on the WordPress website. This editor helps you to add content blocks and functionality of page-builder to every WordPress website. 

Gutenberg Editor (WordPress Block Editor)
WordPress Gutenberg Editor

Also, it offers new WordPress blocks that include everything like paragraphs, headings, lists, images, and more. Furthermore, this editor will add your content in individual blocks rather than within one large content area.

However, if you’re new to the Gutenberg block editor, then you’ll need to learn the basics of the WordPress block editor. Whereas, if you have any experience, then you can easily work with it. You’ll also learn more about its available keyboard shortcuts and various ways to customize the block editor

Key Features of Gutenberg Editor:

  • You can add a block that helps display content in multiple columns. 
  • It also allows you to add an image or video with a text overlay. 
  • Enables you to create a bulleted or numbered list.
  • Also, it comes with a spacer where you can add white space between blocks and customize the height. 
  • Easily embed a simple audio player.
  • Able to add buttons to your content.
  • You’ll be able to insert additional custom elements with WordPress shortcodes. 

You can also check our article on how to make a website from scratch to build your website and try the WordPress Gutenberg editor yourself.

Having said that, let’s understand what are blocks in WordPress. 


What are Blocks in WordPress?

While using WordPress version 5.0 or the most recent, you must have encountered blocks. So might be wondering what blocks are in WordPress. 

Basically, blocks are the updated way of WordPress to help you organize content inside your blogs or pages. So, if you create a new post from your WordPress dashboard, then you’ll find a block-based content editing panel. Previously, it used to be one large content area with standard controls for your text formatting. 

WordPress Blocks
WordPress Blocks

Furthermore, you’ll have blocks for heading, paragraph, image, quote, etc. At the same time, each block works as a framework for its respective contents. Therefore, you can edit a single block without having to worry about other blocks of your content. 

You can also check our article on the best Gutenberg block plugins for WordPress that helps to add new types of blocks to Gutenberg. 


How to Move Blocks in WordPress Gutenberg Editor?

Able to move blocks in WordPress is the primary feature that comes in handy as you create your website. 

However, you can use different methods to move blocks in the WordPress Gutenberg editor. Let’s look at them deeply below. 

Method 1: Using Move Handles

The first method is using move handles, and it’s very straightforward. So let’s check it in 2 easy steps. 

Step I) You can simply click on the block you want to move. 

Using Up and Down Handles
Using Move Handles

Step II) After that, a toolbar will appear. Now click on the Up and Down arrow-like buttons to move the blocks. 

Move Blocks Using Move Handles
Moving Blocks with Handles

And you’re done! 


Method 2: Using Drag-and-Drop

Another easy way to move the blocks in your WordPress post is using a drag-and-drop. Let’s check them below. 

Step I) First, click on the block you want to move, and a toolbar will appear. 

Hold Toolbar to Drag Block
Using Drag-and-drop in Toolbar

Step II) Now grab the blocks by clicking the mouse on the toolbar. Following that, drag a block from one place, and drop it in another. 

Move Blocks Using Drag and Drop
Moving Blocks by Drag-and-drop

Now, you’ve successfully moved the blocks. 


Method 3: Using Move To Navigation Option

In this method, you can move the block in the editor with the help of the Move to option and a few keys.

Step I) Click on the block of your choice.

Move to Option in Settings
Using Move to Option

Step II) Click on the three vertical dots and the Move to option. After that, a blue highlight will appear over the block.

Blue Highlighted Bar
Highlighted Location

Step III) Press and hold the Ctrl button followed by the Up or Down arrow, followed by the same blue highlight.

Move Blocks Using Move To Option
Moving Blocks with Move to Option

Step IV) Finally, press Enter in the desired location to move the blocks.

That’s how you can move a block using the Move to navigation.


Method 4: Using the Block Editor ‘List View’

Also, you can easily navigate among blocks and move them using the List View. It’s like a table of references for all the blocks in your WordPress post. 

Step I) Go to the top bar of your WordPress editor and click the List View button. 

Using List View Option to Move WordPress Blocks
Using List View

Step II) Click and hold the block you want to move.

Move Blocks Using List View Option
Moving Blocks from List View

Step III) Drag and drop the block to the desired position of the post.

With that, you’ve successfully moved the block.


Method 5: Using Keyboard Shortcut

This is an easy method of moving the blocks only using the keyboard. Also, this method saves a lot of time. 

Step I) Go to your desired block.

Move Blocks Using Keyboard Shorcut
Moving a Block using Keyboard Shortcuts

Step II) On Windows and Linux, press Ctrl + Shift + Alt + T to move up and Ctrl + Shift + Alt + Y to move the block down.

And you’ve moved the blocks in WordPress editor only using the keyboard.

Following any of these above methods, you can easily move blocks up and down on your post to rearrange the content. Also, it helps you to keep the content the same and simply reorder the blocks on your post or page. 


Conclusion

Well, that’s all for now! In this article, we’ve mentioned how to move blocks in the WordPress Gutenberg editor. We hope that’ll help you to know all the methods of moving blocks in the WordPress Gutenberg editor. 

So, if you’ve any queries or suggestions regarding this article, then let us know in the comment below. You can also share your experience of moving blocks in the WordPress Gutenberg editor. 

You can also check out our article on the best WordPress block themes for Full Site Editing and WordPress block patterns – how to use them to design your pages

Also, don’t forget to follow us on Facebook and Twitter for more useful updates. 

Some of the links on this article/page are affiliate links. If you click on such an affiliate link and purchase the product, we’ll earn a specific percent commission from the seller. But it won’t at all affect the price you’ll pay.
Written By SiteSaga Editorial
SiteSaga Editorial is a team of highly experienced writers, marketers, and web developers led by Sunita Rai. We're here to help beginners get online with their self-made websites or blogs and succeed.

SIGN UP TO GET FRESH CONTENT

Subscribe to our blog and get exclusive content every week! We don't like spam, so we won't spam you with junk email.

Please enable JavaScript in your browser to complete this form.