update: added comments pattern to required post templates

[up1512001]

Description
-added the <!-- wp:pattern {"slug:":"comments"} /--> pattern to the News blog single post with sidebar, Photo blog single post.,Text-only blog single post and Right-aligned single post.

fixes #245

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: up1512001 <[email protected]>
Co-authored-by: juanfra <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: eirichmond <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[up1512001]

@juanfra can you please review this PR?

[carolinan]

Hi
The patterns are not being added because there are typos. There is an extra : after slug. <!-- wp:pattern {"slug:":"twentytwentyfive/comments"} /-->

Is there a reason why the comments are placed outside the <main>?

[up1512001]

@carolinan I have fixed the slug issue. Sorry for not seeing it 🙇. Also, for the blog template, I added it inside the main section.

[juanfra]

Hi @up1512001 - Thank you for working on this.

For each template, the comments section needs to be located where it was placed in the design. You can check where it is for each template, in the Figma file. Right now, I am not seeing that the comments are placed in the right locations.

Screen.Recording.2024-09-10.at.10.38.09.mov

[carolinan]

Hi @up1512001 and @eirichmond
There are two open pull requests for this issue now. Both pull requests needs to be updated before they can be merged;
To be mindful of everyone's time, is there anyway you can collaborate on one single PR?

[eirichmond]

Oops! Sorry, I thought @juanfra had assigned it to me, happy to close my PR and continue with this one if that helps @up1512001 ?

[up1512001]

@juanfra I have fixed the comment pattern placement issue, can you please check now?

[up1512001]

@eirichmond Thanks! I will add you as a co-author so that you will also receive credits 🙇

[juanfra]

@up1512001 @eirichmond thank you!

Can you please fix the merge conflicts so that I can take another look at this? Thanks

[up1512001]

@juanfra resolved merge conflicts.

[carolinan]

@up1512001 Since trunk is being updated frequently, there is another merge conflict now.

[carolinan]

News blog single post

The comments area is not in the correct position. It needs to be more to the left, aligned with the content above it.

Figma	The pull request

[carolinan]

• Photo blog single post -Looks correct to me.

[carolinan]

Text-only single post

The space between the post navigation and the comments area is too large.
The top margin that is added to the comments is combined with the bottom margin on the group above it.
If you move the comments inside that group, it will match the design better: But you also need to adjust the bottom margin on the comments so that the space between the footer and comments is correct.

[up1512001]

@carolinan fixed News blog single post template alignment issue.

[carolinan]

Right-aligned single post

The comments needs to align with the content, the comments are is too far to the right.
The vertical spacing seems to be duplicated here as well.

The position of the comments area is also important from another perspective:
Should they be before or after the sidebar on small screens? I can not find a design for the mobile version.
I would assume they should be before the sidebar, but this design decision is not up to me.

Is this expected behavior?

right-aligned-comments.mp4

[up1512001]

@carolinan for Right-aligned single post, moved comments inside the right column so that it will be aligned with content.

[carolinan]

News blog: The positioning is still not correct, the comment area doesn't align with the rest.

[up1512001]

@carolinan fix news blog alignment issue.

Screen.Recording.2024-09-16.at.17.17.35.mov

[github-actions]

Preview changes

You can preview these changes by following the link below:

• Preview changes for twentytwentyfive

I will update this comment with the latest preview links as you push more changes to this PR.
⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

[juanfra]

Thanks for your persistence on this @up1512001!

There are some that are working well:

✔️ Photo blog single post
✔️ Text-only blog, single post
✔️ Post with left aligned content
✔️ Offset post without featured image

There are two that need improvement

✖️News blog single post with sidebar

It's still not aligned with the content. It looks like by wrapping in columns (instead of row) and having a first column with 5% width, that should be solved.

Screen.Recording.2024-09-20.at.16.05.13.mov

✖️Right aligned single post

The comments section is not aligned with the content. It looks like there's some inherited padding that could be affecting that. I'd encourage you to revisit that and check it so that the comments section is aligned with the content.

Screen.Recording.2024-09-20.at.16.14.25.mov