Skip to content
This repository was archived by the owner on Nov 18, 2024. It is now read-only.

Conversation

@beafialho
Copy link
Contributor

Description

Adds alternative templates/patterns for News Blog mentioned in #133

There may be some discrepancies from the original Figma, this was intentional and built as looking good in the editor and front end.

Adds alternative templates/patterns for News Blog mentioned in #133
@github-actions
Copy link

github-actions bot commented Sep 4, 2024

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: beafialho <[email protected]>
Co-authored-by: juanfra <[email protected]>
Co-authored-by: carolinan <[email protected]>

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

@juanfra
Copy link
Member

juanfra commented Sep 6, 2024

I've been playing a bit with this one:

  • Moved the templates to the correct locations.
  • Fixed lint issues.
  • Added docblocks.
  • Update the single post ones to use the comments pattern.

@beafialho @carolinan can you please take a look at the changes and confirm that things are in place? Thanks

<!-- wp:group {"className":"is-style-default","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group is-style-default" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"75%"} -->
<div class="wp-block-column" style="flex-basis:75%"><!-- wp:query {"queryId":41,"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"metadata":{"categories":["posts"],"patternName":"core/query-standard-posts","name":"Standard"}} -->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the metadata need to be here for this core pattern to be used?

@carolinan
Copy link
Contributor

carolinan commented Sep 10, 2024

"News blog with featured posts grid" Is missing an H1 and the categories are above the headings, so screen reader users that navigate via headings will not get the information about the category. Instead the category is read as belonging under the previous heading, and this would be confusing since the actual category might be something else.

The same posts are displayed twice. First in the main query and then in the list under the "Architecture" heading.


"News blog with sidebar" is missing an H1: All headings have the same level which makes it difficult to navigate and prioritize the content. The heading "Latest" in the sidebar has the same heading level; the same importance, as all the blog posts.

The main post is displayed three times, the other posts are displayed twice.
The list below the main post, and the sidebar, has the same posts. I don't think there is a benefit to repeating these links?

In the list below the main post, the posts titles are not linked.


"Offset post without featured image" is missing an H1.
I believe the border above the next and previous posts links is meant to be wide? It is full width.


"Post with left aligned content"
I believe the border above the next and previous posts links is meant to be wide? It is full width.

@carolinan carolinan added the Accessibility (a11y) Needs accessibility testing or feedback label Sep 10, 2024
@beafialho
Copy link
Contributor Author

"News blog with featured posts grid" Is missing an H1 and the categories are above the headings, so screen reader users that navigate via headings will not get the information about the category. Instead the category is read as belonging under the previous heading, and this would be confusing since the actual category might be something else.

I have a doubt regarding this, can't the site title be H1?

Captura de ecrã 2024-09-10, às 10 56 35

Moves categories below headings, adds H1 to templates, fixes repeated posts
@beafialho
Copy link
Contributor Author

Thank you for reviewing, I submitted some changes according to your feedback.

@carolinan
Copy link
Contributor

I have a doubt regarding this, can't the site title be H1?

Here are some resources I trust about heading levels:
https://make.wordpress.org/accessibility/handbook/content/using-headings-in-content/#what-are-headings
https://webaim.org/techniques/headings/
https://www.a11yproject.com/posts/how-to-accessible-heading-structure/

The site title in the header is not a good H1 for a few reasons:
It is identical on every page, so it is not for the unique content on the current page. It does not describe the content on the current page.

From a block theme perspective, a single pattern or template part can not change the HTML element for the title conditionally: it can't use an H1 on one specific page, and a paragraph on another. This was possible in classic themes.
Block themes can use multiple patterns or parts with different HTML elements, and use those as needed. But using the site title as the H1 is still not ideal for the other reasons listed.

@carolinan
Copy link
Contributor

News blog with featured posts grid

  • 1 H1, no repeated posts.

I did not test how the page would look if there were less than five posts.
I think it may be confusing that the "no results" message would show four times?

News blog with sidebar

  • 1 H1, no repeated posts. The sidebar content uses H3.

Offset post without featured image

  • 1 H1, border width.

Post with left aligned content

The border above the next and previous posts link is full width, but perhaps that is the design choice.


Changes to existing templates

News blog home

  • Categories were moved below the headings.

@beafialho
Copy link
Contributor Author

I did not test how the page would look if there were less than five posts.
I think it may be confusing that the "no results" message would show four times?

I think this is expected since this is a template to be used when there are many posts.

The border above the next and previous posts link is full width, but perhaps that is the design choice.

That is correct, the border here is intended to be full width.

Thank you for reviewing!

@carolinan carolinan merged commit fd8ea07 into trunk Sep 11, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants