The Loop Reimagined: Query Loop Blocks
The "Loop" is the heart of WordPress, responsible for fetching and displaying posts. In classic themes, this was a PHP while(have_posts()) : the_post(); loop. In FSE, this logic is handled visually by the Query Loop Block (core/query).
1. The "Why": Visual Control Over Content
The Query Loop block democratizes content display. It allows users and theme developers to build complex post grids, lists, and carousels directly in the editor without writing a single line of PHP. It separates the query (what content to fetch) from the template (how to display each item).
This block is responsible for passing "context" to its inner blocks. It tells the Post Title block which post's title to show for each iteration of the loop.
2. The "How": Block Structure
A Query Loop has two main parts:
- The Query (
core/query): The parent block that defines the query parameters. - The Post Template (
core/post-template): The child block that contains the layout for a single item in the loop.
<!-- 1. The Parent Query Block -->
<!-- wp:query {"queryId":1,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query">
<!-- 2. The Post Template Block (The Loop's Item Layout) -->
<!-- wp:post-template -->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-featured-image {"isLink":true} /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->
<!-- Optional: The Pagination Block -->
<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->3. Inherited vs. Custom Queries
The most important setting on the Query Loop block is the inherit flag.
inherit: true
- What it does: The block automatically uses the main query for the current page.
- Use Case: On a Category Archive page (
archive.html), it will display posts from that category. On the main blog page (index.html), it will display the latest posts. You don't need to configure anything.
{ "inherit": true }inherit: false
- What it does: You take full control. You can specify the post type, number of posts, order, and more.
- Use Case: Creating a "Latest 3 News Articles" section on your homepage. This is a custom query, completely separate from the main page's content.
{ "inherit": false, "postType": "news", "perPage": 3 }4. Next Steps
You have now mastered the core mechanics of FSE theme development. The final step is to learn how to make your theme more interactive by offering different color schemes and pre-built sections.
Proceed to Part 7: Advanced Variations & Patterns.