Add Pagination for Posts

[Soare-Robert-Daniel]

Closes #1046

Summary

Add pagination for Posts Block.

Developing notes:

• It seems that Dynamic Content collides with the counting mechanism. It needs some investigation on the cause.

Screenshots

2023-09-25_16-23-25.mp4

---

Test instructions

1. Insert a Post Block
2. Enable pagination and customize it.

---

Checklist before the final review

• Included E2E or unit tests for the changes in this PR.
• Visual elements are not affected by independent changes.
• It is at least compatible with the minimum WordPress version.
• It loads additional script in frontend only if it is required.
• Does not impact the Core Web Vitals.
• In case of deprecation, old blocks are safely migrated.
• It is usable in Widgets and FSE.
• Copy/Paste is working if the attributes are modified.
• PR is following the best practices

[pirate-bot]

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	275.01 KB	276.86 KB	1.85 KB (0.67%)
Blocks	1.47 MB	1.48 MB	7.33 KB (0.49%)
CSS	89.3 KB	91.15 KB	1.85 KB (2.07%)
Dashboard	131.28 KB	133.13 KB	1.85 KB (1.41%)
Export Import	87.21 KB	89.06 KB	1.85 KB (2.12%)
Pro	346.54 KB	348.43 KB	1.89 KB (0.54%)

[pirate-bot]

Plugin build for e279cfe is ready 🛎️!

• Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
• Download Otter Pro - Production ~ Development
• Download Blocks Animation - Production ~ Development
• Download Blocks CSS - Production ~ Development
• Download Blocks Export Import - Production ~ Development

[pirate-bot]

E2E Summary

Typing

Test	Average Time (ms)	Standard Deviation (ms)	Median Time (ms)	Quantile for soft limit (%)	Quantile for hard limit (%)
Typing	72.11	10.92	70.77	0 (60ms)	84.21 (80ms)

Values above 60ms

"0 - 62.34, 1 - 66.54, 2 - 62.16, 3 - 61.89, 4 - 61.54, 5 - 83.66, 6 - 69.91, 7 - 72.09, 8 - 60.63, 9 - 68.44, 10 - 102.13, 11 - 72.38, 12 - 77.06, 13 - 70.77, 14 - 70.83, 15 - 77.68, 16 - 94.86, 17 - 70.89, 18 - 64.36"

[HardeepAsrani]

Hey, I was just testing it on an instance to see the flow and pagination doesn't work:

Regardless the page, it loads the same posts.

[Soare-Robert-Daniel]

@HardeepAsrani, did you test on WPTaste? For some reasons it tries to always redirect me to the first page.

EDIT: same thing when I try with Qubley Posts block.

[HardeepAsrani]

Left a small NIT but it looks good. It worked well when tried it locally. We can put it through QA and remove the QA-related code afterwards.

[irinelenache]

@Soare-Robert-Daniel Tested the feature and here is what i found:

• Pagination active border color control is duplicated https://vertis.d.pr/i/55HbEu
• There is no way to add a top margin for the pagination, so if the row gap is set to a higher number, it won't look good https://vertis.d.pr/i/Tm19RT
• The featured post will be different on every page, both times when it's set as Sticky post or Latest post https://vertis.d.pr/v/f5XGgA
• If i enable the featured post and the number of items is set to 4, there will be 5 posts on the first page and 4 posts on the rest of them: first page, second page
• If the posts block is not placed at the top of the page, switching through pagination will refresh the page and it won't be scrolled to the block. Maybe we can change this for a better UX
• If i use these permalink settings, the pagination won't work https://vertis.d.pr/i/to87al (The block is placed on the homepage)

You can check the issues on this instance:

 Admin area URL: https://cycleadvertisement.s2-tastewp.com/wp-admin 
 Username: irinel 
 Password: hQ688Q6QlTQ 

[Soare-Robert-Daniel]

• The featured post will be different on every page, both times when it's set as Sticky post or Latest post https://vertis.d.pr/v/f5XGgA
• If i enable the featured post and the number of items is set to 4, there will be 5 posts on the first page and 4 posts on the rest of them: first page, second page

For those problems, I made the pagination and features most to be mutually exclusive. You will not have them both. The way the featured post works right now is like a stylized first post. This is not good in the context of pagination in which the featured post must be a separate thing.

If we want them both, we will make another issue to address this. In this PR we will focus only on pagination.

• If the posts block is not placed at the top of the page, switching through pagination will refresh the page and it won't be scrolled to the block. Maybe we can change this for a better UX

This is a hard problem because when you enter into the page, we do not know if you come via pagination or other ways around. It creates some weird behavior. We will mark it as not an issue since some other competition blocks have the same behavior.

[Soare-Robert-Daniel]

@irinelenache, when testing, please use another instance and not the one in this PR.

[irinelenache]

@Soare-Robert-Daniel Thank you for the fixes and for clarifying 🙏

If i use these permalink settings, the pagination won't work https://vertis.d.pr/i/to87al (The block is placed on the homepage)

^ This issue is still happening on my end, you can check on this instance:

Site name: Tranquil Division
URL: https://tranquildivision.s2-tastewp.com
Username: irinel
Password: fUuJjouVI7I

Besides this, everything's working fine 👍

[Soare-Robert-Daniel]

@irinelenache, we should skip the front page on WP Taste since it might differ on host settings. We should use this plugin https://wordpress.org/plugins/qubely/ as a reference. Like Otter, it uses the same functions, so where they work, we should also work. The vice versa is also true.

[irinelenache]

@Soare-Robert-Daniel
I tried to test on InstaWP now and compared some behaviours with Qubely. If i'm using these permalink settings it will work fine on the homepage only. On a normal page, there will be a slash missing that will break the page, here is a video with the behaviour on our end compared to Qubely https://vertis.d.pr/v/jyUFuS

You can check the issue here:

URL: https://friendly-finch-wbell.vertisite.cloud
Username: xonegofusi7470
Password: jxDwygYlT0QAR72HfmP1

[Soare-Robert-Daniel]

I made the code similar to on Quble, which uses a snippet from PHP docs -- there should be no difference now. Here are some explanations for the trick used: https://chat.openai.com/share/3af75654-25bb-40de-988f-21ac8413b9e0

[irinelenache]

@Soare-Robert-Daniel Checked again and everything's fine now, thank you 🚀

[pirate-bot]

🎉 This PR is included in version 2.5.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀