Implement category template for the category taxonomy

[bobbingwide]

Requirement

Display a grid of blog post titles in a particular category with the following structure

• Standard header
• Letter pagination menu
• Breadcrumbs
• Category description
• Responsive grid of post title links - 3 columns down to 2 or 1
• with Pagination
• Page footer
• Footer

[bobbingwide]

While trying to create the category template with a template part called category-query I received the following:

Notice: Undefined variable: template_part_id in C:\apache\htdocs\wordpress\wp-content\plugins\gutenberg-wordpress-source\lib\template-loader.php on line 199

Both the template and template parts were created using the Code editor. I had intentionally omitted the postId attribute; which works for other template parts.

This message comes from create_auto_draft_for_template_part_block(().

[bobbingwide]

Further strangeness ensued as I tried to correct it.
Somehow the category template had changed leaving a parameterless wp:template-part tag. Leading to:

Notice: Undefined index: slug in C:\apache\htdocs\wordpress\wp-content\plugins\gutenberg-wordpress-source\build\block-library\blocks\template-part.php on line 50
Notice: Undefined index: theme in C:\apache\htdocs\wordpress\wp-content\plugins\gutenberg-wordpress-source\build\block-library\blocks\template-part.php on line 51

[bobbingwide]

I discovered how to use the tagName attribute to the wp:template-part block.
Here I've used it to use the section tag for the category-query.
Note: The className attribute doesn't get applied to the generated block.

<!-- wp:template-part {"slug":"header-2-columns","theme":"fizzie"} /-->

<!-- wp:paragraph -->
<p>Category description goes here</p>
<!-- /wp:paragraph -->

<!-- wp:template-part {"postId":891,"slug":"category-query","theme":"fizzie","tagName":"section","className":"category"} /-->

<!-- wp:template-part {"slug":"page-footer","theme":"fizzie"} /-->

<!-- wp:template-part {"slug":"footer","theme":"fizzie"} /-->

In the wp:query-loop block I also want to be able to use an article tag for each post.
This is the output from the genesis-a2z theme that I'm trying to reproduce..
eg

<article class="post-3485 oik-plugins type-oik-plugins status-publish letters-b entry" aria-label="Besan Block">
<header class="entry-header">
<h2 class="entry-title">
<a class="entry-title-link" rel="bookmark" href="https://blocks.wp.a2z/oik-plugins/besan-block/">Besan Block</a>
</h2>
</header>
</article>

and this is what I have at present.

<!-- wp:query-loop -->
<!-- wp:group {"className":"article"} -->
<div class="wp-block-group article"><div class="wp-block-group__inner-container"><!-- wp:post-title /-->

<!-- wp:post-date /--></div></div>
<!-- /wp:group -->
<!-- /wp:query-loop -->

Meanwhile, here's the latest screenshot.

Problems with the implemented parts of the display:

1. The menu in the header doesn't match other pages. It's probably loading the .html file which is out of date with respect to the latest wp_template_part post.
2. The wp:query block is not returning posts in the category blocks. I believe this is a known problem; the wp:query block is a different query from the main query.

[bobbingwide]

The menu in the header doesn't match other pages. It's probably loading the .html file which is out of date with respect to the latest wp_template_part post.

It was. I updated header-2-columns.html and the problem was resolved.

[bobbingwide]

The wp:query block is not returning posts in the category blocks. I believe this is a known problem; the wp:query block is a different query from the main query.

• I updated the query block to return posts in the category blocks.
• I exported the category template and category-query template part to the theme's .html files and tried it on 's.b/cwiccer'.
• Nothing was displayed for https://s.b/cwiccer/category/blocks
• This is because the ID for the blocks category is different.

In my opinion, this clearly indicates a problem with the wp:query and/or wp:query-posts blocks.
It should be possible to use the wp:query-posts block to reference the posts returned in the main query.

[bobbingwide]

I've updated to WordPress 5.6-beta1 on s.b/wp56 and 5.5.3 on s.b/cwiccer. Block template part has now got a class of wp-block-template-part. I hadn't seen this before. It can be used for styling template-parts.

[bobbingwide]

To implement the breadcrumbs template part I used my SB Breadcrumbs block, developed but not yet released to wordpress.org.
It doesn't work properly for categories. So I've raised a new issue. bobbingwide/sb-breadcrumbs-block#6

[bobbingwide]

OK, now to look at the wp:pagination block.

You can see in the screenshot above that it displays a "Next" link for page 2

https://s.b/wp56/category/blocks/sb/?query-1-page=2

But there are only 3 posts displayed so why is there a Next link at all?

It seems the block's there but doesn't actually do anything sensible yet.

Requirements

See WordPress/gutenberg#26557
The requirements in the referenced issue look good to me.

Technical notes

In the genesis-a2z theme the next link, were there enough posts to justify it, would have been

https://blocks.wp.a2z/category/blocks/page/2/

For the genesis-a2z theme, the display on page 2 ( of 3 ) is

<< Previous Page 1 2 3 Next Page >>

with 2 being highlighted with foreground and background colours swapped.

Notes:

• When there are more than a certain number of page ... are used to omit a range of numbers.
• These ...s can appear either side of the selected page.

[bobbingwide]

Q. OK, what about the Letter pagination menu?
A. In the genesis-a2z theme this is implemented using letter taxonomies attached to different post types. It depends on the oik-a2z plugin. In the longer term this plugin may need to provide a letter taxonomy block that implements the logic in oik_a2z_display.
In the short time it can be implemented using the bw_term shortcode.

[bobbingwide]

I've implemented the category.html template as far as possible, with the current Gutenberg FSE functionality.

There are a number of problems:

• the query loop doesn't dynamically use the chosen category.
• pagination doesn't work at all
• incomplete Category description - needs a block / shortcode
• styling is not responsive... but that's just a bit of CSS
• In blocks.wp-a2z.org clicking on a link in the a2z pagination takes you to the archive template.
• which now needs to be implemented in Fizzie.

[bobbingwide]

incomplete Category description - needs a block / shortcode

I'll raise an issue to create a shortcode called [archive_description], for want of a better name.

[bobbingwide]

v0.7.0, 2021/08/03, supported Category description and pagination. See

• block-template-parts\category-description.html which uses the core/term-description block.
• block-template-parts\category-query which uses the core/pagination block and its inner blocks.

v1.0.0 has been updated for styling with Gutenberg 12.1.0 and above.