Fix all the previous / next navigation and pagination links

[afercia]

Description

Previous default themes established best practices for all the 'previous / next' navigation links, typically post navigation, paginated post navigation, comments navigation. I'm not sure I see those best practices in place in Twenty Twenty-Four and I'm wondering why.

• All navigation should be wrapped in a properly labeled nav element.
• When possible, the nav element should also contain a h2 heading to identify the navigation
• The links text should be meaningful also when read out of context. Using only Previous and Next is not sufficient.

Some markup examples from Twenty Twenty-One:

Posts navigation:

<nav class="navigation post-navigation" aria-label="Posts">
    <h2 class="screen-reader-text">Post navigation</h2>

Comments navigation:

<nav class="navigation comments-pagination" aria-label="Comments">
	<h2 class="screen-reader-text">Comments navigation</h2>

Paginated post:

<nav class="page-links" aria-label="Page"> 

Instead, in Twenty Twenty-Four:

1. The navigation links are just a elements within div elements. No proper semantic and labeling to identify these navigational tools. This is a regression compare to previous default themes.
2. There is no heading to identify these navigation sections.
3. Posts navigation: the links text is only Previous and Next. There is no sufficient contextual information to understand what these links are about. This is a regression compare to previous default themes.
4. Posts navigation: the links are places after the comments list and comments form. Not sure that is ideal: when there are dozens and dozeens of comments users would need to scroll a lot just fo be able to use the previous / next links.
5. I'm not sure I see any links rendered for the paginated post.

Additionally: I'm not sure I see actual pagination links, as in: Page 2, Page 3, Page 4 etc. I only see Previous/Next, Older Comments/Newer Comments.. I'm not sure whether this is a design choice or a block limitation but I'd think actual pagination linnk would improve the user experience especially when there are many posts and comments.

Step-by-step reproduction instructions

• Check the posts navigation links markup and compare with Twenty Twenty-One
• Check the comments pagination links markup and compare with Twenty Twenty-One
• Check the paginated post links markup (in the themes test data is usualy at the URL 2012/01/template-paginated/) and compare with Twenty Twenty-One

Expected behavior

All the navigation and pagination links markup to follow the besst practices established across the years in the previous default themes.

Screenshots

Pagianted post: I can't see any pagination links, thus the post content is not accessible:

Comments pagination links have only 2 linnks: Older and newer:

In Twenty Twenty-One there are pagination links:

The posts pagination in Twenty Twenty-One provides good contextual info:

While in Twenty Twenty-Four it's only Previous / Next.

Environment info

Additional context

[afercia]

I'm not sure I see any links rendered for the paginated post.

As @carolinan pointed out, this may be because the themeunittestdata.wordpress.xml I'm using to have some testable content doesn't use the blocks for the paginated post.

[afercia]

Paginated post when using the correct blocks:

I'd say those pagination links would need some improvements, comparet to previous defualt themes:

both visually and in terms of marlup.

[jasmussen]

Thanks for the issue. Just to be sure I'm understanding this right: is this mainly about ensuring that pagination is included in the template, or is it something else or in addition to that? Pagination seems fine to add.

Just want to be sure, because if there is incorrect markup to me that sounds like an issue to address with the Next and Previous blocks in the block editor directly. Or to put it differently, it doesn't seem like it should be possible for a block theme to create incorrect markup by simply using the blocks (except for using incorrect heading levels, but there we just have to be vigilant).

[beafialho]

Visually, this was an option to simplify the layout. However, I see no reason why these elements can't be added. Here's how it could look:

Archives

Posts

The only exception I think would be the Portfolio Post template. For this type of content it seems to make less sense to include the pagination, since the browsing experience would be different and all posts can be browsed in the archive. For that reason, I suggest we feature the post title after the post navigation item in this particular template:

[carolinan]

I don't know if this is a bug with the block, but for the post navigation link block, I have not been able to make the Next and Previous label to show with the post title unless I enable the option "Include the label as part of the link".

[carolinan]

I opened two issues upstream:
WordPress/gutenberg#55159
WordPress/gutenberg#55157

[MaggieCabrera]

I think the main concerns of this issue have been fixed or reported upstream. Closing