Single: Try different post meta designs

[carolinan]

The current post meta design uses a mix of paragraphs and other blocks.

• It is difficult to make the text translatable without including the complete block markup in the translation strings. If any language needs to change the order of the words, they have to move the entire block.
• It is difficult to style the different blocks using style variations: Without extra CSS, we can style for example the post date block, but we can't style the paragraph that is in the post meta area only.
• When there are no tags, the "Tags:" text still shows.

Here are a few attempts that does not use paragraphs:

<!-- wp:group {"layout":{"inherit":true,"type":"constrained"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)"><!-- wp:separator {"opacity":"css","align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-css-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"},"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:post-date {"format":"F j, Y"} /-->

<!-- wp:post-author {"byline":"By"} /--></div>
<!-- /wp:group -->

<!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"},"blockGap":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d70)"}},"fontSize":"small"} -->
<div class="wp-block-columns alignwide has-small-font-size" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:column {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column"><!-- wp:post-terms {"term":"category","prefix":"Categories: "} /--></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column"><!-- wp:post-terms {"term":"post_tag","prefix":"Tags: "} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Same as above but without the avatar

<!-- wp:group {"layout":{"inherit":true,"type":"constrained"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)"><!-- wp:separator {"opacity":"css","align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-css-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"},"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:post-date {"format":"F j, Y"} /-->

<!-- wp:post-author {"showAvatar":false,"byline":"By"} /--></div>
<!-- /wp:group -->

<!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"},"blockGap":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d70)"}},"fontSize":"small"} -->
<div class="wp-block-columns alignwide has-small-font-size" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:column {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column"><!-- wp:post-terms {"term":"category","prefix":"Categories: "} /--></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column"><!-- wp:post-terms {"term":"post_tag","prefix":"Tags: "} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

[carolinan]

This can be simplified to only use one column block, but using two was a fast way to add consistent spacing between the date/author and tags/categories

<!-- wp:group {"layout":{"inherit":true,"type":"constrained"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)"><!-- wp:separator {"opacity":"css","align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-css-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"},"blockGap":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d70)"}},"fontSize":"small"} -->
<div class="wp-block-columns alignwide has-small-font-size" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:column {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column"><!-- wp:post-date /--></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column"><!-- wp:post-author-name {"isLink":true} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"},"blockGap":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d70)"}},"fontSize":"small"} -->
<div class="wp-block-columns alignwide has-small-font-size" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:column {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column"><!-- wp:post-terms {"term":"category","prefix":"Categories: "} /--></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column"><!-- wp:post-terms {"term":"post_tag","prefix":"Tags: "} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

[carolinan]

Any decision about this?

• It will affect how the style variations can style the post terms, date, and author.
• There is no solution suggested for making the text translation ready.

[mikachan]

Thanks for putting these options together. Out of the above, I think I prefer the last one without the 'posted', 'in', and 'by' words, as this removes even more opinion from the template. I also prefer this layout.

Does this still mean that the 'Categories' and 'Tags' prefixes are not translation ready? I've just tested wrapping these strings in PHP, like we do with the search box, e.g.

<!-- wp:post-terms {"term":"category","prefix":"<?php echo esc_html_x( 'Categories: ', 'categories prefix', 'twentytwentythree' ); ?>"} /-->

This doesn't seem to work in the editor for me, as it doesn't show any prefix, but it seems to work on the front end:

Editor	Front end

If this is the case, maybe this is something we could try to include in GB, ready for WP 6.1.

Pinging @critterverse for her thoughts too 🙇

[carolinan]

I didn't realize that did not work in the editor

[mikachan]

I didn't realize that did not work in the editor

I've not looked into this before so I wasn't sure if I was missing something! I'll search for / open an issue.

[critterverse]

Sounds good to me! I also like the last option shared here: https://github.com/WordPress/twentytwentythree/issues/108#issuecomment-1225305368

[carolinan]

I am still concerned that this section of the theme will be difficult to translate, but I believe a decision was made and that this should be closed.