Update single and page, add comments part

[carolinan]

Updates single post and page, adds a template part for comments.
Closes #45

[carolinan]

Decision needed:

1. There is no way to separate the post terms block in two lines, one with the text "Tags:" and one with the actual tags, without adding CSS.
2. But when using a paragraph, the text is always visible even when there are no tags.

[beafialho]

I managed to achieve this with the markup below, what do you think?

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:separator {"align":"wide","className":"is-style-default"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-default"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between","verticalAlignment":"top"}} -->
<div class="wp-block-group alignwide"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:post-date {"format":"F j, Y","fontSize":"small"} /-->

<!-- wp:post-terms {"term":"category","style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small"} /--></div>
<!-- /wp:group -->

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

<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Tags:</p>
<!-- /wp:paragraph -->

<!-- wp:post-terms {"term":"post_tag","style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:post-comments /--></div>
<!-- /wp:group -->

[pbking]

I like when using the prefix attribute there's no label if there's no tags.

I don't like that when using the 'prefix' there's no way for a user to change that label (yet).

I'm impartial if the tags start on the next line or not. I definitely don't think we should be adding CSS to achieve that.

My two cents is that using a paragraph is the best solution. Though I suppose that would require making that a pattern so that it can be localized.

[carolinan]

I managed to achieve this with the markup below, what do you think?

I did not understand, did you mean that it should use groups, not the columns?

[carolinan]

I don't like that when using the 'prefix' there's no way for a user to change that label (yet).

If the theme will have a minimum WP version of 6.1, the users can change the label to anything.
The feature is merged into Gutenberg, please see WordPress/gutenberg#40559
WordPress/gutenberg#42418

This is the problem that I mentioned on Slack, the block is bugged / needs testing, I was not able to get the prefix to work.

[beafialho]

I did not understand, did you mean that it should use groups, not the columns?

I managed to separate the tags in two lines, one with the text "Tags:" and one with the actual tags, without adding CSS, by using a stack block.

[carolinan]

I did not understand, did you mean that it should use groups, not the columns?

I managed to separate the tags in two lines, one with the text "Tags:" and one with the actual tags, without adding CSS, by using a stack block.

Yes, the issue was about not being able to do that with the post terms block only.

[beafialho]

Yes, the issue was about not being able to do that with the post terms block only.

Oh, in that case ignore my comment 🥲

[carolinan]

@pbking How can we turn this sentence "Posted date in category" into a translatable string?
If we don't include the block markup in the translation function and printf(), the date format can not be localized, and if we do include the block markup, the markup feels dangerously close to breaking because of potential typos.
In addition, the block spacing is used to fake spaces between these blocks, making it more difficult to translate.

[carolinan]

Yes, the issue was about not being able to do that with the post terms block only.

Oh, in that case ignore my comment 🥲

We should still test! Because I believe there are some differences between how columns and the row block look on small screens.

[mikachan]

As mentioned in #58, I think we should remove the single-no-separators template. This PR would be a nice place to do that, but happy for it to happen separately.

[carolinan]

• With a columns block, the tags do not align correctly to the right.
• The stacks need a lower vertical block spacing

500px width:

800px width:

1024px width:

[carolinan]

With the group blocks from comment 2.

500px width:

800px width:

[carolinan]

When there are many categories:

Using columns:

Using groups:

[mikachan]

The columns are generally looking better to me (I think).

With a columns block, the tags do not align correctly to the right.

What about trying an empty column in the middle of the two existing ones? So a 3 column layout with an empty column in the middle. This pushes the third column further to the right, but perhaps makes the column widths too small.

Here's an empty column for easy copy/pasting:

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

[carolinan]

I have not been able to find a solution for making the "posted (date) in (category)" translatable. If there is any language where the order of the words would need to be changed, they would need to move the whole block, not just the text but the whole markup.

[carolinan]

The paragraph block, post date and terms have different font sizes, adding the font size to the columns evens this out.
The caveat is that this can't be changed with style variations.

[carolinan]

blockGap:0 here reduces the vertical spacing between the rows of text.

[carolinan]

"blockGap":"var(--wp--preset--spacing--70)"

Using the spacing preset inside blockGap does not seem to work.

[carolinan]

@andrewserong I am trying to use a spacing preset for a blockGap in a columns block, but in the block markup in the HTML file, not in theme.json. I can't get it to work. Is this known? I could not find an issue for it, WordPress/gutenberg#43296 is the closest.
The gap CSS is missing from the columns .wp-container-id in the editor.
If I change it to a different value like 2rem, the CSS is added correctly.
(I am testing with Gutenberg trunk)

[andrewserong]

Hi @carolinan, thanks for the ping! It isn't quite working just yet, that PR unfortunately missed a couple of things to get it working properly. I'm currently working on a fix (and opt-in to the spacing controls) over in WordPress/gutenberg#43466, which I hope to get in this week (it isn't yet ready for review, there's still a few things to tweak)

[carolinan]

Thank you :) Then I think it can be kept in the template.

[andrewserong]

One thing to watch out for when using spacing presets (also for padding and margin) is that the editor will serialize the values to post content using the form var:preset|spacing|30 instead of using the var() function directly, in the JSON part of the block markup. For example, this is how the Group block with padding and blockGap values currently looks in my local environment when added via the UI:

<!-- wp:group {"layout":{"type":"constrained"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|30"}}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:paragraph -->
<p>A paragraph in a group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

In that example, note that the JSON section uses the form var:preset|spacing|40, whereas the inline style uses the var() function in the HTML markup. Because blockGap is rendered on the server, it doesn't appear in the inline style.

Hope that helps!

[andrewserong]

@carolinan just a heads-up that WordPress/gutenberg#43466 has now been merged, so the block spacing UI should now be working correctly with presets. Hopefully that'll make it a little easier building out the parts of the theme that depend on block spacing presets. I think you'll probably wind up needing to update the markup to use the var:preset|spacing|40 syntax in the block comments as the server rendering might not like the var() style, but I haven't manually tested it. Please let me know know (or add any issues) if you run into any issues with the UI changes as there were a few edge cases that needed to be handled in #43466 to get everything working correctly 🙂

[beafialho]

I'm seeing a comments section in the Single Page template, but according to Figma, only the Single Post template should have a comments section. Do you think the Page should have comments as well?

[carolinan]

I think they have to have it, since you can turn comments on and off per page under the settings?

Personally, I would disable comments site wide and not use it on the template. But I think since it is a default theme, it might be too much to ask of users to edit the template and add the comments query? 🤔

[beafialho]

Personally, I would disable comments site wide and not use it on the template. But I think since it is a default theme, it might be too much to ask of users to edit the template and add the comments query?

I see what you mean, let's leave it there then.

[carolinan]

Can we merge this, test with more eyes on it, and iterate?

[mikachan]

Yes, I was thinking similar earlier, sounds good!