Automattic / Automattic/jetpack

Infinite Scroll: Check for infiniteScroll when enqueuing the-neverending-homepage

Open
#14,578 1 comment 0 reactions 0 assignees View on GitHub
[Feature] Infinite Scroll [Pri] Low Bug Good For Community
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

Jetpack does a good job checking to see if `the-neverending-homepage` (ie `infinity.min.js`) needs to be loaded by using the [`is_last_batch()`](https://github.com/Automattic/jetpack/blob/master/modules/infinite-scroll/infinity.php#L309) function.

However, if `the-neverending-homepage` is enqueued outside of [`action_template_redirect()`](https://github.com/Automattic/jetpack/blob/master/modules/infinite-scroll/infinity.php#L424) on a page with fewer than `posts_per_page` a JavaScript error will appear:
```
ReferenceError: infiniteScroll is not defined
```

This is due to `var infiniteScroll` never being defined as it only happens when `action_template_redirect()` is true.

#### Steps to reproduce the issue

1. Enable Jetpack's Infinite Scroll module and make sure your theme has support for IS.
2. Manually enqueue `the-neverending-homepage` via a plugin or theme:
```
function my_infinite_scroll_scripts() {
wp_enqueue_script( 'the-neverending-homepage' );
}
add_action( 'wp_enqueue_scripts', 'my_infinite_scroll_scripts' );
```
3. Load the module on a page that has fewer posts than `posts_per_page`. In testing I enqueued the script on the "author" page and then visited an author with only a few post. This may also depend on `infinite_scroll_archive_supported` being `true`.

4. Note JavaScript error.

#### What I expected
No JavaScript error, just IS being loaded but having no effect.

#### What happened instead
A reference error.

#### Proposed Fixed

A quick fix would be to wrap `infinity.js` in a conditional statement like `if (typeof infiniteScroll !== 'undefined') {`. Would this be an acceptable solution? If so, I can create a PR. Otherwise, we may need to look at longer-term solutions like defining `var infiniteScroll` inside the script itself.

Contributor guide

Open the contributing guide

Research direction

Start in modules/infinite-scroll/infinity.php at is_last_batch() and action_template_redirect(), then inspect the infinity.js script that references infiniteScroll. Reproduce the issue by manually enqueueing the-neverending-homepage on a page with fewer posts than posts_per_page. Done means the script can load without a ReferenceError and has no effect when infiniteScroll is unavailable.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, php, wordpress
Domain
backend, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.