Alex Dimitrov

Set custom pattern in core/query picker

Written by

Alex Dimitrov

in

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.

More posts