Automattic / Automattic/jetpack

[Bug][HC]: Donation Forms tabs don't load properly Classic Themes with Infinite Scroll

Open
#40,903 3 comments 0 reactions 0 assignees View on GitHub
[Block] Donations [Feature] Infinite Scroll [Pri] Low [Pri] TBD Bug Customer Report [LEGACY] Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Quick summary

Donation forms that have multiple terms and tabs (One-Time, Monthly, Yearly) configured do not load properly if the post that contains the form is loaded by Infinite Scroll.

### Steps to reproduce

I've replicated this at my test site: https://pakcia.wpcomstaging.com/
1 - Create a post that includes a _Donations Form Block_
2 - Active theme be a _Classic Theme_ that supports Infinite Scroll
3 - Have enough posts so that the post that contains the _Donations Form Block_ gets loaded by Infinite Scroll
4 - The _Donations Form Block_ doesn't display properly and only displays text: https://prnt.sc/Ln1Gc05UBUWX

### What you expected to happen

Expect that the post properly loads its content and that the _Donations Form Block_ would be displayed properly and usable.

### What actually happened

Post content doesn't load properly and the _Donations Form Block_ is unusable.

### Browser

Google Chrome/Chromium

### Context

User reported issue in: 7776978-zen

### Platform (Simple, Atomic, or both?)

_No response_

### Other notes

Seems to be caused by Infinite Scroll not loading the scripts required for the _Donations Form Blocks_ because its loaded after, or the Infinite Scroll isn't calling the scripts.
If the post loads within the "infinite-wrap" div, it won't work. Example screen here shows donation form in "post 5" hasn't loaded as it's within the infinite wrap div, but above it the form displays properly: https://prnt.sc/B6Ry3C_4bXTu

Tested with the following themes:
Independent Publisher 2
Twenty Nineteen

### Reproducibility

Consistent

### Severity

Some (< 50%)

### Available workarounds?

No but the platform is still usable

### Workaround details

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the Donation Forms Block inside a post loaded by Infinite Scroll using a Classic Theme such as Independent Publisher 2 or Twenty Nineteen. Inspect whether the block's required scripts are loaded after the post enters the infinite-wrap; done means the One-Time, Monthly, and Yearly tabs render and remain usable in the newly loaded post.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, php, wordpress
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.