Add portfolio archive template with custom query variation

assets/js/block-variation.js

@@ -0,0 +1,41 @@
+
+const { __ } = wp.i18n;
+
+wp.blocks.registerBlockVariation( 'core/query', {
+	name: 'twentytwentyfour/featured-image-query',
+	title: __( 'Featured Images' ),
+	description: __( 'List of posts with featured images' ),
+	attributes: {
+		namespace: 'twentytwentyfour/featured-image-query',
+		query: {
+			perPage: 6,
+			postType: 'post',
+			order: 'desc',
+			orderBy: 'date',
+			inherit: false,
+			sticky: 'exclude',
+			hasFeaturedImage: true,
+		},
+		align: 'full',
+	},
+	allowedControls: [ 'order' ],
+	innerBlocks: [
+		[
+			'core/post-template',
+			{ layout: {
+				type: 'grid',
+				columnCount: 3
+			} },
+			[
+				[
+					'core/post-featured-image',
+					{
+						aspectRatio: 2/3,
+						isLink: true,
+					}
+				],
+			],
+		]
+	],
+	isActive: [ 'namespace' ],
+} );

functions.php

@@ -84,3 +84,65 @@ function twentytwentyfour_block_styles() {
 endif;
 
 add_action( 'init', 'twentytwentyfour_block_styles' );
+
+/**
+ * Register a block variation for a query loop with only featured images.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/
+ * @see https://developer.wordpress.org/news/2022/12/building-a-book-review-grid-with-a-query-loop-block-variation/
+ * @return void
+ * @since Twenty Twenty-Four 1.0
+ *
+ */
+function twentytwentyfour_register_block_variation() {
+	wp_enqueue_script(
+		'twentytwentyfour-block-variations',
+		get_template_directory_uri() . '/assets/js/block-variation.js',
+		array( 'wp-blocks', 'wp-i18n' ),
+		wp_get_theme()->get( 'Version' ),
+		true
+	);
+}
+add_action( 'enqueue_block_assets', 'twentytwentyfour_register_block_variation' );
+
+function twentytwentyfour_rest_filter_query( $args, $request ) {
+	$has_featured_image = $request->get_param( 'hasFeaturedImage' );
+	if ( $has_featured_image ) {
+		// Only return posts with featured images.
+		$args['meta_query'] = array(
+			array(
+				'key'     => '_thumbnail_id',
+				'compare' => 'EXISTS',
+			),
+		);
+	}
+	return $args;
+}
+add_filter( 'rest_post_query', 'twentytwentyfour_rest_filter_query', 10, 2 );
+
+function twentytwentyfour_pre_render_block( $pre_render, $parsed_block ) {
+	if (
+		isset( $parsed_block['attrs']['namespace'] ) &&
+		'twentytwentyfour/featured-image-query' === $parsed_block['attrs']['namespace']
+	) {
+		add_filter(
+			'query_loop_block_query_vars',
+			function( $query, $block ) use ( $parsed_block ) {
+				// Only return posts with featured images.
+				$query['meta_query'] = array(
+					array(
+						'key'     => '_thumbnail_id',
+						'compare' => 'EXISTS',
+					),
+				);
+				return $query;
+			},
+			10,
+			2
+		);
+	}
+
+	return $pre_render;
+}
+add_filter( 'pre_render_block', 'twentytwentyfour_pre_render_block', 10, 2 );
+

patterns/archive-portfolio.php

@@ -0,0 +1,55 @@
+<?php
+/**
+ * Title: Portfolio Archive Template
+ * Slug: twentytwentyfour/archive-portfolio
+ * Template Types: archive
+ * Viewport width: 1400
+ * Inserter: no
+ */
+?>
+
+<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
+<div class="wp-block-group">
+	<!-- wp:template-part {"slug":"header","theme":"twentytwentyfour"} /-->
+</div>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0","margin":{"top":"0"}}},"layout":{"type":"default"}} -->
+<main class="wp-block-group" style="margin-top:0">
+	<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":"0","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"namespace":"twentytwentyfour/featured-image-query","align":"full","layout":{"type":"default"}} -->
+	<div class="wp-block-query alignfull">
+		<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} -->
+		<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
+			<!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"lineHeight":"1"},"spacing":{"margin":{"top":"0"}}},"fontSize":"x-large"} /-->
+
+			<!-- wp:spacer {"height":"var:preset|spacing|50","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+			<div style="margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
+			<!-- /wp:spacer -->
+
+			<!-- wp:post-template {"align":"full","style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"grid","columnCount":3}} -->
+				<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"2/3"} /-->
+				<!-- wp:spacer {"height":"var:preset|spacing|20","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+				<div style="margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
+				<!-- /wp:spacer -->
+			<!-- /wp:post-template -->
+
+			<!-- wp:spacer {"height":"var:preset|spacing|50","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+			<div style="margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
+			<!-- /wp:spacer -->
+
+			<!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between"}} -->
+			<!-- wp:query-pagination-previous /-->
+			<!-- wp:query-pagination-next /-->
+			<!-- /wp:query-pagination -->
+
+			<!-- wp:query-no-results -->
+				<!-- wp:pattern {"slug":"twentytwentyfour/hidden-no-results-content"} /-->
+			<!-- /wp:query-no-results -->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:query -->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer-portfolio","area":"footer","tagName":"footer","theme":"twentytwentyfour"} /-->