The WordPress Gutenberg Query Loop Block - a beginners guide

good morning today we are going to look at what i think is the most important guttenberg block if you look on your screens now you'll see the type of sites you can build with it because it lets you dynamically query your websites to create wonderful blog pages archive pages and potentially in the future woocommerce pages let's get into it block of the week block of the week yeah buck of the week which block is it going to be well you will have to stick around my friend and maybe you will see [Music] to give this video some context i'm going to show you how you can use the query loop block to do three things the first one is to create an awesome blog page looking a bit like this where we've got a featured post at the top with a big image and then as we scroll down we've got our other posts underneath with the featured image in the post except the second example is how to use the query loop block to create a lovely masonry grid layout for your blog pages or archive pages and the third example is to give you a glimpse of what might be possible at some point in the future and that is using the query loop block to create woocommerce pages so let's get into it so if you want to test this out for yourselves you are going to need at the moment a full site editing theme and you're also going to need the gutenberg plugin installed if you want to learn more about full site editing then i've done a beginner's guide and i've put a link to it up here for you but let's just add the query loop lock and i'll just talk you through the main settings on it so i'm just going to search to search for query loop now i'm building a custom featured post page template here and here's the query loop block so i'm going to add it into my page now when you first add it you've got different ways you've got different sort of layouts you can choose for it let me just close this down so we can see this i would recommend you just click on these little arrows here because this is going to show you very quickly the different layout options that you've got so you can see how it's pulling the posts in dynamically here but we've got different layouts so there's our sort of masonry layout and you'll see the one i actually want is this one to start with because i just want a one big featured image and then i want my sort of post title over on the right and my excerpt over on the right so that's the one i'm going to actually choose so i i click choose there's this other option where you can start blank which again does give you actually some different options i'm just going to choose choose so i choose choose that pops it into the page now you'll see some options down here or they might appear up here but this is kind of extra options so these are really important so let me just talk you through these this one here is very important that's how many items per page so the effect we're actually going for if i just go back to my example here we want one big featured post at the top and then we've got another query loop block underneath pulling in different posts okay so let me just go back to that one so essentially all i want is one item to page one item per page and over here on the right i can actually click into these actually before i do that let me just show you the actual breakdown of these can you see this is the query loop block itself within that we've got the post template block within that we've actually got two columns and we've got a post featured image block these are all blocks remember then the post title block and the post excerpt block all just blocks if i wanted to rearrange these i can just drag and change the order so i can lay these out any way i like so it's super cool all i really want to do at the moment for these is change the color of this so i'm going to change the text color and the link color and i'm also going to change the text color here and the link color for the except you can also write down here which is kind of cool your own read more text so you can put whatever you like in there okay so that's kind of where i'm at okay now that's the template remember that's not the actual page so what i need to do or you would need to do is just to go off and create a page which i'm going to do now so i just need to create a page that uses that brand new page template that i've just set up so i'm going to call this page my lovely new blog page okay and then what we need to make sure is over here on the right it's actually using this template which is the template if i flick back here you see the template up here is called featured post news page featured post news page and that now i won't put any content in that page because it's going to automatically just bring in that layout essentially okay so the page is using the page template that i've just customized right next up we're going to add some posts underneath it right so it's time to add some posts underneath it and also to show you one other cool thing because you can actually filter the posts by category and other cool things as well so i'm going to add another query loop block into my page basically i'm running another query here we go and we go through the same process again and again i get a different you know i get the same thing where i can choose what layouts i want for my for my blocks to come in and i can also say how many blocks i want so this is actually the layout i want i want a sort of standard grid you'll see it's missing the featured image but i'm going to show you how you can add that afterwards which is which will show you another really cool thing about the query loop block so i'm going to choose that that's going to dynamically bring in those posts to that page now you will notice hopefully a couple of problems we've got one the colors are wrong two we're missing the featured images three we've got a duplication we've got winter's winter clothes and we've got winter clothes here so there is a setting which i'm going to show you now which is this little option here which is offset what that means is you can offset this block to basically skip over a number of posts now we only want it to skip off one post skip over one post and that means it won't bring in this post it's going to basically skip over that post and bring in the next post so that's that's really cool when you're when you're using multiple multiple blocks in your pages you're going to need to use the offset and again it's just make sure you select here the query loop block to see the settings because again if you're down here you won't see the settings so just make sure in the list view you're selecting the top level query loop block and then there's this little option here that's how many you know how many items per page and the offset very very important right the other thing we need to do with this is just a bit of tidying up in terms of the colors which i'll do really quickly now when you change it in one section here it's going to change it for all of them you see how they're all changing which is another nice feature built into the query loop block so let's just change the text color and again you can customize the read more text if you want to you can just write whatever you like right a few other things to show you the next is we actually want a little featured image in here as well now where we put this is up to us you see there's just make sure you select the query loop block and i'm just going to add it here to start with and again if you add it into one it's going to add it into all there it is the post featured image block and that's just going to bring that in isn't that so cool and if you wanted that above it you could just drag it above it so you can see how easy it is to play around with these things now if i select the query loop block over here i just want to show you one other thing you've got some options in terms of the type of content you pull in so you've got post pages or products we'll come back to products when we look at woocommerce you can also change the number of columns here just with this little slider here so you can play around with that i think i'm happy with three although two looks pretty cool you can order it newest to oldest you can choose to exclude sticky posts you can also filter by category and tags and author and keywords i'm not quite sure how keywords works or whether it works at the moment i'm happy with that so i'm just going to save my template now remember i just need to go back to my page here reload it and we should have now our fantastic new blog page how cool is that and if you want to edit any of this stuff you just go back to the template so if i want to reduce this text size for example let's make it really small just go back to the template and edit the template and then whenever that has been used you know you're editing the page template that's what's so incredibly powerful um about this this block that you can just edit you can basically create your own custom templates now great stuff so that's the featured post layout i want to show you next the masonry layout because that's a cool example right here's this really lovely masonry grid layout where the it's like a brick work essentially that's why it's called masonry and as i scroll down you'll see it's just pulling in our posts in this lovely layout there's a couple of things i want to show you here we're just using the query loop block again to construct this page so rather than building this from scratch i'm going to deconstruct the page from the inside out if you saw me so here is the page in the template view and the important stuff is all on the left here this is the list view and you can see it's been constructed in pretty much the same way as the other page we've just got a few different options in here so we start with a columns so it's essentially two columns which is how we get our two columns and then we put a separate query loop block in into each into each column okay and so here's the first query loop block and if we look at our little settings down here you'll see we've just set it to display four items per page and then it and then we've just basically created these as we normally would so we didn't want the featured image we could delete the featured image block if we wanted the post title to go above that one we could just you know we could do all sorts of stuff to this in fact let's do this on this one as well let's move the post title above the featured image on both columns and you see how i'm editing both columns because we've got two query loop blocks going on here now the really i guess the important thing to note here is this second query loop block to get this to work the offset's absolutely essential okay and here we go if we open this up can you see this is set four items per page but the key thing the most important thing is you set this to the value of posts that you have in this page so it won't basically show the same post in each column you'll see if i if i change this to nor you can see how it's showing exactly the same post in both column because we're just using two query loop blocks so you just need to make sure whatever you've set in this first column as in number of posts you also set it in the second column and that's it essentially that will then create this lovely masonry layout and you'll see when i reload this page if this is saved let me just check that has saved our post titles now see how the post titles are now above the photos okay if you want them back beneath the photos you can literally just drag them in the list view over here so they're below the featured images save your template this is so cool save your template go back to the page that you're actually using that template on and there we go i have also found something really useful because there's this big new feature that's been added which is this duotone duotone filter which i've never really found the use for when i've been creating wordpress websites it is actually pretty cool when you're creating these custom post pages because you can apply these filters like let's say you want all your images to have the same sort of color treatment well you can actually just do it here so if i just click on my featured image block and give them both this sort of in this case this orangey feel can you see how they're all changing so you don't have to go into each image and apply a filter to it you can just do it in the template and then you get this nice you know this lovely consistency of image for your brand i think that's a really cool i've never really understood why the geochain filter was there it kind of makes sense now so at the moment i'm just going through and making these black and white so all the images now have this kind of cool black and white look so rather than having to edit them at source i can edit them in the template so i think that's a really cool thing right the final and third thing i want to show you today is the potential of how in the future we're going to be able to use the query loop block for woocommerce pages right to finish here is a glimpse of the future and potentially you're going to be able to use the query loop block for things like woocommerce pages and potentially for custom post types as well because um already with with it here if i click on the query loop block and then come over here you'll see there's this post type i've got three options post page or product so if i select product product that's actually dynamically pulling these products into this page for me these are all woocommerce products it's missing a few things so it's missing a price and it's missing things like the buying now button i've added it as a link here but again it's just using the query loop block to bring these in so this this is really really exciting so we're going to be able to really customize in the future um our woocommerce pages and we're also um starting to integrate our we build a blocks plug-in into full site editing and we'll build the blocks for those that don't know lets you customize the woocommerce product page using gutenberg and soon we're going to have a really cool demo that lets you use it to create custom templates for your product pages so there's a first proper look at the really exciting query loop block i hope you found the video useful if you did if you can give it a thumbs up that would be amazing because it really helps spread the word and if you want to see more and more gutenberg tutorials hit the subscribe button thank you so much and i'll see you soon

Channel: Jamie Marsland

Views: 1,128

Keywords: gutenberg, wordpress, gutenberg wordpress, wordpress gutenberg, gutenberg wordpress editor, elementor vs gutenberg, elementor, block builder, wordpress editor, classic editor vs gutenberg, query php, php query loop, templates, blog templates, wordpress templates, beginners, wordpress beginners, custom post template wordpress

Id: Inz5I7UuuE4

Length: 13min 3sec (783 seconds)

Published: Thu Oct 07 2021