What?

This PR addresses most of the tasks listed in #54414 to improve the design of Query Loop's enhanced pagination setting.

• Updates all texts with the proposed ones.
• Removes the left/right margin of the error notice.
• Modifies the loading bar animation so it doesn't progress too fast initially.
• Changes the animation starting delay from 300 to 400 ms.

Why?

To improve the feature design.

How?

Please take a look at the code changes; they're pretty easy to follow. 🙂

Regarding the loading bar animation, I tried to use an animation timing function that reaches the midpoint in 1-2 seconds approx., and the final point after 30 seconds.

This animation is also disabled when reduced motion is preferred.

Testing Instructions

For the editor changes:

1. Go to the Blog Home template.
2. Activate "enhanced pagination" in the Query Loop block.
3. Install any plugin block,
4. Insert the block inside the Query Loop, at any position.
5. Ensure a modal appears, indicating that the "enhanced pagination" will be disabled. The texts should be:
   • Title: Enhanced pagination will be disabled
   • Content:

     Plugin blocks are not supported. For enhanced pagination to work, remove the plugin block, then re-enable it in settings.
     

   • Button: OK
6. Click OK
7. Check the setting has been disabled and a notice appears below with the following text:

   Enhanced pagination only works with the blocks bundled with WordPress. If you want to enable it, you have to remove all plugin blocks from the Query Loop.
   

8. Check that the notice box is aligned with the text around (i.e., it doesn't have any margin).
9. Try to enable the setting―it shouldn't be possible.
10. Remove the block manually and activate enhanced pagination again.
11. Save changes.

For the loading bar animation:

1. With the enhanced pagination enabled in the Blog Home's Query Loop, go to the WP dashboard
2. In Settings / Reading, modify "Blog pages show at most" to, e.g., 1.
3. Add a couple of posts.
4. Visit the blog home in Incognito so the admin top bar doesn't appear.
5. In the browser dev tools, modify the network throttling option to Slow 3G (or any other value to emulate a slow connection).
6. Click on Previous posts.
7. Check that the loading bar appears, it's animated, and takes around 1-2 seconds to reach the midpoint.
8. Disable network throttling and repeat.
9. The loading bar should not appear (if the local server responds in less than 400ms).
10. In your OS accessibility settings, enable "reduce motion"
11. Repeat the process again with the network throttling set to Slow 3G.
12. The bar should appear but not be animated.

Screenshots or screencast