elpuas

const FLIP_CARDS = 'loop-patterns/flip-cards';

wp.domReady( function() {
	wp.blocks.registerBlockVariation( 'core/query', {
		name: FLIP_CARDS,
		title: 'Flip Cards',
		description: 'Flip Cards Query',
		isActive: ( { namespace, query } ) => {
			return (
				namespace === FLIP_CARDS

elpuas

import './simple-query';

elpuas

<?php
/**
 * Register Scripts
 *
 * @return void
 */
function block_assets_scripts_enqueue() {
	$block_asset_dependencies = [ 'wp-i18n', 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ];

	wp_enqueue_script( 'loop-patterns-scripts', plugins_url( 'build/index.js', __FILE__ ), $block_asset_dependencies );

elpuas

const SIMPLE_QUERY = 'loop-patterns/simple-query';

wp.domReady( function() {
	wp.blocks.registerBlockVariation( 'core/query', {
		name: SIMPLE_QUERY,
		title: 'Simple Query',
		description: 'Displays a Simple Query',
		isActive: ( { namespace, query } ) => {
			return (
				namespace === SIMPLE_QUERY

elpuas

innerBlocks: [
	[
		'core/post-template',
		{},
		[ 
			[ 'core/post-title' ], 
			[ 'core/post-excerpt' ] 
		],
	],
	[ 'core/query-pagination' ],

elpuas

attributes: {
		perPage: 3,
		pages: 0,
		offset: 0,
		postType: 'post',
		order: 'desc',
		orderBy: 'date',
		author: '',
		search: '',
		exclude: [],

elpuas

wp.blocks.registerBlockVariation( 'core/query', {
		name: SIMPLE_QUERY,
		title: 'Simple Query',
		description: 'Displays a Simple Query',
			return (
				namespace === SIMPLE_QUERY
				&& query.postType === 'post'
			);
		},
		icon: 'edit-large',

elpuas

/**
 * Order by last word in title.
 *
 * @param string $orderby orderby
 * @param object $query data
 *
 * @link https://wordpress.stackexchange.com/questions/1003/order-posts-by-last-word-in-title
 *
 * @return string
 */

elpuas

const SIMPLE_QUERY = `loop-patterns/simple-query`

wp.domReady( function() {
	wp.blocks.registerBlockVariation( 'core/query', {} )
);

elpuas

cd loop-patterns
// cd to the src folder and create 2 directories
cd src && mkdir css simple-query
// cd into our first variation dir and create index.js
cd simple-query && touch index.js