Make WordPress Core

Opened 8 months ago

Last modified 16 hours ago

#61393 new defect (bug)

Trailing Slash Issue in Category Pagination URLs with the_posts_pagination()

Reported by: hmbashar's profile hmbashar Owned by:
Milestone: 6.8 Priority: normal
Severity: normal Version:
Component: Permalinks Keywords: has-screenshots has-patch has-testing-info needs-testing has-unit-tests good-first-bug reporter-feedback
Focuses: Cc:

Description

Hello,

I've checked a few themes that use the the_posts_pagination() function for pagination, and I think this function has a small issue. Although it’s not a major problem, it should still be addressed. If I remove the extra/trailing slash (/) at the end of the URL from the permalink structure (like /%%postname%% instead of /%%postname%%/), it works perfectly for all category pages except the first page.

For example, if I have a category slug "uncategorized", the pagination for this category archive page works as follows:

However, if I hover over any other number in the pagination, it shows without the trailing slash (/). Check this screenshot: https://prnt.sc/GICqVaCdAD8e. But if I hover over page number 1, it shows with a trailing slash, like this: https://wpdevelop.test/category/uncategorized/. Check this screenshot: https://prnt.sc/n-eNn-P_Zr5x. After clicking on page number 1, it redirects to the URL without the slash: https://wpdevelop.test/category/uncategorized.

So, I think if it redirects to remove the slash, the URL should also remove the slash when hovering over page number 1.

I've checked several themes with this behavior:

  • Twenty Fifteen Version: 3.7
  • Twenty Fourteen Version: 3.9
  • Twenty Nineteen Version: 2.8
  • Twenty Seventeen Version: 3.6
  • Twenty Sixteen Version: 3.2
  • Twenty Twenty Version: 2.6
  • Twenty Twenty-One Version: 2.2
  • Twenty Twenty-Two Version: 1.7
  • Astra Version: 4.7.0

How to Check the Issue:

  1. Activate any of the themes mentioned above.
  2. Add categories.
  3. Add a few posts with those categories to enable pagination.
  4. Set permalinks with a custom structure (/%%postname%%), ensuring you don’t include a slash at the end.
  5. Visit your category archive, e.g., https://wpdevelop.test/category/uncategorized.
  6. Click pagination numbers and check the URLs.

Check the screenshots for reference:

Thank you!

Attachments (11)

Permalink structure set.png (186.6 KB) - added by hmbashar 8 months ago.
others pagination view.png (148.2 KB) - added by hmbashar 8 months ago.
First Page Pagination view.png (116.9 KB) - added by hmbashar 8 months ago.
Trailing Slash Issue in Category Pagination URLs with the_posts_pagination().mp4 (9.7 MB) - added by hmbashar 8 months ago.
I've added a video you may watch this from here for you can download from the attachment https://www.berrycast.com/conversations/88000375-7f49-574e-9ba0-e338ffc63702
61393.diff (645 bytes) - added by rahulsprajapati 8 months ago.
Use user_trailingslashit to fix trailing slash issue in pagination permalink.
61393-non-trailslash-permalink.gif (2.5 MB) - added by rahulsprajapati 8 months ago.
Test GIF: When removed trailingslash from permalink structure it uses all link without trailslash.
61393-with-trailslash-permalink.gif (1.5 MB) - added by rahulsprajapati 8 months ago.
Test GIF: When using trailingslash in permalink structure it uses all link with trailslash.
Huzaifa-20240613230120.gif (8.3 MB) - added by huzaifaalmesbah 8 months ago.
I test 61393.diff Working and looks good for me.
Screenshot at Jun 13 11-47-40 PM.png (161.7 KB) - added by hmbashar 8 months ago.
I've tested the patch 61393.diff, and it's working for me. The issue has been resolved.
61393-1.diff (1.2 KB) - added by rahulsprajapati 8 months ago.
Use user_trailingslashit to fix trailing slash issue in pagination permalink including "Newest Post" and "Older Post" links.
Screenshot at Jun 14 12-28-39 AM.png (189.1 KB) - added by hmbashar 8 months ago.
Perfect with the patch "61393-1.diff, I think now everything's is fine.

Change History (28)

#1 @huzaifaalmesbah
8 months ago

Thank you @hmbashar for pointing out this valid issue. I have been able to reproduce it.

In my tests with the default WordPress theme, as well as popular themes like Astra, GeneratePress, and Neve, I observed that they all encounter the same trailing slash issue when using the the_posts_pagination() function.


#2 @rejaulalomkhan
8 months ago

Thank you for thoroughly documenting this issue.
Following your detailed instructions, I successfully reproduced the problem.

This issue has significant implications for our SEO performance, potentially affecting our site's visibility and traffic.
A prompt resolution is essential to mitigate these risks. Please prioritize addressing this to prevent any negative impact on our search engine rankings.
Your swift attention to this matter is greatly appreciated.🙏

Last edited 8 months ago by rejaulalomkhan (previous) (diff)

This ticket was mentioned in Slack in #accessibility by hmbashar. View the logs.


8 months ago

This ticket was mentioned in Slack in #core-test by mai21. View the logs.


8 months ago

#5 @mai21
8 months ago

@hmbashar thanks for reporting the issue.

Reproduction Report

Description

This report validates that the issue can be reproduced.

Steps

As mentioned on the main ticket

Environment

  • WordPress: 6.6-beta2-58396
  • PHP: 8.3.6
  • Server: nginx/1.24.0
  • Database: mysqli (Server: 10.5.24-MariaDB-1:10.5.24+maria~ubu2004-log / Client: mysqlnd 8.3.6)
  • Browser: Chrome 125.0.0.0
  • OS: Linux
  • Theme: Twenty Twenty 2.6
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.1.0
    • WordPress Beta Tester 3.5.5

Actual Results

🐞 Error condition occurs. Hovering the 1st-page link will have /, however, when clicked it opens the link without / (reproduced).

Expected Result

✅ Hovering any page (1st or nth) link shall match permalinks either it was with/without trailing slash

@rahulsprajapati
8 months ago

Use user_trailingslashit to fix trailing slash issue in pagination permalink.

@rahulsprajapati
8 months ago

Test GIF: When removed trailingslash from permalink structure it uses all link without trailslash.

@rahulsprajapati
8 months ago

Test GIF: When using trailingslash in permalink structure it uses all link with trailslash.

#6 @rahulsprajapati
8 months ago

  • Keywords has-patch added; needs-patch removed

Added patch & gifs for test permalink with and without trailingslash in pagination links.

@huzaifaalmesbah
8 months ago

I test 61393.diff Working and looks good for me.

#7 @huzaifaalmesbah
8 months ago

  • Keywords has-testing-info needs-testing added

according to the ticket status, I added two keywords has-testing-info and needs-testing

@hmbashar
8 months ago

I've tested the patch 61393.diff, and it's working for me. The issue has been resolved.

#8 @hmbashar
8 months ago

  • Keywords changes-requested added

Hello @rahulsprajapati,

I've tested your patch, and while it is working fine, I have noticed another issue. Perhaps your patch could address this as well. I checked several themes like Astra, Twenty Fifteen, Twenty Fourteen, and more. I observed that themes with the "Newest Post" and "Older Post" navigation feature have a trailing slash for the newest posts (see screenshot). However, other themes with the same features, such as Twenty Eleven and Twenty Ten, do not show a trailing slash with the newest posts (see screenshots).

Twenty Fourteen: https://prnt.sc/NrC_xTz4b63X
Astra: https://prnt.sc/i2H72Q6XLBjc
Twenty Fifteen: https://prnt.sc/bawBT2J-IhM7

Twenty Ten: https://prnt.sc/lTizkhfzP-Uz
Twenty Eleven: https://prnt.sc/iv169bWJkQSz

@rahulsprajapati
8 months ago

Use user_trailingslashit to fix trailing slash issue in pagination permalink including "Newest Post" and "Older Post" links.

#9 @rahulsprajapati
8 months ago

Hello @hmbashar,

Thank you for testing this and for the feedback. I just uploaded another patch with the next and prev link fix. Let me know if you see any issue with this.

@hmbashar
8 months ago

Perfect with the patch "61393-1.diff, I think now everything's is fine.

This ticket was mentioned in Slack in #core-test by hmbashar. View the logs.


8 months ago

#11 @martin.krcho
8 months ago

  • Keywords needs-unit-tests added

#12 @joedolson
8 months ago

  • Focuses accessibility removed

I don't see anything about this that impacts accessibility; removing the focus.

This ticket was mentioned in PR #8226 on WordPress/wordpress-develop by @ankitkumarshah.


2 weeks ago
#13

  • Keywords has-unit-tests added; needs-unit-tests removed

Trac ticket: #61393

## Description
Adds a unit test to verify pagination links maintain consistent trailing slash behavior when the permalink structure has trailing slash as well as does not have trailing slash.

## Testing instructions

  1. Run the unit test:
    npm run test:php -- --filter=test_pagination_links_trailing_slash_consistency
    

#14 @ankitkumarshah
2 weeks ago

Hi @martinkrcho, @rahulsprajapati, @hmbashar, @huzaifaalmesbah,

I have added the unit test and also updated the implementation in my unit test PR to address the failing tests. Please review it at your convenience.

Thank You!

#15 @adamsilverstein
2 days ago

  • Keywords good-first-bug reporter-feedback added; changes-requested removed
  • Milestone changed from Awaiting Review to 6.8

#16 @adamsilverstein
2 days ago

@ankitkumarshah The user_trailingslashit function takes a second parameter that should probably be 'category' here, can you take a look at adding that? It is passed to the filter called in the function.

#17 @ankitkumarshah
16 hours ago

Hi @adamsilverstein,

Thank you for pointing this out.
I found that the second parameter for user_trailingslashit( $link ) would be 'paged' as the function we are working with is paginate_links(). Technically, the function can be used to create a paginated link list for any area.

The same is done in line number 4516 in the paginate_links() function:

$format .= $wp_rewrite->using_permalinks() ? user_trailingslashit( $wp_rewrite->pagination_base . '/%#%', 'paged' ) : '?paged=%#%';

Reference - https://github.com/WordPress/wordpress-develop/blob/b8b72e62481d6fd37e5ec012d9af31722bb2a43f/src/wp-includes/general-template.php#L4516

I have updated my PR accordingly

Note: See TracTickets for help on using tickets.