• I was looking into this documentation on Extending the Query Loop block (https://developer.wordpress.org/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.wordpress.org/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!

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)

The topic ‘Extending the Query Loop block – Using patterns’ is closed to new replies.