5 Oct 2023 · wordpress
Set custom pattern in core/query picker
Full code example:
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
wp.domReady(() => {
// See all variations in https://raw.githubusercontent.com/WordPress/gutenberg/trunk/packages/block-library/src/query/variations.js
wp.blocks.unregisterBlockVariation('core/query', 'posts-list');
wp.blocks.unregisterBlockVariation('core/query', 'title-excerpt');
wp.blocks.unregisterBlockVariation('core/query', 'title-date');
wp.blocks.unregisterBlockVariation('core/query', 'title-date-excerpt');
wp.blocks.unregisterBlockVariation('core/query', 'image-date-title');
wp.blocks.registerBlockVariation('core/query', {
name: 'post-title',
title: __('Post Title', 'name'),
icon: (
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
aria-hidden="true"
focusable="false"
>
<path d="M4 14.5h16V16H4zM4 18.5h9V20H4zM4 4h3c2 0 3 .86 3 2.583 0 .891-.253 1.554-.76 1.988-.505.435-1.24.652-2.204.652H5.542V12H4V4zm2.855 4c.53 0 .924-.114 1.18-.343.266-.228.398-.579.398-1.051 0-.473-.132-.82-.397-1.04-.265-.229-.67-.343-1.217-.343H5.542V8h1.313z" />
</svg>
),
attributes: {
query: {
perPage: 3,
pages: 0,
offset: 0,
postType: 'post',
order: 'desc',
orderBy: 'date',
author: '',
search: '',
exclude: [],
sticky: '',
inherit: false,
},
},
innerBlocks: [['core/post-template', {}, [['core/post-title']]]],
scope: ['block'],
});
});The code has two parts:
Remove all default WP-provided patterns for the query loop (if you don’t want them)
Addition of the new pattern. The blocks are in
innerBlocks.
The wp.domReady is needed for the removal of the pre-exiting patterns in the query loop.