On this page:
I have noted that WordPress (WP) 5.8+ can’t provide the user with a meaningful response when no posts or pages match a query. Now, in WP 6.0, there is: the Query No Results block.
The Query No Results block is used inside the Query block, and replaces the output of the Template block if there are no posts, no search results, etc.:
<!-- wp:template-part {"area":"header","slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:heading {"level":1} -->
<h1>Search results</h1>
<!-- /wp:heading -->
<!-- wp:query {"tagName":"div"} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:template-part {"slug":"article-loop","tagName":"article"} /-->
<!-- /wp:post-template -->
<!-- wp:query-no-results -->
<!-- wp:paragraph -->
<p>Nothing matches your search terms.</p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results -->
<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous {"label":"newer"} /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next {"label":"older"} /-->
<!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"area":"footer","slug":"footer-fancy","tagName":"footer"} /-->
The output looks like this in the current version of Panda-Puss:
This is certainly an improvement on displaying no text or using the crude solution I previously put forward.
Code reuse
The Query No Results block can be used anywhere the traditional Loop – now the Template block – could be found: tag.html, archive.html, search.html, index.php, etc. This is crying out, perhaps, for putting the block into a reusable block pattern or template part.
Query No Results in a block pattern
When I put the relevant code into a pattern, the front end produced no code, and the back end (the Site Editor) produced an error:
Query No Results in a template part
When I put the code into a template part, nothing happened either on the front end or the back end: it looked no different to how empty search results looked before the Query No Results block was introduced:
Conclusion
The Query No Results block adds functionality that improves the user’s experience: a blank screen leaves the user wondering if anything has happened; a message stating there were no hits is frustrating, but at least the user knows where they stand.
That I could not get the Query No Results block to work in a pattern or part means that the opportunity for code reuse has yet again been flushed down the drain.
