Query loop / Post template: Enable post format filter

lib/compat/wordpress-6.7/taxonomy.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Temporary compatibility code for post formats.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Add support for the post format taxonomy in the REST API.
+ * See wp-includes/taxonomy.php line 170.
+ *
+ * Needed to add post formats to the taxonomy filter in the query loop.
+ *
+ * @since 6.7.0
+ */
+add_filter(
+	'register_post_format_taxonomy_args',
+	function ( $args ) {
+		$args['show_in_rest'] = true;
+		return $args;
+	}
+);

lib/load.php

@@ -105,6 +105,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 // WordPress 6.7 compat.
 require __DIR__ . '/compat/wordpress-6.7/blocks.php';
 require __DIR__ . '/compat/wordpress-6.7/block-bindings.php';
+require __DIR__ . '/compat/wordpress-6.7/taxonomy.php';
 
 // Experimental features.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';

packages/block-library/src/post-template/edit.js

@@ -90,6 +90,7 @@ export default function PostTemplateEdit( {
 			taxQuery,
 			parents,
 			pages,
+			postFormat,
 			// We gather extra query args to pass to the REST API call.
 			// This way extenders of Query Loop can add their own query args,
 			// and have accurate previews in the editor.
@@ -138,7 +139,10 @@ export default function PostTemplateEdit( {
 							( { slug } ) => slug === taxonomySlug
 						);
 						if ( taxonomy?.rest_base ) {
-							accumulator[ taxonomy?.rest_base ] = terms;
+							// Skip post formats, as they are handled separately.
+							if ( ! taxonomy.rest_base === 'post_format' ) {
+								accumulator[ taxonomy.rest_base ] = terms;
+							}
 						}
 						return accumulator;
 					},
@@ -163,6 +167,10 @@ export default function PostTemplateEdit( {
 			if ( parents?.length ) {
 				query.parent = parents;
 			}
+			if ( postFormat?.length ) {
+				query.post_format = postFormat;
+			}
+
 			// If sticky is not set, it will return all posts in the results.
 			// If sticky is set to `only`, it will limit the results to sticky posts only.
 			// If it is anything else, it will exclude sticky posts from results. For the record the value stored is `exclude`.
@@ -205,6 +213,7 @@ export default function PostTemplateEdit( {
 			templateSlug,
 			taxQuery,
 			parents,
+			postFormat,
 			restQueryArgs,
 			previewPostType,
 		]

packages/block-library/src/query/block.json

@@ -25,7 +25,8 @@
 				"sticky": "",
 				"inherit": true,
 				"taxQuery": null,
-				"parents": []
+				"parents": [],
+				"postFormat": []
 			}
 		},
 		"tagName": {

packages/block-library/src/query/edit/inspector-controls/index.js

@@ -24,6 +24,7 @@ import OrderControl from './order-control';
 import AuthorControl from './author-control';
 import ParentControl from './parent-control';
 import { TaxonomyControls } from './taxonomy-controls';
+import PostFormatControls from './post-format-controls';
 import StickyControl from './sticky-control';
 import EnhancedPaginationControl from './enhanced-pagination-control';
 import CreateNewPostLink from './create-new-post-link';
@@ -52,6 +53,7 @@ export default function QueryInspectorControls( props ) {
 		inherit,
 		taxQuery,
 		parents,
+		postFormat,
 	} = query;
 	const allowedControls = useAllowedControls( attributes );
 	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
@@ -127,12 +129,15 @@ export default function QueryInspectorControls( props ) {
 	const showParentControl =
 		isControlAllowed( allowedControls, 'parents' ) &&
 		isPostTypeHierarchical;
+	const showPostFormatControl =
+		taxonomies && taxonomies.some( ( { slug } ) => slug === 'post_format' );
 
 	const showFiltersPanel =
 		showTaxControl ||
 		showAuthorControl ||
 		showSearchControl ||
-		showParentControl;
+		showParentControl ||
+		showPostFormatControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
@@ -263,6 +268,7 @@ export default function QueryInspectorControls( props ) {
 							parents: [],
 							search: '',
 							taxQuery: null,
+							postFormat: [],
 						} );
 						setQuerySearch( '' );
 					} }
@@ -324,6 +330,18 @@ export default function QueryInspectorControls( props ) {
 							/>
 						</ToolsPanelItem>
 					) }
+					{ showPostFormatControl && (
+						<ToolsPanelItem
+							hasValue={ () => !! postFormat?.length }
+							label={ __( 'Formats' ) }
+							onDeselect={ () => setQuery( { postFormat: [] } ) }
+						>
+							<PostFormatControls
+								onChange={ setQuery }
+								query={ query }
+							/>
+						</ToolsPanelItem>
+					) }
 				</ToolsPanel>
 			) }
 		</>

packages/block-library/src/query/edit/inspector-controls/post-format-controls.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+
+export default function PostFormatControls( { onChange, query } ) {
+	const { postType, postFormat } = query;
+
+	const { postFormats } = useSelect(
+		( select ) => {
+			const { getEntityRecords } = select( coreStore );
+			return {
+				postFormats: getEntityRecords( 'taxonomy', 'post_format', {
+					order: 'asc',
+					_fields: 'id,name',
+					context: 'view',
+					per_page: -1,
+					post_type: postType,
+				} ),
+			};
+		},
+		[ postType ]
+	);
+
+	const postFormatOptions = postFormats
+		? [
+				{ value: '', label: __( 'All' ) },
+				...postFormats.map( ( { id, name } ) => ( {
+					value: id,
+					label: decodeEntities( name ),
+				} ) ),
+		  ]
+		: [ { value: '', label: __( 'All' ) } ];
+
+	return (
+		<SelectControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ __( 'Formats' ) }
+			value={ postFormat }
+			options={ postFormatOptions }
+			onChange={ ( value ) => {
+				onChange( { postFormat: value } );
+			} }
+		/>
+	);
+}

packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -50,11 +50,16 @@ const getTermIdByTermValue = ( terms, termValue ) => {
 export function TaxonomyControls( { onChange, query } ) {
 	const { postType, taxQuery } = query;
 
-	const taxonomies = useTaxonomies( postType );
+	let taxonomies = useTaxonomies( postType );
 	if ( ! taxonomies || taxonomies.length === 0 ) {
 		return null;
 	}
 
+	// Remove post formats, as they are handled separately.
+	taxonomies = taxonomies.filter(
+		( taxonomy ) => taxonomy.slug !== 'post_format'
+	);
+
 	return (
 		<VStack spacing={ 4 }>
 			{ taxonomies.map( ( taxonomy ) => {