Arranging and moving blocks on the page

How to reorder blocks in the block editor

Once you have placed blocks on a page, you may want to rearrange them based on your content flow and how you would like users to digest content on the page. There are two different ways to reorder, rearrange, and move blocks around on the page.

Approach 1: Using arrow icons

  1. Select the block that you would like to move
  2. In the toolbar over the block, select the up or down arrows to move the block above or below other components on the page.
Screenshot of the toolbar hovering over a heading block, along with the up and down arrows.
The toolbar that appears when you select a block. Use the up or down arrows to rearrange the block on the page.

Approach 2: Dragging and dropping

  1. Select the block that you would like to move.
  2. In the toolbar over the block, select the drag symbol (6 dots) and drag the block to the place where you would like that content to be located on the page. 
Screenshot of the toolbar zoomed in on the 6 dots you use to drag and drop the block on the page.
Select the 6 dots that appear on the toolbar to drag and drop after the block is selected.

Nesting blocks and using the List View

When selecting and arranging blocks on a page, note that some blocks are designed to be nested within each other. You can see the hierarchy by toggling on the Document Overview icon in the upper left and looking under List View. This view lets you select and drag and drop more precisely, as well as view the hierarchy for nested blocks.

Screenshot of the list view of the page, showing a nested outline of all blocks on the page.
The List View after opening the Document Overview, showing all the blocks on the page