How to use the List View

List View helps you navigate between layers of content and nested blocks. Use the List View to select and arrange blocks in Post and Page Editor, or even in Appearance > Editor.

Objectives

After completing this lesson:

  • You will be able to demonstrate reordering items using the List View within the Query Loop Block.
  • You will be able to access additional block settings from the List View.

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

Readiness Questions

  • Would you like a more precise way to select a single block within nested blocks?
  • Are you familiar with how to insert blocks?

Materials Needed

  • A local install of WordPress.
  • Potentially a block theme, such as Twenty Twenty Two, to use List View in the Site Editor.

Notes for the Presenter

  • Demonstrate using the List View within the Post Editor first.
  • Demonstrate how to use the List View from within the Site Editor as well.
  • Ask participants to either complete the exercise independently, or guide you through how to complete the exercise.
    • If not all participants have a computer, having them guide you through the exercise is a great way to ensure everyone understands the steps.

Lesson Outline

  • Demonstrate using the List View within the Post Editor.
  • Show additional block settings from the List View.
  • Add an anchor ID to a block so that it is visible in List View.
  • Demonstrate dragging and dropping blocks.
  • Demonstrate how to use the List View from within the Site Editor as well.

Exercises

Reorder Post Title and Featured Image

Add a Query Loop Block within Appearance > Editor. Reorder the featured image and post title blocks within the Query Block, using List View.

  • Add a Query Loop Block
  • Drag and drop the Post Title and Featured Image in the List View

Assessment

You can use the List View in Posts, Pages, and Appearance > Editor.

  1. True
  2. False

Answer: 1. True

You can drag and drop items in the List View.

  1. True
  2. False

Answer: 1. True

Additional Resources

Example Lesson

How to use the List View

Navigate to a Post or Page that already contains content.

  1. Select the List View. You can close List View by either selecting the “x” or by selecting the List View icon once more.
  2. Select a Block by clicking on its name. Expand and collapse nested blocks, such a groups, columns, and more with the dropdown at left.
  3. Explore the kebab menu on the right (or 3 dots) by hovering on a block in List View. This will present options such as delete, duplicate, or show more [block] settings on the far right column of the Post Editor.

To reorder a block, select the block or group and drag and drop it to another location within the List View.

List View > Group > Options kebab menu

Drag and Drop Blocks

You can drag and drop blocks within the List View.

By selecting a block within list view, you can drag and drop the block wherever you would like.

If you have anchor IDs created for a Block, they will appear in List View, making blocks more easily distinguishable. See Page Jumps for additional information.

Screenshot showing List View at left with a columns group block. In highlighted text beside the anchor ID is visible. In the middle is a Post containing the selected columns block. In the right column, the block options have expanded Advanced and show the HTML anchor field completed with the descriptor: comparison.

List View in Appearance > Editor

You can find the same List View within Appearance > Editor.

List View displayed with a top level block selected to display options

Additional options are available within the Editor List View. Select the kebab button to display block options within List View.

  • Show more settings – displays global Settings (beside the save/publish button).
  • Copy
  • Duplicate
  • Insert before
  • Insert after
  • Move to
  • Lock – will lock only the container or block currently selected, not nested blocks at this time.
  • Make template part – see Template Parts
  • Add to Resuable blocks – see Reuable blocks
  • Remove block

Lesson Wrap Up

Tip: 💡 Follow up with the Exercises and Assessment outlined above.