{"id":14641368,"date":"2021-07-08T23:00:09","date_gmt":"2021-07-08T23:00:09","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=14641368"},"modified":"2026-05-05T13:12:38","modified_gmt":"2026-05-05T13:12:38","slug":"list-view","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/list-view\/","title":{"rendered":"List view"},"content":{"rendered":"\n

List View is a new tool to help you navigate between layers of content and nested blocks. It\u2019s currently visible in the Top Toolbar and will remain open as you navigate through your content. This makes it easy to move between the exact pieces of content you want to alter, whether that\u2019s an individual Paragraph block at the very end of a post or a Columns block that contains a beautiful selection of products to choose from. Think of it as the ultimate tool to navigate block complexity, select exactly what you need, and easily view all of the blocks that make up your content at once. <\/p>\n\n\n\n

How to use List View<\/h2>\n\n\n\n

How to find List View<\/h3>\n\n\n\n

You can find List View in the top toolbar of the editor:<\/p>\n\n\n\n

\"The<\/figure>\n\n\n\n

How to open and close List View<\/h3>\n\n\n\n

To open list view, select the Document Overview icon as shown above. This will cause the view to open and stay open until you close it once more. You can close List View by either selecting the “x” or by selecting the Document Overview icon once more.<\/p>\n\n\n\n

\"Screencast<\/figure>\n\n\n\n

Since WordPress 6.4 version, list view will show image previews for Image<\/a> and Gallery<\/a> blocks.<\/p>\n\n\n\n

\"List
List view displaying image previews for Image and Gallery blocks.<\/figcaption><\/figure>\n\n\n\n

How to select blocks<\/h3>\n\n\n\n

List View allows you to both see all of your content at once and select any block you’d like. To select a block and bring it into focus, click on the name of the block in List View. This will select that layer of content for you to then customize to your liking. <\/p>\n\n\n\n

How to select multiple blocks<\/h3>\n\n\n\n

You can select multiple blocks at one in the List View by holding down the “shift” key and clicking on them.<\/p>\n\n\n\n

\"Screencast<\/figure>\n\n\n\n

How to drag and drop blocks<\/h3>\n\n\n\n

After opening List View, select the block or section of blocks you want to drag and drop. After selecting, you can then drag and drop the content wherever you’d like within the List View sidebar. You are not able to drag and drop within the Editor itself. <\/p>\n\n\n\n

\"Selecting<\/figure>\n\n\n\n

How to make changes to individual blocks<\/h3>\n\n\n\n

Each block within List View has a three dot menu that you can click on to take further action on the block itself. You can also select a block and delete it with ease using your keyboard controls. <\/p>\n\n\n\n

\"Opening<\/figure>\n\n\n\n

How to collapse sections<\/h3>\n\n\n\n

Next to each section of blocks, you’ll see an arrow icon that you can click to collapse or expand sections of blocks. This is helpful if you’re trying to navigate between complex content in order to more readily focus on different sections. <\/p>\n\n\n\n

\"The<\/figure>\n\n\n\n

How to help distinguish between blocks<\/h3>\n\n\n\n

If a block has an ID\/anchor set, it\u2019s displayed in List View so it\u2019s easier to distinguish between other blocks and reference as you want. Here\u2019s an example with a IDname<\/code> anchor:<\/p>\n\n\n\n

\"The<\/figure>\n\n\n\n

Locked Blocks<\/h3>\n\n\n\n

If a block has been locked<\/a>, a small icon will show next to its name in the list view.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

Hidden Blocks<\/h3>\n\n\n\n

If a block has been hidden, a small eye icon will show next to its name in the list view.<\/p>\n\n\n\n

\"\"
Screenshot<\/figcaption><\/figure>\n\n\n\n

Template Parts & Synced Patterns<\/h2>\n\n\n\n

Template parts<\/a> and synced patterns<\/a> are highlighted in purple to distinguish them from regular blocks. This highlight\/outline is visible in the editor area and in the list view itself.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

Outline Section<\/h2>\n\n\n\n

There is an alternative next to the List View called “Outline”. The outline displays the follow post information:<\/p>\n\n\n\n