Twenty Thirteen: fix "Older Posts" label for archive pages with respect to order

[shrivastavanolo]

Similar to PR, PR, PR
Fixes the issue: "Older Entries" and "Newer Entries" links are wrong when entries displayed in ascending order for the Twenty Thirteen theme by adding dynamic labels according to the order query var (DESC or ASC). Also updated the div classes (These classes controlled the position of the labels) for the nav labels to switch according to the order. For context:

Without switching classes

Switching classes

---

Trac ticket: https://core.trac.wordpress.org/ticket/10219

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props shreya0shrivastava, joedolson, sabernhardt, shailu25.

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

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[sabernhardt]

For Twenty Thirteen and older themes, nav-previous still needs to be in the markup before nav-next so the visual order and DOM order match. (See Meaningful Sequence and Focus Order.)

I also do not think Twenty Thirteen should add the 10-pixel margin on the opposite side of the meta-nav arrows.

[shrivastavanolo]

Refactored to remove redundant checks using $is_desc and preserved the .nav-previous / .nav-next DOM order. Please let me know if this looks good, I’ll follow the same pattern in the PRs for the older themes as well. Thanks!

cc: @sabernhardt

[sabernhardt]

This makes sense to me for Twenty Thirteen.

With ?order=ASC, the links' href attributes switch, without changing the appearance. The following diff shows the link changes on the ASC page, before and after applying the patch, within the markup:

-					<nav class="navigation paging-navigation">
+			
+		<nav class="navigation paging-navigation">
 		<h1 class="screen-reader-text">
 			Posts navigation		</h1>
 		<div class="nav-links">
-
-						<div class="nav-previous"><a href="http://localhost/svn/src/tag/alice/page/3/?order=ASC" ><span class="meta-nav">&larr;</span> Older posts</a></div>
-			
-						<div class="nav-next"><a href="http://localhost/svn/src/tag/alice/?order=ASC" >Newer posts <span class="meta-nav">&rarr;</span></a></div>
-			
+					<div class="nav-previous">
+				<a href="http://localhost/svn/src/tag/alice/?order=ASC"><span class="meta-nav">&larr;</span> Older posts</a>			</div>
+						<div class="nav-next">
+				<a href="http://localhost/svn/src/tag/alice/page/3/?order=ASC">Newer posts <span class="meta-nav">&rarr;</span></a>			</div>
+		
 		</div><!-- .nav-links -->
 	</nav><!-- .navigation -->

In default descending order, the markup has different spacing between elements, and wp_kses_post() removes the space after the href values. Otherwise, it is the same as before the patch.

-					<nav class="navigation paging-navigation">
+			
+		<nav class="navigation paging-navigation">
 		<h1 class="screen-reader-text">
 			Posts navigation		</h1>
 		<div class="nav-links">
-
-						<div class="nav-previous"><a href="http://localhost/svn/src/tag/alice/page/3/" ><span class="meta-nav">&larr;</span> Older posts</a></div>
-			
-						<div class="nav-next"><a href="http://localhost/svn/src/tag/alice/" >Newer posts <span class="meta-nav">&rarr;</span></a></div>
-			
+					<div class="nav-previous">
+				<a href="http://localhost/svn/src/tag/alice/page/3/"><span class="meta-nav">&larr;</span> Older posts</a>			</div>
+						<div class="nav-next">
+				<a href="http://localhost/svn/src/tag/alice/">Newer posts <span class="meta-nav">&rarr;</span></a>			</div>
+		
 		</div><!-- .nav-links -->
 	</nav><!-- .navigation -->

The navigation appears the same as it did before the patch, regardless of the posts' order. The screenshots show the theme's :focus outline for the first link in page navigation (DOM order).

I also checked French and Hebrew.

---

Full-page screenshots show three posts, with different published dates (matching the chapter number to the day of the month).

• Before patch, default order
• Before patch, ascending order
• With patch, default order
• With patch, ascending order

Twenty Thirteen does not have any adjustment for links on small screens.

I also ran each translation through wp_kses_post() to make sure they all display properly.

• Left-to-right languages
• Right-to-left languages

[shail-mehta]

Before	After

[github-actions]

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 61097
GitHub commit: d8df46a

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.