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:

  1. Remove all default WP-provided patterns for the query loop (if you don’t want them)
  2. 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.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.