How to use the Block Editor List View


List View in the block editor helps you navigate between layers of content and nested blocks. When you want to select and arrange blocks in Post and Page Editor, or even in Appearance > Editor, see what the List View can do.

Learning outcomes

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

Comprehension questions

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

Transcript

So you’ve created a post. And now you want to get at the individual items. Here you can see I have a post with many different block types inside of it. And let’s say I want to get into just the columns area. If I select it, it can be a little tricky sometimes to get to the thing I want.

Here I am clicking a second time, and now you’ll see that my cursor jumps there. But what I wanted was to select the entire group of columns, I can either select this larger button again, where it says select column, or I could go to this list view, and instead jump specifically to the columns area.

You’ll notice that is a menu that can expand and collapse and now I’ve selected the entire column. On the right-hand side of all of these, whether it is the top-level or sub-menu items, we have a kebab menu that lets us get to additional options such as, show more settings or hiding those settings. I can also choose to group something, create a reusable block from it, or move things around insert before after moving it to or duplicate things.

Additionally, while I am in here, if I had, for instance, on the advanced area and anchor such as the first column, and I hit spacebar between those words, and you’ll notice that automatically hyphenated things, not only is that what happened here, but if I look inside my list view, I now see that that displays that can help us identify the items a little bit faster as we’re navigating through this List View. So the List View is going to be your friend to get into the specific areas that you would like.

Additionally, if we go back out to the dashboard, and we go to Appearance Editor, you will see that we can use the List View here as well. So within for instance, the preview of my posts, maybe I would like to move the featured image and the title around and I could do that within the List View a lot easier than I could do it inside of the actual content area as well.

Check out the list view to arrange content in your site easily.

Workshop Details



Presenters

Courtney Robertson
@courane01

I am a Web Designer and Developer Advocate, WP Training Team co-rep, and is sponsored by GoDaddy Pro. Previously I taught WordPress and web development in career-technical high-schools, front-end bootcamps, and adult education. I have also worked in support and release communications within WordPress product companies.