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.
Drag and Drop Blocks
You can drag and drop blocks within the List View.
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.
List View in Appearance > Editor
You can find the same List View within Appearance > Editor.
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