Tag: Gutenberg

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.

This post is more of a “research” note I had while looking into the theme.json file for themes on WordPress 5.8. You can read the introduction post here: Introducing theme.json in WordPress 5.8 – Make WordPress Core or the documentation here: Global Settings & Styles (theme.json) | Block Editor Handbook | WordPress Developer Resources.

What is the theme.json? You can think of it as the style guideline a developer can set for a theme. This file will define what colors the editors will have access to, what font sizes, what type of values can be written and what options different build-in blocks will support.