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.
- True
- False
Answer: 1. True
You can drag and drop items in the List View.
- True
- False
Answer: 1. True
Additional Resources
Example Lesson
How to use the List View
Navigate to a Post or Page that already contains content.
- Select the List View. You can close List View by either selecting the “x” or by selecting the List View icon once more.
- Select a Block by clicking on its name. Expand and collapse nested blocks, such a groups, columns, and more with the dropdown at left.
- 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](https://webcf.waybackmachine.org/web/20220121194947im_/https://learn.wordpress.org/files/2022/01/list-view-1024x538.png)
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.](https://webcf.waybackmachine.org/web/20220121194947im_/https://learn.wordpress.org/files/2022/01/drag-drop-in-list-view-edited.png)
View Anchor Links
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.](https://webcf.waybackmachine.org/web/20220121194947im_/https://learn.wordpress.org/files/2022/01/WordPress-List-View-anchors-edited.png)
List View in Appearance > Editor
You can find the same List View within Appearance > Editor.
![Appearance > Editor List View displayed. The Cover block kebab menu is visible, with options such as Hide more settings and copy visible.](https://webcf.waybackmachine.org/web/20220121194947im_/https://learn.wordpress.org/files/2022/01/Editor-List-View-edited.png)
Additional options are available within the Editor List View, such as making a selection of nested blocks into a template part, or reusable blocks.