3

I have inherited a theme which is built with FSE. Inside index.html which is set to display the blog posts, I have a query as such:

<!-- wp:query {"tagName":"main","queryId":0,"query":{"perPage":8,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"displayLayout":{"type":"list","columns":1}} -->
<main class="wp-block-query">

    <!-- wp:pattern {"slug":"epi/simple-header"} /-->

    <!-- wp:search {"label":"Search","placeholder":"Search","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true,"required":false} /-->

    <!-- wp:post-template {"layout":{"inherit":true}} -->
        <!-- wp:post-title {"isLink":"true"} /-->
    
        <!-- wp:template-part {"slug":"posts/post-metadata", "tagName":"div", "className":"post__metadata"} /-->

        <!-- wp:post-featured-image /-->
    
        <!-- wp:post-excerpt {"moreText":"Read more"} /-->
    <!-- /wp:post-template -->

    <!-- wp:query-pagination -->
        <!-- wp:query-pagination-previous /-->
        <!-- wp:query-pagination-numbers /-->
        <!-- wp:query-pagination-next /-->
    <!-- /wp:query-pagination -->

</main>
<!-- /wp:query -->

Is there a way to add a no-results template after the <!-- /wp:query --> tag, i.e. is there a core block to achieve this or do I need to use a custom shortcode to output some custom logic and content?

My experience so far of FSE removes some of the power of conditional statements with the traditional method of creating WordPress themes.

I am also confused what to refer to these: wp:query and wp:post-featured-image, are they "tags", "markup", "gutenberg tags" (I never know the correct way to say them).

Improve this question
2
  • they're blocks, it's rare that you would modify this markup manually in a HTML editor, and expected that you would load the templates in the site editor interface and adjust them in the block editor. Then you can take the new versions from the database and replace the original HTML file templates. Also the wp:query` etc are all blocks, WP uses HTML comments to define blocks beginning/end without introducing boilerplate tags
    – Tom J Nowell ♦
    Jan 10 at 15:36
  • Ok thanks for explaining. The thing that was most surprising with FSE is that you actually write this markup exclusively when developing the themes. It's true that you can edit them in the editor but then they are saved directly in the theme. It does away with PHP template as you actually create the template as html files with the block syntax.
    – Web Assembler
    Jan 10 at 15:47

1 Answer 1

Reset to default
4

There is a No Results block that can be added to the query loop block. Any inner blocks added to it will be displayed when there are no results. Most blocks are supported as inner blocks.

Here's the markup of an example where I added a group block containing a paragraph block:

<!-- wp:query-no-results -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>No results found.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- /wp:query-no-results -->
Improve this answer
6
  • Perfect, thank you! Do you know where I can find a definitive list of block markup like this? I couldn't find this in the WordPress Codex.
    – Web Assembler
    Jan 10 at 15:59
  • @WebAssembler All I do is add the block to the editor and then copy and paste it. That's all this markup is. There's enough variation in blocks that there aren't solid rules that can be used to guess the markup. You'd need to read the code, so it's far easier just to make the editor do that part and copy the result. The ease of doing that makes any documentation redundant.
    – Jacob Peattie
    Jan 10 at 16:01
  • The only block available to me in the block editor is "Query Loop" I don't see a No results block to add in. Do you need to use the Gutenberg plugin to see this?
    – Web Assembler
    Jan 10 at 16:04
  • 1
    You need to add the no results block inside the query loop block.
    – Jacob Peattie
    Jan 10 at 16:05
  • Ah, I realized why I couldn't see it- when inserting a Query Loop block, I only see the option to add the no-results content when starting from a blank template. If I select to choose a pattern for the Query Loop, the option to add no-results is not there. This is probably how the theme was coded as the pattern template doesn't include that markup.
    – Web Assembler
    Jan 10 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.