How to use the Query Loop in the WordPress Block Editor

Hi WordPress users, this video is going to show you

a few tips for using the query loop block if you are in WordPress,

Gutenberg using the blocks. So first,

if you are trying to figure this out and you’ve landed on this video

or the page, I highly recommend going to WordPress.com

to this query loop block page,

it has a lovely rundown of how this works.

Now, I was still confused.

So here is a page that I will show you some

tips that you probably would find useful.

So you can search block query loop actually and

it will place it on your page.

Now the first thing is if you say choose it’s going to give you

patterns that you can choose from. So let’s say I pick a visual

pattern. So it’s automatically picking from my blog posts.

Alright, so I

ran into: as I was clicking on items that

it brought in I could not find the settings to

change it so that it wasn’t coming from my blog posts.

I even had a hard time being able to like delete it out.

So a few things that I wanted to show you is one of you

go to the top of your page to this vertical ellipse.

You can change from visual editor to code editor.

And sometimes code editor gives us an easier way to delete things that we

don’t want. And you can always switch between by going

back to visual editor here. Okay so this is the setting

area that I had a really hard time getting to show up.

And the way that you can find it, if you

can’t find it, is,

if you’re selecting on your items sometimes it’s

hard to get to the wider element.

So you might need to click on where you think the outline is of

this block. And then even then you’re not getting the

setting showing up here on the right. So you then need to click on

the parent block query loop. Once that’s selected now

over on the right you get query loop block and

you get the settings and

inherit query from template.

If you untoggle that now you can change

your post type.

You have newest oldest, oldest to newest,

A to Z, Z to A. You can choose pages and then if

you have custom post types which in this case I do,

it is called letter. You can see it can also bring

in your custom post types.

It would allow you to filter.

So right now I have filters by authors and keyword.

And then advanced is going to bring in your styling and also what HTML

element you’re wrapping it in.

There are also display settings so items per

page, max page to show, offset,

your alignment.

Let’s see. We should be able to

click in and now

if we did a grid view we could change the

view, a list view,

a grid view, post-template,

columns. So we have quite

a bit of options so you can see at this point I

put two in one column there’s

grouping so it can get pretty complicated but for me this is where I

started to get a little bit lost: is that I was having a hard

time getting to the loop area and

the other thing that you might need to do on your computer

is if you come into your vertical ellipse

there’s preferences and you might have some of these general interface

preferences such as allow right click contextual menus

or maybe always open list view appearance

let’s see accessibility blocks you might

be able . . you might have all your blocks turned on so that

might be your problem; so just know that you also have this

preferences option

In addition to as you’re working with the query loop I

want to draw your attention to the document overview icon

and the top left of your latest version of WordPress. When

you open this you’re able to see the list view and the outline. So,

your outline is going to let you see your heading.

Your list view is going to let you open all

of the wrappers, divs,

basically if you think about it as containers that things live within and

this will also be a really easy way to select what you

want. So in this case, you can see this is actually

the query loop

alright so to notice you are going to want in your settings

to make sure that you have your right column or panel

shown in this left one as you’re working so as you

would expand and open to get to let’s say your query

loop now the details for your query loop are over here on the right.

If you can’t see them that’s because you have that panel hidden

so click on your settings and it will open it the same if you

can’t see your list view you can open that with your document overview icon

one.

Alright, so you’ll likely find that it takes a little

bit of getting used to being able to grab your query,

umm but know that your loop is there and you are looking for

select parent block of columns,

select parent block group, columns,

columns. And we’ll see you and now we’re at query loop.

So you can continue to push this left button and it

will move you up the level of divs and groups

and kind of hidden boxes that are there.

And once you get it to query loop, when you click it,

that is how, oops. Let’s see,

we might have to continue to click it until we get to query loop.

And once it’s on query loop over here in block,

this is where we can change. All right,

I hope you find this helpful. If you have other

WordPress questions, on designertofullstack.com,

we have lots of posts that include WordPress and PHP,

programming and tips that will be helpful.

And, if you’d like to stay updated on our channel,

make sure you subscribe. All right, happy programming!