Use core/post-template to have each post render within <article> tags

[paulgibbs]

What problem does this address?

How should I use the core/post-template block to have each post render within <article> tags?

With WP 5.9 beta 4, using the Twenty Twenty Two theme included, on the home page (showing a list of all blog posts), the collection of posts is wrapped inside a ul and individually in li tags. Looking at the editor and the source code, this is rendered by the core/post-template block.

I expected the generated markup to have each posted wrapped in an <article>, such as what happens on the blog posts screen of the Twenty Twenty One theme:

What is your proposed solution?

Though a list of blog posts is undoubtedly a list, my understanding is that <article> is the semantically appropriate choice.

Should I be using some other kind of core/post-template block to achieve this? I had expected a setting to change the HTML tag(s) under the Advanced block settings, but there is not one.

Other solution ideas:

• Maybe my understanding here is incorrect, which I’d appreciate a pointer so I can learn.
• I could use a PHP filter to manipulate the html output at render time?
• Is there another block I should be using to achieve this? I'm understandably new to full-site editing. I tried to look in git history to see if there were any relevant commit messages, but I got stuck tracing back the origins of this block past when it was renamed from query-loop.
• Should core/post-template have a Advanced setting to change the block tag?

Thank you for your time,

[Mamaduka]

Hi, Paul

I think adding an HTML element selector to the Advanced settings makes sense.

/cc @ntsekouras What do you think?

[ntsekouras]

Hey @paulgibbs, thanks for the issue!

I expected the generated markup to have each posted wrapped in an

, such as what happens on the blog posts screen of the Twenty Twenty One theme:

Actually it was something like this (with divs though) in the first iterations of the block. The added wrapper and the ul was added here and the wrapper is needed for various things like layout stuff.

Though a list of blog posts is undoubtedly a list, my understanding is that

is the semantically appropriate choice.

The ul list is the most generic one, as the Query Loop block supports custom post types, so a default article might not be the best fit IMO. Having said that an exploration of adding support for more tags could be made, but we have to make sure we will be backwards compatible with the ul and also it would mean handling the wrapper tag as well from ul to div I guess.

[Enchiridion]

I was just about to create the same feature request. A tag selector is definitely needed, just like what Group has.

I think everything should still be in a list (the lets screen readers know how many links/cards there are), but the next child/wrapper tag should be a div or article depending on the content to keep it semantically correct. This will also make it easier to style. For a simple list of links, it should be div but for a card (title, image, date, excerpt, etc.) article is correct.

[huubl]

What about something like this?

Query Block

Wrap posts in (Select Option):

• unordered list (default)
• div
• ...

Post Template Block

HTML-element (Select Option):

• article (default)
• div
• ...

This way we can make:

<ul class="wp-block-post-template [...]">
	<li>
		<article class="wp-block-post [...]">
			[...]
		</article>
	</li>
	[...]
</ul>

and:

<div class="wp-block-post-template [...]">
	<div class="wp-block-post [...]">
		[...]
	</div>
	[...]
</div>

[ohlauren]

Yes, please have a tag selector or use something else as the default. I often have list levels styled differently, and in certain situations am including the full content of a post in an aggregate page, so this is forcing me to add a fair bit of extra css to reset the default list styles. I would argue article is semantically appropriate at least as often as ul/li, and is less likely to cause style issues.

[carolinan]

I think the best way to solve this is for the theme developer / advanced user to place a group inside the post template and change the default div to an article.

[Retrofitterdk]

I don’t think it is essential that we need to be able to change the <ul> and <li> tags from the ui settings.

Since WordPress 6.1 it has been possible create query block variations , which truly is a phenomenal way to create simplified presets of the query block.

To be able to register variations of the post template block it in the same spirit and in a similar (relatively) simple manner that would an equally great to substitute the built-in tags with the tags appropriate to a specific query block variation.

Eg. If a developer could register a article-template variation, which uses <div> and <article> instead <ul> and <li>, this variation of the post template block could be used in specific query block variations by customizing the variation layout like this

innerBlocks: [ [ 'my-namespace/article-template', {}, [ [ 'core/post-title' ], [ 'core/post-excerpt' ] ], ], [ 'core/query-pagination' ], [ 'core/query-no-results' ], ],

[jarrod-colluco]

I don’t think it is essential that we need to be able to change the <ul> and <li> tags from the ui settings.

Since WordPress 6.1 it has been possible create query block variations , which truly is a phenomenal way to create simplified presets of the query block.

To be able to register variations of the post template block it in the same spirit and in a similar (relatively) simple manner that would an equally great to substitute the built-in tags with the tags appropriate to a specific query block variation.

Eg. If a developer could register a article-template variation, which uses <div> and <article> instead <ul> and <li>, this variation of the post template block could be used in specific query block variations by customizing the variation layout like this

innerBlocks: [ [ 'my-namespace/article-template', {}, [ [ 'core/post-title' ], [ 'core/post-excerpt' ] ], ], [ 'core/query-pagination' ], [ 'core/query-no-results' ], ],

I just came here to suggest the exact same thing. I think this is the best solution and also serves other purposes beyond customising the root element (i.e. from <li> to <div>).

For example, I have a slider block. I've created a variation of the Query Loop block called Slide Query Loop. I can use Post Template, but I wanted to create a Slide Template variation of the Post Template block so that I can add settings to the slides.

Being able to create variations of the Query Loop block is powerful but given that the Post Template block is exclusive to the Query Loop, I feel as though that should also be extensible.