Automattic / Automattic/jetpack
[Bug][HC]: Donation Forms tabs don't load properly Classic Themes with Infinite Scroll
- 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
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