TheQuery Loop block is an advanced block that allows you to display posts based on specified parameters; like a PHP loop without the code. You can think of it as a more complex and powerful Latest Posts Block. With various block patterns integrated into the block setup, you can do things like create a portfolio or a page full of your favorite recipes.
In order to add a Query Loop block, click on the add block button and select the Query Loop block. You can also type “/query loop” and hit enter in a new paragraph block to add one quickly.
Detailed instructions on adding blocks can be found here.
After adding a Query Loop block, you’ll see various layout options in the form of block patterns to choose from. You can view all options either in a carousel format or a grid format. Each Query Loop block is made up of various nested blocks, like the Post Title blockandPost Excerpt block. While you won’t be able to edit the content of these nested blocks, you can customize the appearance and layout.
How to choose a pattern
- Add a Query Loop block using your chosen method.
- From there, you’ll be presented with an option to either click through a carousel of options or to view all options in a grid. You can toggle which method you prefer at the top of the block.
- Select the option you want to use by using the “Choose” button when in the carousel view or by selecting the option you want when in grid view.
How to start blank
- Add a Query Loop block using your chosen method.
- Select the “Start Blank” option.
- From there, you’ll see four variations you can choose from. Select the one you want to use.
How to customize the appearance
There are numerous ways to customize the Query Loop block partially because it’s made up of nested blocks that you can rearrange, add to, and more. When you customize one block in the Query Loop block, the changes will apply to all blocks of the same type. While customizing this block, it might help to use the List View found in the top toolbar. Here are some ideas for customization to get you started:
- You can change the width of various aspects of the Query Loop block.
- You can change alignment of blocks within the Query Loopblock.
- You can add blocks into the Query Loop block, like Post Author or Post Excerpt.
- You can rearrange the blocks to your liking, dragging and dropping or using the movers to do so.
- You can change the number of posts listed by selecting the Query Loop block and adjusting the Display Settings option in the block toolbar.
- You can set various color options using the Block Settings options.
- You can add in featured images by adding the Featured Image block.
Block Toolbar Options
Each block has its own block-specific controls that allow you to manipulate the block right in the editor.
The block toolbar for the Query Loop block has the following options:
- Wide width – Increase the width of the Query Loop block beyond the content size.
- Full width – Extend the Query Loop block to cover the full width of the screen
This option allows you to control the following:
- Items per Page – Choose how many posts you want to show within the Query Loop block.
- Offset – Enable the Query Loop block to skip a certain number of LitePress posts before starting output.
- Max page to show – Limits how many pieces of content to show.
List view (default)
Displays your post in a stacked list.
Displays your posts in a grid view.
Query Loop Settings
Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.
The color options for the Query Loop block impact the entire Query. Keep in mind that you can also customize the individual blocks that are within the Query Loop blocktoo.
- Text color – Controls the color of any text.
- Background color – Controls the overall background of the block.
- Link color – Controls the color of any links.
Inherit query from template
This is an option that you can toggle on and off, depending on whether you want to customize the query that the loop relies upon. LitePress will otherwise rely on the template being used to determine what posts appear. If you toggle it on, certain customization options will be hidden. If you toggle it off, more customization options will appear.
- Newest to Oldest (default)
- Oldest to Newest
- Alphabetical A to Z
- Alphabetical Z to A
This option allows you to choose between three options:
- Include (default) – Displays sticky posts.
- Exclude – Removes sticky posts.
- Only – Shows only sticky posts.
This option allows you to customize further what posts are being displayed. If you don’t see this section, it’s because you need to toggle off the “Inherit query from template” setting.
- Categories – List any categories you want included separated by a comma.
- Tags– List any tags you want included separated by a comma.
- Author– Select from a list of all authors.
- Keyword – Enter any keywords you want included.
The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. It also allows you to assign an HTML element.
Demonstration of the Query Loop block
- Added in resources section on 2021-07-14