Infinite Scroll (Beta)

The Infinite Scroll block enhances a core/query loop by automatically loading more posts as the visitor scrolls down the page. When the user approaches the end of the current list of posts, the block requests and appends the next set of posts without requiring a page reload or a “Load more” button.

This block:

• Must be used as a child/descendant of a core/query block.
• Works on the front end only (the editor shows a preview and controls, but no actual infinite loading).
• Respects the query configuration of its parent core/query (post type, taxonomy filters, order, posts per page, etc.).

---

How to Use

1. Insert or select a Query Loop (core/query) block in the editor.
2. Inside the query, add the Infinite Scroll block (blocklayouts/infinite-scroll).
3. Configure the block settings in the sidebar:
   • Loading and “no more posts” messages.
   • Scroll trigger distance.
   • Horizontal alignment of the status text.

1. Save the post/template and view it on the front end.
2. Scroll down the page; when you approach the end of the loaded posts, more posts will be requested and appended automatically until the query is exhausted.

Block Settings/Attributes

1. loadingText (string)
   • Default: “Loading more posts…”
   • Description: Text shown while new posts are being requested and appended.
   • Usage: Customize this to match your site’s tone, e.g. “Fetching more articles…” or “Hang tight, loading more content…”.
2. noMoreText (string)
   • Default: “No more posts to load”
   • Description: Text displayed when there are no additional pages of posts available from the parent query.
   • Usage: Customize this to a final status message, e.g. “You’ve reached the end” or “That’s all for now”.
3. triggerDistance (number)
   • Default: 200
   • Unit: Pixels from the bottom of the page/scroll container.
   • Description: How close the user must scroll to the end of the current post list before the next page of posts is requested.
   • Behavior:
     • Smaller values (e.g. 100) trigger loading later (closer to the bottom).
     • Larger values (e.g. 400–600) trigger loading earlier, giving more time for posts to load.
4. justifyContent (string)
   • Default: “center”
   • Possible values: depends on theme/editor support; commonly “left”, “center”, “right”, “space-between”, etc.
   • Description: Controls the horizontal alignment of the status text (loading / no-more messages) within the block container.
   • Usage: Adjust this to visually align the text with your layout (e.g. left-align under a left-aligned content column).

Design & Layout Support

The block supports:

• Alignment: wide, full
• Colors: Text color (no contrast checker).
• Spacing:
  • Margin and padding.
  • Units: px, em, rem, vh, vw.

These options let you visually integrate the loading/no-more messages with your theme. Use the block design tools in the editor sidebar to adjust padding, margins, and text color as needed.

Usage Notes & Best Practices

Performance:

• Avoid extremely large posts_per_page in the parent query to keep each load fast.
• Infinite scroll can load many posts during a long session; ensure your template and images are optimized.

Accessibility:

• Keep loadingText and noMoreText clear and descriptive so screen reader users understand what is happening.

SEO & Navigation:

• Consider pairing infinite scroll with clear archive navigation somewhere on the page so users can still access specific pages if needed.

Troubleshooting

• Infinite scroll is not triggering:
  • Ensure the block is inside a core/query block.
  • Check that JavaScript is not blocked or failing due to other script errors.
  • Verify there are more posts available in the query (e.g. reduce filters or increase total posts).
• Loading message appears but posts don’t change:
  • Confirm that the parent query has multiple pages of results.
  • Check your browser console for JavaScript errors and resolve any conflicts from other plugins or custom scripts.

Technical Details

• Block name: blocklayouts/infinite-scroll
• API version: 3
• Category: blocklayouts
• Ancestor: core/query