All right. So welcome, everybody, to this workshop on exploring the Query Loop block.
My name is Kathryn Presner, and I'm joining from Montreal, Canada.
I've been working with WordPress since 2008 as a web designer/developer,
later doing tech support as a Happiness Engineer. Now I'm working with the Training Team on
WordPress.org, helping develop and manage all the educational training materials we have on
learn.wordpress.org. So welcome to Helena. Helena will be helping out answer questions in chat
and bringing to my attention anything in the chat or anything else that needs to be taken care of.
So thank you very much in advance. This workshop is geared mostly for beginners, but also, you know,
anyone who just wants to look at the Query Loop block maybe a little more closely than you have
in the past, or maybe you have not even used the Query Loop block yet. Maybe you're new to block
themes and you want to learn a little bit more. So welcome to everyone. I want to just tell you
what we're going to be covering today. We're going to be looking at what is a Query Loop block, of
course, where you can use one, the types of blocks that can be nested inside the Query Loop block,
and how to move the blocks around within and around the Query Loop block. And we're going to look,
of course, at how to customize it, looking at sidebar settings and the block toolbar,
how to make the Query Loop block do different things and how to make it look different as well.
Then we're going to have some Q&A, of course. You can feel free to ask questions along the way,
but you can also wait and see if I'm going to cover something. And then if it's not been covered,
you can ask the question at the end. We will try and get to all the questions. There should be
plenty of time for that. And let's see how it goes. All right. So first, I want to just tell you what
a Query Loop block is. And we're going to just go to my demo site here. A Query Loop block displays
a series of the same type of content. In other words, Query Loop block can be used to go through
and display posts or go through and display pages. And it can even display other repeating content
like a custom post type. For example, if you have a store, you can have a Query Loop block for
products. Or if you have a portfolio site, a Query Loop block can display portfolio projects.
And the reason it's called the loop is that basically WordPress looks for the first thing
of that content type. So if we're doing a Query Loop block for posts, it looks for the first post
and it displays it. And then it looks for is there something else to display in posts? Yes,
it finds the next one. And it keeps looping through that post type until there's nothing
further to display. So that's why it's called a Query Loop. Query is a technical term. And it's
looping through and displaying. So that is what a Query Loop blocking is. Let's look at some examples
because it's always easier to see things visually, I find. Here we have a recipe blog called Smitten
Kitchen. And running WordPress, of course, all these examples I'm going to show you are running
WordPress. And we have a Query Loop block on the left hand side. So it displays the featured image
that goes with this recipe post. We have the post title. We have the post content, which consists
of text and images. And we have a read more link. We have the date. Link to comments. We have some
categories here. And then we have the next recipe. And that repeats the same information. So we have
the Query Loop going through all these recipes. Then you'll notice we have more recipes but
displayed a little bit differently. So this is another Query Loop block displaying more recipes
but in a different way. Going to show you another example. This is a news site. And we have multiple
Query Loop blocks again on the same page. We have one Query Loop block here. We've got a sort of
featured post displayed a little bit larger. This is a Query Loop block. We have another one down
here. And we have another one on the side with latest most popular posts. And there's even more
Query Loop blocks as you go down. So this is another example of multiple Query Loop blocks.
Here we've got Usain Bolt, the runner. We've got a very simple Query Loop block with news
going down the page in a full width format. Here's a different type of Query Loop block.
This is a music software site. And if you scroll down, you might notice something here.
What do you notice? You notice a price. Right? And you notice add to cart. So this is a store.
So remember I said we can have Query Loop blocks that loop through different types of content.
Here we are looping through products and displaying them. In a row of three, a column of rows of
columns of columns, three columns in rows going across. So this is looping across all the products.
And here, this is an artist. And we have a portfolio Query Loop. So if you see here,
these are beautiful. I find this art very beautiful. We have a featured image. We have a
category. We have a link with a link to the title of the post. And if you click on it,
this is actually both a portfolio and a store. This is actually using an e-commerce
plugin called WooCommerce except they have the purchasing capability turned off. You have
price on request. But it looks more like a portfolio. But it's also using e-commerce
software. So this is combining a couple of things. So those are some examples of some Query Loops.
And you can see here that you can see just items in the wallpaper category, just items in the
mural category. So that's a way to use categories to display different products in that category.
All right. Now let's get to some of the technical nitty gritty of where we can use Query Loop
blocks. So this is my example site. And just visit the site. We're going to be using this for all our
demo. I'm using 2024 if you're interested. That's the most current default block theme or the current
default theme that WordPress ships with. So as I go, Helena is going to be posting some links in
the chat. Thank you very much. And so Helena has posted the two main pieces of documentation and a
lesson about the Query Loop. So we've got the documentation explaining what the Query Loop does
and different parts of it. And we've got a lesson that you can go through with a video recording as
well all about the Query Loop. All right. So the Query Loop can be used in different places. It can
be used in the site editor. So that's found under appearance editor. And we're going to go in there
in a moment. If you don't see editor under appearance, it probably means you're using an
older theme. And these are typically called classic themes. Older themes don't use the site
editor. And so you can't use the Query Loop block in them because you can't edit the theme in the
same way you can in a block theme. So you can also use a Query Loop block on pages. Query Loop block
is just a block, quote, unquote. So you can use it anywhere you can use any other type of block.
We'll be showing some examples of using the Query Loop block on pages. You can even use it in
outposts. Although typically we don't use them as much there. But there might be a situation where
you would want to do that. And you can do it. All right. So let me show you first, we're going to go
into the site editor. So that's under appearance editor. Going to go in here. And we're going to
go into the first template that we see here. So the site editor is made up of templates. And the
different templates drive the display of different parts of your site. And if you are interested in
learning more about templates, I did a workshop on that. So Helena, when you have a sec, maybe
you could pop that in. We won't be going too in depth into everything about templates. But we
will be working inside a template. So I'm going to click here on the right. And you'll see that we
are in the blog home template. And that is the default homepage template in 2024. And it is what
is driving the front page here. So what do we see here? So the first thing I like to do to better
get a handle on what we're looking at here is turn on the list view, also called the document
overview. So you go up here on the left. And if you hover over these three little parallel lines,
you'll see document overview. And if you click on that, you'll see that it opens up this panel on
the left-hand side. And if you click anywhere on the page on the right in your preview area,
you'll see that, bingo, look, it opened up a whole bunch of nested blocks here on the left.
You can also open and close these blocks manually by clicking the little arrow or
carrot icon, C-A-R-E-T, not carrot, the vegetable. But clicking here on the right
automatically opens up a whole bunch of nested things so it can be quicker.
So the first thing I want to point out is this is the Query Loop block here. So by default,
it is titled Query Loop. And the icon for the Query Loop is this little sort of infinity symbol.
It's not quite the infinity symbol. It doesn't close, but it's alluding to the infinity concept.
And the other thing to note is that if you don't see the word Query Loop,
it's because this block has been renamed. So a few versions ago of WordPress,
the ability to rename blocks was put in. So if you click on the three dots here, you can see
rename. And I just want to point that out right away because later on, we're going to be
seeing some different words instead of Query Loop. And you'll see that, you know, you could say my
QL or whatever you want. And that can help when you have multiple Query Loop blocks on the page
to distinguish between them. Okay. So what can go inside a Query Loop block? What can be
nested inside? By default, you'll usually see the post template block. The post template block is
handy because it puts inside there some of the standard things that you might want to have.
So if you add a post template block somewhere on your page, it's going to have the key things that
you want. But the cool thing is you're not locked into any of this. You can move these things around.
Let's look at the title. So the title, the way this Query Loop block works, and the reason I wanted
to show you this first is this is the default Query Loop block that you're going to see on the
home page of 2024. If you're wondering why this looks a little different than the demo side of
2024, it's because I removed a bunch of stuff. And actually, I'm just going to remove one little
quick thing here because I want to add it back for us later. I'm just going to remove that. Okay,
pretend you didn't see that. I'm going to save this one second. Okay. So yeah, this looks very
much like the part of 2024. If you scroll down in 2024, you'll see this. So we've got the title.
That is the post title. And if you see here, that typically by default links to the post. So this
is a recipe blog, and it links to the individual post, the single post. And that's in the left
hand column. Now in the right hand column, we've got this thing in purple. And I don't know if you
know what the difference is when you see something in purple post meta here. And here we've got header
and further down we've got footer. Does anyone know what it means when the block is in purple?
I'm going to ask some rhetorical questions, but you're also welcome to type in the chat. If you
know the answer to my question, you're welcome to type it in or you can think it in your head.
So the difference is these things in purple are called template parts. And template parts
are groups of blocks that can be reused in different parts of your site. And they are
consistent across the site. So post meta is a template part that collects the typical metadata
about a post that you often see. For example, the date. You often see the date on a post or
category. You often see what categories a post is in. So those are some examples of things that are
here by default. But you can also add things and remove things. So another common thing you might
want to have on a blog Query Loop is tags. So I'm going to show you how to add tags here.
There's two ways. Well, there's multiple ways to do it. I'm going to show you the two ways I recommend
when you're working in this mode. You see here the three dots next to the categories block. It says
options. If you click on that, you see add before or add after. That will allow you to add another
block before or after this one. The other common way to do this is here on the right. This is called
the block toolbar. You have the same three dots with the same options here. This is the same thing.
And you have again, add before or add after. So let's say I would like to add tags. I would like
to display the tags that are related to this post. So I'll click add after. And you see that it gives
you this type slash to choose a block. And it also gives you the plus sign to add a block. I'm going
to use the slash because this might be new to some of you. I find it the quickest way to add a block.
So if you type slash, you get this pop up with different options. And it shows you the most
recently added blocks. You can also start typing. So I'm starting, I just typed T and A and then you
see I type tags. It narrows down the options based on the letters you're typing in. So I'm going to
choose tags. And you'll see that I'm just going to click here so we can see this better. You'll see
that the word chocolate popped in. That's because chocolate is a tag on the chocolate fudge post.
And you see here on the left that you can see that the tags block got added. So I always recommend
keeping this as open as possible, keeping the blocks as open as possible on the left so you can
see sort of an overview of what's going on here. So let's click save. And it warns you, are you
sure you want to save this? You're changing a template part, which is going to affect other
parts of your site. It warns you because this is used in multiple places, not just on this,
you know, in one spot. So we're going to click save. And then I'm going to refresh my front end.
And you'll see that the tags have popped in. So, you know, here for cozy casserole, the tags are
casserole and comfort food for the best fries. Tags are fried and potatoes. But you'll notice that,
you know, it's the words are placed right after the category. And so this might look a little
messy, right? We said it says in desserts chocolate. It looks a little, a little bit
hard to distinguish, especially when it's not breaking onto the next line. So I'm just going
to go back here and show you that some of these some of these blocks inside the Query Loop,
if I click on it, you'll see it actually allows you to add what we call a prefix and a suffix.
prefix is a word or or a symbol that can go before and suffix is something that no after. So if I want
to say in prefix, I'll just I'm just starting to type I just basically clicked in there and started
to type say tags colon and we say save. And then if we refresh, it looks better, right? It got
as tags chocolate. And the reason by the way, the reason this is here as a prefix rather than just
saying, Oh, why don't I just add the word tags as a paragraph? If I added the word tag and didn't
make it part of this block, the word tags would always appear even if a post didn't have a tag.
This isn't something I, you know, thought of demoing before, but I think it's worth mentioning. So
let's say we add a new post sample no tag. And I'm just gonna publish it.
If we refresh, so right now this looks okay. I mean, obviously uncategorized is not ideal. But
what happens if we say we removed the word tags from here from the prefix, I'm just going to remove
it. So now we have no prefix. I remove that space. So now we have no prefix. And what if I said,
okay, instead of the prefix, I'm just going to say add before, and I'm going to type the word tags
colon. So if we did that instead, and I refresh here, you know, it looks not too bad here where
there are tags, obviously, don't worry about the size. But my point is, you're going to see that
word even on a post that doesn't have tags. So by the advantage of putting it in the prefix instead
is that it works even when you don't have tags. So I'm going to remove that. But that's why those
were built into that block. I'm going to remove that because that looked terrible. Okay, so that's
an example of adding a block within the Query Loop. And you can also remove things. So let's say we
don't want the date. Actually, before I remove the date, I want to show you something. We've been
working a lot in the left hand list view. But I want to show you that you can also open up the
right hand sidebar or the block settings panel. So up here on the right next to the save button,
you click settings, you get the block toolbar or the settings sidebar. And this shows you
all the different things you can do with each block. And we'll get into this more a little bit
later when we customize, but I did just want to show you that you can customize the date format
from here. Let's say you don't like the standard year month date, which is my preferred format,
for most things, maybe not for a blog. Let's say you like the traditional sort of,
you know, US and Canada month, day, year like this, you can select it right from here.
So that's really cool. And this overrides anything you might have in settings. So you might know that
you can set a date format in settings general, this will override that for this Query Loop.
All right, so but let's say you don't want a date at all. And I just show you that this is,
if I refresh the date is reflected here. If I want to remove the date, I can do that from here.
So again, on the block toolbar, or here on the left, if you scroll down, you always should have,
typically you have the delete option on most blocks. So now it's gone. And now I also want
to remove the dash because the dash doesn't make sense anymore. And you can save it. And
you can see that that's gone. So you can remove anything you want, you can also move things around
within the Query Loop block. So let's say you want tags first, you can drag and drop in case
you didn't know, you can drag and drop here in list view. And you can also use so here I've moved
tags before categories. And I'm saving it and you can see now we've got tags before categories.
You can move things around. You can also use these little arrows here on the block toolbar
to move things around. So someone asked about what about adding author? Absolutely. So if you
want to add, let's say you want to add the author before categories, you can click, I'll show it
from here this time. So I click the three dots at the end of the block, I'm going to say add before.
I'm going to this time, I'm going to show you how to do it with the button, click plus.
And then you can type in author. And I want to add author there. So author is a block that includes
a couple of things. It includes avatar. Let's say you just want the author name, I'll show you how
to do that. You click plus and type author. You want just the author name. There you've got the
author name. This one doesn't come with suffix or prefix. And the reason is because unlike tags,
every post must have an author. So if I click add before and type by, every post has an author. So
you're never going to see the word by floating around by itself. All right. Gene has a question.
Can you specify the dates that the post will be displayed? I'm not sure if you mean scheduling a
post, which is a little bit outside of the Query Loop question. Maybe Gene, you can clarify what
you mean by that. And I'll look at it in a little later. Another thing I want to show you is actually
something a little bit more visual. What if you wanted to add the featured image that goes with
each post? I'm going to do that, let's say under the titles, I'm going to go add after this time.
And I'm going to type slash featured. And I'm going to display it. And there's the yummy fudge
picture. I'm going to save that. And you'll see that that gets popped in. Now, this doesn't look
great, right? This looks a little weird. They're very big. So I'm just going to show you that
a fancy thing, it's a little bit of a fancy thing. But what you can do when you have a columns block,
I clicked on columns here, you can make this become a three column block instead.
And now you have an extra column. So you have a third column. And I want to move this featured
image into this third column. But I want to have the post title on the left, I want to have the
featured image in the middle and then the metadata on the right. So to do that, I'm going to actually
use this little arrow on this last column. And I'm going to click move to left at left is a bit
confusing, because we're actually moving it up. But that's just because that's what all these
arrows say, they say move left, but we're actually moving it up. We're moving it up only because
there isn't enough space. Let me just close this. When you when you expand the column, you can see
we actually did move it to the left. So I moved it to the left. And now I'm just going to drag this
featured image into the column. So I just drag and dropped it into the main column, the middle
column. And that's going to look better. And see that looks a lot better. Okay, we have a clarification.
Jean says, having a date that the post will no longer be displayed. So for example, in for coming
event, when the date has passed, the post is no longer displayed. So that's like a timed post that
is only available for a limited amount of time. That is not something that is built into WordPress
core. But there are plugins that will do that. So that's the short answer. Because there are definitely
use cases for that. Okay, let's go back to the Query Loop. So okay, I want to show you a few more
kind of fun examples. We took go so we've been working in the template and this template drives
the homepage. But what if we wanted to use a Query Loop block on a page? I mentioned before that we
can use Query Loop blocks in lots of different places, we're going to go into some page examples.
So I'm going back to my dashboard, I'm going to pages. And I'm going to go into a demo page I
have here. Now in 2024, they built in this cool feature that when you create a page, it asks if
you want to choose from a pattern. When you open the page, it will ask if you want to choose from
a pattern. We're going to skip that for now, because we're going to do this from scratch. Okay.
So I want to click plus here and show you something else.
Actually, I'm going to do it in a bit of a different way.
So we could choose a pattern from here. Actually, no, sorry, I'm going to show you in a completely
different way. Okay, we're going to we're going to add a Query Loop block from scratch. So we're
going to click query. And it gives you two options. One is to start from blank, and one is to choose
a pattern. For this one, we're going to start with a pattern, and we'll do from from blank later.
So if you click pattern, these are basically pre designed sets of blocks, that's all a pattern
is a pattern is a pre designed set of blocks. These are some that come with 2024. And I want to
show you one, I'm going to scroll down, you can see that it even gives you a preview based on
your own content, which is really nice for giving you a sense of what this is going to look like.
Before we do, I want to remove that test post we made, because it's going to mess up our example.
So I just trashed that post we made with no tag. Okay, so I'm going to choose one called offset.
And you can even search. So I know the name of the pattern I'm looking for. It's called offset.
And you can see the title, the name of the pattern just below, going to click on that. Okay. And I
want to show you what this what this is and how this was created. So, oh, the first thing we need
to do also is we need to open up the side panel, I'm going to open both panels. And we need to turn
off inherit query from template in order to make advanced changes to the Query Loop block,
you need to turn this off. And in many most cases, I would say when you're modifying your Query Loop
blocks, you should probably turn this off. Once you turn this off, you will see different options,
both here on the right in the panel, and here on the block toolbar. So one that you get when you
turn off and here at query from template is display settings. And we'll look at this in a minute.
You can see again, when I toggle this back on, that is gone. Okay, so you want to turn that off.
And so let's look again, let me save this at what's happening here. So what's happening here is
you've got a set of posts on the left. And you should have a set of posts on the right,
they're not appearing for some reason. Of course, this always happens during a demo,
it doesn't look exactly like it does when you're testing. But we'll look at this in detail. So
on the Query Loop block, this first one, that's because there's no offset for some reason. Okay,
offset means skipping a certain number of posts. So we're going to display five posts here on the
left. So this we're going to display five posts. And then you'll see that there's a second query
loop block here in the second column. And we're going to, it's because we had in turn inherit
query from template off, we're going to turn that off on the second Query Loop block. We're going
to look at the display settings on this side, we're going to say five here as well. You can see that
this one has an offset of two, let's set something here, we're going to display two here, we're going
to display two in the first one. And we're going to offset by two. So let's save and see what this
looks like. Alright, so in the first column, we have one and two. And in the second column,
we have a bunch of blank space, and I'll show you where this is coming from. And then we have
other posts going down the right hand column. Now, the reason we're offsetting closes for a second,
the reason we're offsetting, can anyone think about why we might be offsetting?
Think about it in your head, or you can type it in. What happens if we don't offset, if we don't
offset, can leave it either blank or type zero, it's the same effect. If we don't offset, and we
have two Query Loop blocks, duplication, Ryan got it, we are displaying basically the same posts,
except I had said only display two in the first column. But you can see that the chocolate fudge
and cozy casserole posts are duplicating. So to prevent duplication, when you have multiple
Query Loop blocks, you use the offset to say, hey, I'm already displaying those two posts in
the first Query Loop, so you can skip them here. So you put the two, and you offset it by two.
Now I said that I was going to show you where that blank space is coming from.
If you see here, when I hover over this blank area, it is showing you that there's a spacer
block, there's a 200 pixel high spacer block, spacer blocks are used to add space, obviously,
and that's where the space is coming from, between and above the blocks.
I want to show you some more cool things that you can do with the Query Loop block once you've
turned off the inherit query from template. Shelley, I'm going to get to that in a moment.
Shelly has a question about displaying only specific categories and tags, and you've read
my mind because that's coming up. All right. So when you scroll down here, you'll see that
once you've turned off inherit query from template, you've got post type. By default,
the Query Loop block displays posts, and that is what we are displaying. But you can also display
pages. And if we have time later, I'll show you this. But if you have products, those will also
be an option. If you have any other custom post types, that will be an option as well. So that's
really cool. You have an order by option. By default, the option is newest to oldest, and that's
the sort of typical blog display where your most recent blog posts display first, and then the rest
go under that. But you can also reverse the order. Now, if you've never seen this before, your mind
might be blown because this used to be something that you would need to either use a plugin to do
prior to block themes, or maybe you would need to create a child theme and edit the PHP. This is
something that was not simple to do before block themes. So this is really cool to see. We even
have alphabetical options. Let's say you want your recipes to display an alphabetical order, A to Z.
So you've got C. Why is that? B is displaying before C. Oh, that's because that's our second
Query Loop block. So you can also go in reverse, Z to A. We're going to keep it newest to oldest.
Now, you can also do things with sticky posts, and I'm going to do that now, actually. So
let me actually go back to our other... Actually, okay. While we're here, I want to show you
something that you can do with featured images. I want to show you here, you have some cool options
for linking to the post. You can have your featured image link to post, even open in a new
tab, but typically, we don't recommend that. And you can do things like change the look and feel
of the featured image itself. So you can add an overlay to it if you want to add an overlay
like that. And if you can change the opacity down here, you can add a duotone filter and different
colors. And sorry, go back here. You can change the aspect ratio if you want to make these all
square, for example, you can do that. And you can also change the border radius. So down here,
you don't see the default value, which is sort of a little bit of a limitation currently. And
the block editor, hopefully, one day, you will be able to do that. But you can say, I don't want a
rounded border, and we say zero. So just go back here, you can see the second to see the difference
between the default and the changes that we just made. Okay. I want to go back to our dashboard,
and I am going to show you another example. We'll go back to pages, and we'll go back to blank.
Okay. So to show you a few more examples, I'm going to choose another pattern here.
I'm going to choose this one, and I'm going to save it. And I'm going to show you the page.
I'm actually going to turn inherit query from template off. Okay. So we've got all our posts
appearing one after the other. So let's say we only want posts in the chocolate category to display.
That is something we can do with filters. And this relates to Shelley's question,
can you select only a specific category or tag? If we click on filters, and we click taxonomies,
so you need to know that taxonomies are different ways of classifying information, and the default
taxonomies for WordPress posts is categories and tags. So if you click taxonomies, you get two new
options here, categories and tags. So to display everything in just the chocolate category,
you start typing chocolate. Why is that not popping up? I'm not sure. I think I'm having an issue.
I'm going to save this. I'm going to refresh the page. Try that again.
Oh, and by the way, if you look here on the left, it says full with posts with uppercase titles,
but you see the Query Loop icon. So you know that this pattern had previously by the theme developers,
the name has been changed. But it is the Query Loop block. Okay. Let me try this again.
Okay. Why is that not coming up? Oh, because the category is called dessert. Sorry,
I'm getting mixed up. Okay. So the category is dessert. So let's say you just want to display
all desserts. You can do that. So you click desserts and you click save. And then we refresh
the page. And you've only got desserts. Chocolate fudge, chocolate cake, strawberry custard cups.
Yes, thank you, Shelley. Notice chocolate is a tag. Thank you. Clearly, I have not had enough
coffee today. Okay. But here's the cool thing you can do because you might know that WordPress
automatically creates category archive pages. So if I go to the homepage and click on desserts,
there already is a page for desserts. It looks a bit different, but you know, you could make it
look like this. But here's the cool thing you can do with Query Loop blocks that you could not do
otherwise, or you could do, but it would be a lot more complicated. You can have a page displaying
just chocolate desserts. So you can have a page, I can say I want a tag. And I want to say,
limit this to post both in the dessert category and with chocolate tags. You can save this. And
now if you refresh, there's no more strawberry posts. So you've just got the things in those
two categories in the category and the tag. So that is a cool thing you can do.
You'll also see that you have filters. You can filter by author or keyword. I'm going to remove
these. And I'm going to say, let's say you just want the post by Jane Chen. You can filter that
and it will just display post by that person. Or if you want post by that person and me, you can
filter that way. So these are combinations you can do that you can't do easily otherwise. And
finally, you can even filter by keyword. Let's say you want all posts containing casserole.
There's only one, but you can see that it displays that way. Okay. I have you had a question. Does
using the core button block now have the option to link to the corresponding post? You can link to
anything from the button block. So I'm not 100% sure if this is relating to Query Loop block.
I'm going to keep moving on. Helena, maybe you can get Matthew to clarify what they mean. And if
it relates to the Query Loop block, we'll come back to it if we have time. All right. So I want
to show you another thing you can do. So, you know, when I showed you the example of Smitten Kitchen,
we have this nice display here. You might want to do that yourself. I want to show you how to make
this type of display into something a little more visual. So think about what blocks might you be
able to overlay text on top of an image. I don't know if you can think about the type of block that
typically has an image in the background and a text overlaid on the top. If anyone can think of it,
it is the cover block. Yes. Jean got it. So if you click plus, you click cover,
and you'll see, look, it even shows us an example of what this block looks like. I'm going to click
that. You can set the cover block to use the featured image for this corresponding post. And
that is very handy. So I'm going to say use featured image. Now, instead of typing in a title
manually, which that's kind of not useful here because the title is going to be different
depending on the post, we want to put the title block here. So I'm going to say title,
and that gets displayed on top of the image. We want to make it a link. Now,
links in this theme are black, so we don't want that black. We're going to switch to the styles
panel here and make links white. So that looks better. And we want to, yeah, so we want to save
that and just see what that is starting to look like. So you can see here that it automatically
pulls in the featured image for this post. It automatically displays the title and it automatically
links to that post. So we've just done a lot in a very short amount of time. Of course, you want
to then clean things up. You don't want that title there. And you can do things like move this out of
the stack and you can make it display wider. You can start-- look, look how nice this is starting
to look. So you can do all kinds of cool things. You can remove the extra information. And you can
start to make really nice layouts this way. If you want to center this, you can. It might look nicer.
And so you can play around and start to get some really nice effects. Something like this,
you used to have to search for a theme that looked like this. But now with the Query Loop block,
you can make this yourself. Let's say you want to add a-- if you go under styles here,
you want to add a duotone filter to make this all the same color. And you want to have a minimum
height. You can get really fancy here. As fancy or as not fancy as you want. See, this is starting to
look really consistent. Maybe you don't like orange, but this is up to you. All right, what
else do I want to show you? Yeah, I want to show you that you can change the alignment. So if you--
you can do things like put this cover block inside a group. And then you can start to
play with layout and position. You can make it a fixed width if you want to do that. So I just
basically put the cover block into a group. And then I set it to be a specific width.
Matthew, you keep asking about the button block. But the button block is not related to the query
loop block. So I'm just-- you said automatically linked to the post in a Query Loop block.
Button block is independent. So I think the answer is no. A button block is independent and will
link to whatever you set it to link to. It is not an automated type of link. Or you could put the
title inside a button block. I'm not sure if that's what you mean. But I can just quickly
try that if you want. I will add a button block here. You can add a button block there. I'm going
to move that inside the cover. Sorry, move the whole button block inside the cover. And then I'm
going to move the-- I'm going to remove the title block. And I'm going to say, no, you can't put--
no, you can't do it. You can't add a title block inside a button block. So you cannot do-- I don't
think you can do what you're trying to do. But what you can do is you can-- I'm just-- sorry,
I'm clicking undo, by the way. I'm just undoing what I did. You can make the title block look more
like a button. So you can add a background color behind it. And you can start making it look more
like a button. So maybe that would solve what you're trying to do. Depends what you're trying to do.
If you're trying to make something that looks like a button that automatically links to each post,
I think you're going to have to style things a little bit more because you can't add the title
block inside a button. OK. I'm going to move on. But if we have time, we'll get back to this.
The other thing I want to show you is that-- let me just remove this. When you have the post template
block inside the Query Loop block, you have the option here in the toolbar to display things--
to display your posts either in a list or in a grid. And you'll see here that this is in a list.
List just means one underneath the other. So you can see that our posts are being displayed one
underneath the other. If you want to display this in a grid, however, I'm just going to take the
background color out. If you want to display this in a grid-- again, this used to be so complicated
to do previously, but you can just click Grid View, click Save, and all of a sudden, your posts are
displayed in a grid. And it's as easy as that. It's as easy as toggling that. And if you click--
if you look on the right, you'll see that the grid view allows you to even set the number of
columns here. So if you, for example, want it to be four columns wide, you save it. Obviously,
it doesn't look as great here because there's not that much space here. If I turn the sidebar panel
off, you have a little more space. But where you really want to check it is on the front end here.
So you can see this is looking really good. You didn't used to be able to do this as easily.
OK. So I think I've covered the main things I wanted to show you. There is one more complicated
thing I want to show you. But if we have time, I want to make sure I get to people's questions.
And we have 10 minutes left. Jeffery, you added a question before. Is this static? What if there
were another post created? Does the block now include all data? Yes, it is dynamic. It is a loop.
The loop is WordPress saying, how many posts are there? What's the first post? What order should
I display it in? Is there a new post? So let me just show you that right away. Let me in another
tab go to the dashboard. Going to add a new post. So you'll see that the most recent post here is
chocolate fudge. If I add another post and call it chocolate brownies and add some--
Lorem Ipsum. Here I have this shortcut for Lorem Ipsum, which is a dummy text.
We won't go looking for a featured image. But we will go ahead and publish this.
So what happens now if we refresh? What do you think we're going to see? Can anyone guess?
Or what are we going to see refresh? The post pops in. We don't have a featured image. So it
doesn't look super great. But it does link to the chocolate brownies post. And all the data is here.
I didn't give it a category. If I wanted to give it a category, I can do that. Click the post tab,
put it in the desserts category. Give it the chocolate tag. Oops, misspelling that. Chocolate
tag and refresh. And then it's in desserts and chocolate. And if we go back to the blank page
and refresh, it's there. So what happens in mobile view? Will the grid automatically be stacked?
Yes, it will. Yes, it will. The grid is-- I'm going to try making the page smaller.
And you'll see that it stacks. It does stack. So like the columns block, the columns block
does the same thing. We go to offset. We have two columns. If we make this smaller,
it also stacks. The column block has an option to not stack. The grid does not. So if you wanted it
not to stack, you would need to do something extra. Write some code probably. Yes, thank you, Helena.
Helena has re-shared a bunch of resources. So we have the Query Loop block documentation,
which is a page I'll show you here, all about the Query Loop block and the different options
in here. We didn't go over every single option that is available. So if you want to learn more,
you can go there. And also, there is a lesson. So learn.wordpress.org is an amazing repository of
lessons and courses about different things. So I would highly recommend you check this out.
It's got more information about all the different blocks. If you're getting started in development,
if you're getting started as a user, or if you're more intermediate, you want to learn how to develop
themes. We have resources for that. So this is a specific lesson all about Query Loops. And then,
if you're interested in the workshop I did previously on templates, you can check that out.
So since I don't see more questions for now, I'm going to show you one other thing.
So I'm just going to show you a cool thing you can do. Let's say above this grid, this one, but
close all this stuff. Okay. Let's say you wanted one post to be bigger and displayed a little bit
differently above all this. I'm going to show you two ways to do it with the Query Loop block.
We're going to add another Query Loop above this Query Loop. So I'm going to click the three dots
and go add before. I'm going to type Query Loop. And I'm going to say start blank. We didn't get
to this before. So I'm glad we're doing this now. When you click start blank, you're actually not
starting 100% blank. You're starting with either the title and date on the post or title and excerpt,
title date and excerpt, or image date and title. And you can edit these. But it's basically to make
sure that you're provided with the basic information about a post. So you don't completely
blank Query Loop with nothing in it. It's useless. Nothing will be displayed. So I'm just selecting
this one. I'm going to open it here. I'm going to remove pagination. By the way, we didn't look at
this. But outside the query or inside the Query Loop block, you can have pagination, you can have
previous and next. And you can have something that's displayed if there are no results. You can
say nothing found. So you can customize that message. Again, this was something that was
hard to do prior to block themes. But I'm going to remove all this because I just want to display
one post above all the others. But right now we're displaying a bunch of posts above all the others.
I just want to display one post. So let's go back into here. Let's say chocolate brownies. We want
to make this sticky. Who want to update that and make that sticky? You can do something.
If I turn on the sidebar, you can say -- so by default, we're including all posts in our query
loops, including sticky posts. If we just want to say display only the sticky posts, we can say
only here. And I'm going to save this. And I'm going to see what we have in our thing. Okay.
Go back here. So why is that not being displayed? I just want to check something here.
Going to date. The only sticky post we have is chocolate brownies. And we want to exclude
sticky posts from this second Query Loop block. So the first loop is going to include just sticky
posts. And the second loop is going to exclude query -- sticky posts. Sorry. So I'm going to refresh
here. Okay. And it's not being displayed. Why is that? Interesting. Interesting. For some reason,
featured image. I'm going to remove this. So sometimes things don't work as we expect.
This is one of those cases because we should be displaying just the sticky post.
And I do see chocolate brownies as the sticky post. But why is just the title being displayed?
So the title and date are being displayed. But the featured image is not. And I'm not sure
why the featured image is not. Let's say linked post. I'm not sure why the featured image is not
being displayed. That's a bit of a mystery to me. But we only have a few minutes left. So unfortunately
we haven't solved the mystery. It is being displayed. And notice it's not being displayed
down here. Yes, Paula says maybe you could look at the HTML to understand more. And that is a very
good question. It is not being output at all. So I'm not sure why it's not being output.
So, yes. So Shelley asks, will the Query Loop work with custom post types? Yes. I mentioned that
earlier. I don't know if it came in late. But yes, it does. So, for example, in a store, this is a
store. So custom post type of products. In a portfolio page, if you have a custom post type
of portfolio project, it does work. And you will have the option to display them. So, yeah.
I'm just checking here. Now this is going to bug me why it is not being displayed here.
Still a bit of a mystery. Does chocolate brownies have a featured image? Yes. Oh, it's gone. Thank
you. This was the test post we created earlier. Thank you. You solved the myth. Okay. Just quickly,
I'm going to trash this. And I'm going to make this one sticky. Sorry. I got confused and forgot
that we had added that. Thank you so much. So now when we refresh, there we go. There we have
chocolate brownies there. And it does not have the fancy different effects we did here because it's
a separate Query Loop. Thank you so much, Shelley, for remembering that chocolate brownies was a test
post. Excellent. So it is working as we expect. And if we want to make this, if I refresh this,
I should even see it here. Yeah. We see it as expected. So if we want to make this look a little
more like our others, we can click featured image, go into styles, and start making it match.
Let's say we want this to be square, actually. And we want to do some fancy things to it. We
can. We can add a duotone filter to match the others, et cetera. Yes. This is why it's great
to have a lot of sets of eyes on things because people can notice things that someone else might
not pick up. Yes. So the overlay capacity looks a little bit different than the rest. The power of
the team, yes. More eyes are better than just one. Sue is asking how to save the chat. And I think
someone else has already -- yeah, try clicking the three dots at the top and say save chat. Three
dots at the top and save chat. That sometimes is glitchy, but sometimes works. So hopefully it
works today. So I think that's it. I think we got to everybody's questions. Thank you so much for
all the excellent questions. And thank you, Helena, so much for helping out with the chat.
I hope you are excited about Query Loops. And I hope you are inspired to dive into a block theme
and experiment and see what kinds of effects you can get on your own site. And yeah, look forward
to seeing you at a future workshop. Please don't forget that we have learn.wordpress.org,
which has all kinds of resources that have been put together to help you
navigate WordPress and enjoy the rest of your day.
[BLANK_AUDIO]