Notes: This post is part-2 of the leaning note series towards understanding creating additional template types using full site editing (FSE) interface. This learning post is still in active development and updated regularly.
In the previous part 1, we created header section of the author template. In this section, the new No Result query block is explored.
For some background, the No Result Block adds “a container block in which you can place any other blocks, that are displayed when the query (loop) has no results“. This block is available only within the Query block.
In this GitHub ticket, @jordesign provides some context as follows:
Currently when there are no results for a query – a generic ‘No results found’ message is shown. This could be improved to provide users with better direction on how to make sure there are results.
This is particularly relevant if the query block is loaded when the user has no published posts – the message appears as soon as the block is added with no indication of what to do about it.@jordesign | GitHub
Let’s start exploring the new No Result query block.
Part 1: Learning to create header block pattern for page or post template
Part 2: Exploring No Result Query Block (this post)
Part 3: Building Author template for block theme
In this learning-note post, how to use No Result query block is explored using FSE#13 call instruction and taking inspiration from Justin’s WP Tavern post.
Step 1: Required Setup
The No Result block query is placed inside a query block as shown in this GitHub ticket #40014 discussion thread by @ndiego where he outlines the required setup for using No Result block.
It can be added with the quick inserter as shown in this short video of @annezazu from #13 FSE testing call.
Screenshot showing required setup to use No Result block.More detailed use case of it is demonstrated by Anne McCarthy, Automattic Wrangler, in this short video. In the GitHub ticket, @annezazu writes that the current user experience of the No Result block is sub-optimal but efforts are underway to improve and make it better including the her her following suggestion:
- “Update the default text to be grammatically correct/more intuitive. Current: “Add a text or blocks that will display when a query returns no results.”
- “Consider making the look/feel more like a Group block since it’s meant to act as a container.
- “Explore how to show that it displays conditionally.”
As of this writing this is still work-in-progress.
Step 2: Proof of Concept
To add No Result block, first select the Query block and at the bottom corner click + sign and search for No Result block. Then, the block can be customized as desired.
Screenshot showing No Result query block (left panel) and customized message in the right panel.Step 3: Use Case Example
The No Result Query block can be used in any query blocks, to conditionally display if there were no results on the parent query. In this authoring an author template use case example, Anne has provides following “how to ..” instructions to add No Result Query block inside a parent query block including this short video.
In the #13 FSE Tesing call, @annezazu provides the following suggestive instructions to customize the No Result Query block:
- Customize the No Results block as you’d like. This block will display content when no results are found. You can add something like “Check back for future content from this great author that we are lucky to have write with us” and/or you could add the “Subscribe Callout” pattern to nudge folks to subscribe to the site.
- Once done, select the overall No Results block > Open the three dot menu > Select “Lock” > Check “Prevent Removal”. This will prevent folks from accidentally removing this without unlocking it first since it might not be obvious at first what the role is of this new block.
Inspired by this WP Tavern post, where Justin uses another query block (eg. latest post) to display a few latest posts underneath the message. Following Justin’s post, I took liberty to design my add the No Result block in one of my block theme’s author.html (work-in-progress) template, which displays the No result query as follows:
Screenshot showing results of No Result query.In the example above, author testuser1 has no published posts and hence the no-result query is displayed.
That’s it!
Wrapping Up
In this short learning-note post, the use of No Result query block was explored. In the next section, the markup is used to create author template.
Resources
Before starting to create my own block patterns, I did a brief google search for useful guide and tutorials on creating patterns and found the following useful for my project.