Extending the Query Loop block – Using patterns
-
I was looking into this documentation on Extending the Query Loop block (https://developer.www.ads-software.com/block-editor/how-to-guides/block-tutorial/extending-the-query-loop-block/), and I have questions about ‘connecting’ a pattern with a Query Loop variation, mentioned in this section “Customize your variation layout” (https://developer.www.ads-software.com/block-editor/how-to-guides/block-tutorial/extending-the-query-loop-block/#customize-your-variation-layout):
“In order for a pattern to be “connected” with a Query Loop variation, you should add the name of your variation prefixed with the Query Loop name (e.g. core/query/$variation_name) to the pattern’s blockTypes property. For more details about registering patterns see here.”
I don’t quite understand, and it’s not working for me. It will be great if there’s a simple example.
I do have the variation created in the js file, using registerBlockVariation(), similar to the examples from the documentation:
registerBlockVariation(
'core/query',
{
name: 'test_variation_name',
title: 'Book list',
icon: 'book',
description: 'Display a list of books',
attributes: {
namespace: 'test_variation_name',
query: {
perPage: 6,
pages: 0,
offset: 0,
postType: 'book',
order: 'desc',
orderBy: 'date',
author: '',
search: '',
exclude: [],
sticky: '',
inherit: false
},
},
scope: [ 'inserter', 'block'],
allowedControls: [ 'inherit', 'order', 'taxQuery', 'search' ],
}
);Regarding the ‘pattern’, does it mean to create a pattern in the theme folder under the ‘patterns’ folder?
Example:
posts-1-col.php<?php
/**
* Title: List of posts, 1 column
* Slug: test/posts-1-col
* Categories: query
* Block Types: core/query
* Description: A list of posts, 1 column.
*/
?>
<!-- wp:query {"query":{"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"layout":{"type":"default"}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:group {"tagName":"article","style":{"spacing":{"padding":{"top":"var:preset|spacing|small","bottom":"var:preset|spacing|small"},"blockGap":"1.5rem"}},"layout":{"type":"default"}} -->
<article class="wp-block-group" style="padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)">
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->
</article>
<!-- /wp:group -->
<!-- /wp:post-template -->
<!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"center"}} -->
<!-- wp:query-pagination-numbers /-->
<!-- /wp:query-pagination -->
<!-- wp:query-no-results -->
<!-- wp:pattern {"slug":"spruce/hidden-no-results"} /-->
<!-- /wp:query-no-results -->
</div>
<!-- /wp:query -->or should I be registering a pattern using register_block_pattern(), like below:
register_block_pattern(
'test/posts-1-col',
array(
'title' => __( 'My Test Pattern', 'my-plugin' ),
'blockTypes' => array( 'core/query/test_variation_name' ),
'content' => '<!-- wp:query {"query":{"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"layout":{"type":"default"}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:group {"tagName":"article","style":{"spacing":{"padding":{"top":"var:preset|spacing|small","bottom":"var:preset|spacing|small"},"blockGap":"1.5rem"}},"layout":{"type":"default"}} -->
<article class="wp-block-group" style="padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)">
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->
</article>
<!-- /wp:group -->
<!-- /wp:post-template -->
<!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"center"}} -->
<!-- wp:query-pagination-numbers /-->
<!-- /wp:query-pagination -->
<!-- wp:query-no-results -->
<!-- wp:pattern {"slug":"spruce/hidden-no-results"} /-->
<!-- /wp:query-no-results -->
</div>
<!-- /wp:query -->',
)
);Can anyone point me in the right direction?
Thanks!
- You must be logged in to reply to this topic.