Automattic / Automattic/jetpack
"Select Media" modal (from Jetpack block) is not showing up in Widget page when WooPayments is activated
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
### Impacted plugin
Jetpack
### Quick summary
When the WooPayment plugin is activated, the Select Images > Media Library from the Tiled Galery (Jetpack) is not showing the Modal and the console shows the following error:
```
react-dom.min.js?ver=18:1 Uncaught TypeError: _.contains is not a function
at r.extend.get (media-models.min.js?ver=6.6.2:2:10532)
at n._requery (media-models.min.js?ver=6.6.2:2:5059)
at n._changeQuery (media-models.min.js?ver=6.6.2:2:2274)
at p (backbone.min.js?ver=1.5.0:2:3818)
at f (backbone.min.js?ver=1.5.0:2:3497)
at a (backbone.min.js?ver=1.5.0:2:692)
at e.trigger (backbone.min.js?ver=1.5.0:2:3380)
at h.Model.set (backbone.min.js?ver=1.5.0:2:5789)
at n.initialize (media-models.min.js?ver=6.6.2:2:1926)
at h.Collection (backbone.min.js?ver=1.5.0:2:8619)
react-dom.min.js?ver=18:1 Uncaught TypeError: Cannot read properties of undefined (reading 'on')
at d.initializeListeners (index.js:238:14)
at d.openModal (index.js:457:8)
at onClick (editor-experimental.js?minify=false&ver=105122b4097ae517260a:178:9007)
at n. (SK3NAZA3.js:47:11)
at Object.Ga (react-dom.min.js?ver=18:1:105337)
at B (react-dom.min.js?ver=18:1:10495)
at W (react-dom.min.js?ver=18:1:10550)
at qe (react-dom.min.js?ver=18:1:23291)
at Ke (react-dom.min.js?ver=18:1:23705)
at react-dom.min.js?ver=18:1:29056
react-dom.min.js?ver=18:1 Uncaught TypeError: this.activateMode is not a function
at media-views.min.js?ver=6.6.2:2:59467
at bt (lodash.js:530:11)
at Function.ba (lodash.js:9409:52)
at n._createModes (media-views.min.js?ver=6.6.2:2:59427)
at n.initialize (media-views.min.js?ver=6.6.2:2:58836)
at n.initialize (media-views.min.js?ver=6.6.2:2:79654)
at n.initialize (media-views.min.js?ver=6.6.2:2:73270)
at h.View (backbone.min.js?ver=1.5.0:2:14872)
at n.constructor (wp-backbone.min.js?ver=6.6.2:2:2602)
at n.constructor (media-views.min.js?ver=6.6.2:2:106544)
```
- WooPayments v8.2.2
- Jetpack v13.8.1
### Steps to reproduce
1. Create a store blog
2. Add the jetpack and WooPayment plugins
3. In Appearance > Widgets add a Tiled Gallery.
4. Try to select the Media Library.
5. The Select Media Modal will not be shown.
### A clear and concise description of what you expected to happen.
It's expected to open the modal with all the images available in the Media Library.
### What actually happened
The modal is not shown.
### Impact
One
### Available workarounds?
Yes, easy to implement
### If the above answer is "Yes...", outline the workaround.
- Disable the WooPayment plugin
- Update the widget by selecting the images
- Re-enable the WooPayment plugin
### Platform (Simple and/or Atomic)
Atomic
### Logs or notes
_No response_
Contributor guide
Research direction
Reproduce the failure in Appearance > Widgets with Jetpack and WooPayments enabled, then start from the console stack entries in index.js, editor-experimental.js, media-models.min.js, and media-views.min.js. Trace why opening the Tiled Gallery media selector fails; done means the Select Media modal opens and displays the available Media Library images without console errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, php, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100