Extending the Query Loop block

Extenders needed a way to present bespoke versions of the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., with their presets, additional settings and disabled customization options when irrelevant to their use-case. With WordPress 6.1, the Query Loop block offers mighty ways to create such versions, through Block Variations.

To make WordPress recognize your variation you need to set the isActive block variation property. For providing an easy and consistent way for extenders to recognize and scope their variation a new namespace property has been introduced in Query Loop block.

Through the Query Loop block’s allowedControls property, you can control which features are presented to the user to simplify content creation.

You now also have a way to customize the query executed to fetch the desired posts setting extra arguments to the query attribute of the block, and you can do the same for the front end by using the query_loop_block_query_vars filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output..

Customizing Query Block layout

To customize your variation’s layout you can use the `innerBlocks` attribute to set the blocks that are available at the start, bypassing the set-up stage. You can also create specific Query Loop variation patterns to be suggested in the setup, and replace flows of the block. To connect a block pattern to a Query Loop variation, add the name of your variation prefixed with the Query Loop name (e.g. core/query/$variation_name) to the pattern’s blockTypes property.

An example block variation would look like this:

const MY_VARIATION_NAME = 'my-plugin/books-list';

registerBlockVariation( 'core/query', {
    name: MY_VARIATION_NAME,
    title: 'Books List',
    description: 'Displays a list of books',
    isActive: [ 'namespace' ],
    icon: /** An SVG icon can go here*/,
    attributes: {
        namespace: MY_VARIATION_NAME,
        query: {
            perPage: 6,
            pages: 0,
            offset: 0,
            postType: 'book',
            order: 'desc',
            orderBy: 'date',
            author: '',
            search: '',
            exclude: [],
            sticky: '',
            inherit: false,
        },
    },
    allowedControls: [ 'inherit', 'order', 'taxQuery', 'search' ],
    scope: [ 'inserter' ],
);

There is a new documentation page specifically for extending Query Loop block to learn more.

Props @sunyatasattva for the documentation page, for review @webcommsat and @bph

#6-1, #dev-notes, #dev-notes-6-1