Try: "No results" block container for the query block (WordPress#38806)

* Try: "No results" block container for the query block

* Linting and fixtures

* Update docs

* Add content to the default paragraph

* Update fixtures, try new block description

* Add block to query block variations, update placeholder text

Co-authored-by: Ari Stathopoulos <aristath@gmail.com>

docs/reference-guides/core-blocks.md

@@ -611,6 +611,15 @@ An advanced block that allows displaying post types based on different query par
 -	**Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~
 -	**Attributes:** displayLayout, query, queryId, tagName
 
+## No results
+
+Contains the block elements used to render content when no query results are found. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/query-no-results))
+
+-	**Name:** core/query-no-results
+-	**Category:** theme
+-	**Supports:** align, color (background, gradients, link, text), ~~html~~, ~~reusable~~
+-	**Attributes:** 
+
 ## Pagination
 
 Displays a paginated navigation to next/previous set of posts, when applicable. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/query-pagination))

lib/blocks.php

@@ -97,6 +97,7 @@ function gutenberg_reregister_core_block_types() {
 				'post-title.php'                   => 'core/post-title',
 				'query.php'                        => 'core/query',
 				'post-template.php'                => 'core/post-template',
+				'query-no-results.php'             => 'core/query-no-results',
 				'query-pagination.php'             => 'core/query-pagination',
 				'query-pagination-next.php'        => 'core/query-pagination-next',
 				'query-pagination-numbers.php'     => 'core/query-pagination-numbers',

packages/block-library/src/index.js

@@ -78,6 +78,7 @@ import * as postTitle from './post-title';
 import * as preformatted from './preformatted';
 import * as pullquote from './pullquote';
 import * as query from './query';
+import * as queryNoResults from './query-no-results';
 import * as queryPagination from './query-pagination';
 import * as queryPaginationNext from './query-pagination-next';
 import * as queryPaginationNumbers from './query-pagination-numbers';
@@ -252,6 +253,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 				// Experimental blocks.
 				homeLink,
 				postAuthorName,
+				queryNoResults,
 
 				// Full Site Editing blocks.
 				...( enableFSEBlocks

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

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/query-no-results",
+	"title": "No results",
+	"category": "theme",
+	"description": "Contains the block elements used to render content when no query results are found.",
+	"parent": [ "core/query" ],
+	"textdomain": "default",
+	"usesContext": [ "queryId", "query" ],
+	"supports": {
+		"align": true,
+		"reusable": false,
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true
+		}
+	}
+}

packages/block-library/src/query-no-results/edit.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __(
+				'Add a text or blocks that will display when the query returns no results.'
+			),
+		},
+	],
+];
+
+export default function QueryNoResultsEdit() {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
+	return (
+		<>
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

packages/block-library/src/query-no-results/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { loop as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};

packages/block-library/src/query-no-results/index.php

@@ -0,0 +1,59 @@
+<?php
+/**
+ * Server-side rendering of the `core/query-no-results` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/query-no-results` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the wrapper for the no results block.
+ */
+function render_block_core_query_no_results( $attributes, $content, $block ) {
+	if ( empty( trim( $content ) ) ) {
+		return '';
+	}
+
+	$page_key   = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$page       = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$query_args = build_query_vars_from_query_block( $block, $page );
+	// Override the custom query with the global query if needed.
+	$use_global_query = ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] );
+	if ( $use_global_query ) {
+		global $wp_query;
+		if ( $wp_query && isset( $wp_query->query_vars ) && is_array( $wp_query->query_vars ) ) {
+			$query_args = wp_parse_args( $wp_query->query_vars, $query_args );
+		}
+	}
+	$query = new WP_Query( $query_args );
+
+	if ( $query->have_posts() ) {
+		return '';
+	}
+
+	wp_reset_postdata();
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		get_block_wrapper_attributes(),
+		$content
+	);
+}
+
+/**
+ * Registers the `core/query-no-results` block on the server.
+ */
+function register_block_core_query_no_results() {
+	register_block_type_from_metadata(
+		__DIR__ . '/query-no-results',
+		array(
+			'render_callback' => 'render_block_core_query_no_results',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_query_no_results' );

packages/block-library/src/query-no-results/save.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function QueryNoResultsSave() {
+	return <InnerBlocks.Content />;
+}

packages/block-library/src/query/variations.js

@@ -66,6 +66,7 @@ const variations = [
 				[ [ 'core/post-title' ], [ 'core/post-date' ] ],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -81,6 +82,7 @@ const variations = [
 				[ [ 'core/post-title' ], [ 'core/post-excerpt' ] ],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -100,6 +102,7 @@ const variations = [
 				],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -119,6 +122,7 @@ const variations = [
 				],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},

test/integration/fixtures/blocks/core__query-no-results.html

@@ -0,0 +1,5 @@
+<!-- wp:query-no-results -->
+<!-- wp:paragraph {"placeholder":"Add a text or blocks that will display when the query returns no results."} -->
+<p></p>
+<!-- /wp:paragraph -->
+<!-- /wp:query-no-results -->

test/integration/fixtures/blocks/core__query-no-results.json

@@ -0,0 +1,19 @@
+[
+	{
+		"name": "core/query-no-results",
+		"isValid": true,
+		"attributes": {},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "",
+					"dropCap": false,
+					"placeholder": "Add a text or blocks that will display when the query returns no results."
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]

test/integration/fixtures/blocks/core__query-no-results.parsed.json

@@ -0,0 +1,19 @@
+[
+	{
+		"blockName": "core/query-no-results",
+		"attrs": {},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Add a text or blocks that will display when the query returns no results."
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n<p></p>\n",
+				"innerContent": [ "\n<p></p>\n" ]
+			}
+		],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n", null, "\n" ]
+	}
+]

test/integration/fixtures/blocks/core__query-no-results.serialized.html

@@ -0,0 +1,5 @@
+<!-- wp:query-no-results -->
+<!-- wp:paragraph {"placeholder":"Add a text or blocks that will display when the query returns no results."} -->
+<p></p>
+<!-- /wp:paragraph -->
+<!-- /wp:query-no-results -->