Automattic / Automattic/jetpack
VideoPress Uploader + ACF Image Validator Conflict
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
### Impacted plugin
Jetpack
### Steps to Reproduce
1. Install [Advanced Custom Fields 5.12.3 ](https://wordpress.org/plugins/advanced-custom-fields/) (also reproducible with ACF PRO 5.12.3)
2. Make sure VideoPress is enabled from JetPack -> Settings -> Performance in `wp-admin/admin.php?page=jetpack#/performance`
3. Create a new ACF image field, define maximum width 1px and height 1px (or any arbitrary value) and set the field rules to `Show this field group if -> Post Type -> is equal to -> Post (or Page)`
4. Go to any post or page, and try to upload an image that exceeds the maximum dimensions in the ACF field.
### A clear and concise description of what you expected to happen.
An error should be shown in the UI of the file uploader:
```
test.jpg
Image width must not exceed 1px.
Image height must not exceed 1px.
```
### What actually happened
The uploader progress "hangs" and there is a JS error caused by the VideoPress Uploader JS:
```
ReferenceError: Can't find variable: error
handleStandardResponse — videopress-uploader.min.js:1:206
(anonymous function) — videopress-plupload.min.js:1:3076
dispatchEvent — plupload.min.js:1:14654
(anonymous function) — plupload.min.js:1:8934
(anonymous function) — moxie.min.js:1:19224
(anonymous function) — moxie.min.js:1:18746
t — moxie.min.js:1:1726
inSeries — moxie.min.js:1:1761
dispatchEvent — moxie.min.js:1:18783
(anonymous function) — moxie.min.js:1:40789
(anonymous function) — moxie.min.js:1:18746
t — moxie.min.js:1:1726
inSeries — moxie.min.js:1:1761
dispatchEvent — moxie.min.js:1:18783
(anonymous function) — moxie.min.js:1:59907
```
### Browser
_No response_
### Other information
## Summary
When the "Enable VideoPress" toggle is enabled from `wp-admin/admin.php?page=jetpack#/performance`, there's a conflict with the Advanced Custom FIelds (ACF) plugin.
If an ACF image field has maximum width/height defined, and you upload a new image that exceeds the dimensions, there's a JS error in the console and the warning for exceeding the dimensions doesn't show up. As soon as VideoPress is disabled from JetPack's settings, ACF image validation starts working again.
### Expected Result
## Not Reproducible When
This issue, as far as I can tell, is only reproducible on post/page edit screens that have ACF image fields with validation criteria.
The issue doesn't reproduce on Taxonomy screens (and maybe others). For example, set the ACF image field Rules to `Show this field group if -> Taxonomy -> is equal to -> All`. Then go and edit a category or tag taxonomy item and upload an image exceeding the dimensions there. The issue doesn't reproduce.
## Site Info
The issue was originally reported by a customer on WP VIP.
The issue is the same everywhere and reproducible with the latest public version of Jetpack – 11.2 as well as the latest pre-release 11.3-a.7.
### Platform (Simple, Atomic, or both?)
Simple, Atomic, Self-hosted
### Reproducibility
Consistent
### Severity
Some (< 50%)
### Available workarounds?
_No response_
### Workaround details
_No response_
Contributor guide
Research direction
Reproduce the conflict on a post or page with VideoPress enabled and an ACF image field limited to 1px dimensions. Start with the VideoPress uploader code indicated by videopress-uploader.min.js and videopress-plupload.min.js, then trace how the ACF validation response is handled. Done means the uploader shows the width and height validation errors without a JavaScript error or stalled progress.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, php
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100