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 that shows when you select a block.

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 Drag icon to let you drag and drop the block within the page

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 after opening the Document Overview