WordPress search block and search results: improved

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:

The results of adding the Query No Results block

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:

An error in the block has occurred

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:

Search results: no useful message for the user

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.