Media upload button is not rendering

[jvisick]

Issue Overview

Working locally off of current master #f4c40f6 it looks like the MediaUpload component is not rendering anymore? I don't see it on the image block or the cover image block, as well as in the inspector for featured images.

Steps to Reproduce (for bugs)

1. Open new page
2. Add an image block
3. Only option to upload new image is given

Screenshots / Video

[youknowriad]

I can't reproduce this myself. It seems to work as expected for me.

[danielbachhuber]

@jvisick What debugging have you done? Can you see if there are any JavaScript errors in your console?

[jvisick]

@danielbachhuber No console errors. I have tried to isolate what commit it still works on. @youknowriad if you can't recreate it let me try and get some more info...

[jvisick]

@danielbachhuber Okay, it appears to be a plugin conflict with ACF Pro (v5.6.9). I'll see if I can isolate it further.

[youknowriad]

pinging @gziolo as this is probably related to the work we did on adding extensibility to the MediaUpload component #5211

[jvisick]

@youknowriad @gziolo yes the merge of #5211 seems to be where the conflict was introduced.

[gziolo]

I'll try to reproduce myself with AFC Pro.

[gziolo]

I couldn't reproduce with the free version of AFC:

Does it need to be a pro version? Do you have any specific fields configured which might cause some conflicts?

[shoetten]

I experience the same issue. It's not necessarily bound to the pro version, just to version 5 i think.
To reproduce, you can install ACF v5 either through composer or using the instructions described here:
https://www.advancedcustomfields.com/resources/upgrade-guide-version-5/

[mejta]

Same for me ... using ACF Pro 5.6.9. When I disable the plugin it works, if I enable plugin, MediaUpload is not shown.

[jvisick]

@gziolo I tested with a clean install of wp and just activating ACF Pro (v5.6.9) without any config causes the problem. I have not tried the free or earlier versions of ACF.

[shoetten]

Yeah, same here with a clean install of wp and only Gutenberg v2.5.0 and ACF v5.6 installed.
React incorrectly renders an <Unkown> component, instead of the actual button, when used together with ACF => v5.

[gziolo]

I was able to reproduce by installing ACF Pro (v5.6.9). I also found that other hooks don't work as expected. Copy Content button is missing in More Menu:

This issue is caused by the ACF implementation in assets/js/acf-input.js file, lines 8-250:

var EventManager = function() {
    ...
};

window.wp = window.wp || {};
window.wp.hooks = new EventManager();

Putting this into words, ACF reimplements wp.hooks instead of using the already present module registered under wp-hooks name. My understanding is that it removes some of the registered previously filters causing the issue.

There is nothing to do about it on the Gutenberg side, so closing this one.

[gziolo]

Thanks for your help with debugging this one. Any hints what is the best way to reach out to ACF team and help them fix this issue?

[gziolo]

Okey, I opened an issue in ACF repository ☝️

[gziolo]

This has been fixed in ACF PRO 5.6.10. When you have a chance, can you please update and test it out? If the problem persists, please let me know and I'll continue to investigate.

@jvisick, @mejta, @shoetten - can you confirm? :)

[mejta]

@gziolo I can confirm that issue with MediaUpload is fixed with ACF PRO 5.6.10. When activated it works as expected. But they introduced new bug with wp.hooks :), but that is not affecting Gutenberg.

[gziolo]

I bet they need to updated the names of their hooks to follow whatever wp.hooks expects. It’s definitely fixable. Thanks for your help 👏