Automattic / Automattic/jetpack

"Select Media" modal (from Jetpack block) is not showing up in Widget page when WooPayments is activated

Open
#39,514 7 comments 0 reactions 0 assignees View on GitHub
[Block] Tiled Gallery [Feature] Tiled Gallery [Focus] Compatibility [Platform] Atomic [Plugin] Jetpack [Pri] Low [Status] Stale Bug Triaged
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.

image

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.