Gutenberg: Media Modal (wp.media) hooks not working in some instances

[dcooney]

I have several plugins that hook into the Media Modal to accomplish things like pre-selecting an image on modal open() and resetting the media library collection after a dynamic image upload.

Using the classic editor, I am able to update the media library by resetting the props on the Collection as seen below.
wp.media.frame.content.get().collection.props.set({ignore: (+ new Date())});

With Gutenberg, when attempting to hook into the wp.media Modal using the core Image Block, wp.media.frame.content.get() returns null.

I realize get() and set() are Backbone methods so they may not work with the new object or schema of Gutenberg, but I am unable to find any documentation on what may have changed with the Media Modal window.

Expected behavior
It doesn't appear the Media Modal has changed with Gutenberg, so I would expect the methods to function as they did previously.

Desktop:

• OS: Mac High Sierra
• Browser Chrome, FF, Safari

Additional context

• Gutenberg 3.6.2

[Reno-Axel]

I came here with a same problem, I wanna refresh the modal content but I can't because wp.media.frame.content.get().collection doesn't exist, however, the wp.media.frame.content.get().controller has the collection but it doesn't refresh, I'm try to figure out how do it, the documentation that I found is here: https://atimmer.github.io/wordpress-jsdoc/index.html

I hope it helps.

[zackify]

I'm having an issue too. I know this is not a problem with my blocks, because the stack trace is from the WP js code. If I remove all blocks on the screen except this one, the modal works. At a completely unrelated block, now the modal won't open.

This happens the moment I call "open"

 <MediaUpload
      allowedTypes={['image']}
      value={attributes[name]}
      render={({ open }) => (
        <Button isPrimary onClick={open}>
          {label || 'Open Media Library'}
        </Button>
      )}
      onSelect={media =>
      console.log(media)
      }
    />

[designsimply]

Using the classic editor, I am able to update the media library by resetting the props on the Collection as seen below. wp.media.frame.content.get().collection.props.set({ignore: (+ new Date())});

First please note that I am a beginner with JavaScript. I am wondering if you need to enqueue media as a dependency explicitly in the case of Gutenberg? I couldn't find anything directly related in the handbook, but I did noticed in the Create Meta Block doc it says

Important: Before you test, you need to enqueue your JavaScript file and its dependencies. Note the WordPress packages used above are wp.element, wp.blocks, and wp.components. Each of these need to be included in the array of dependencies.

Since it mentions a few wp.* things, I wonder if you have to add wp-media for your case?

Past that, I also know there's an open issue showing that adding an image to the gallery via the "Upload an image" button below the block doesn't add it to the media modal and that there's an open PR pending for that at https://github.com/WordPress/gutenberg/issues/9073 and I was thinking the buildAndSetGalleryFrame() part of that PR might be helpful to you?

https://github.com/WordPress/gutenberg/pull/12367 might also be worth a look.

If you're keen!, and digging around in those issues anyway, and if they help you, you might consider testing the branch for each and leaving a note saying whether they work for you. 😊 I know in https://github.com/WordPress/gutenberg/issues/13441 they are looking for more reviewers, wanting to get more people involved, and reviewing those things will also work to make your own issue more visible (or even help you solve the problem along the way if the code you're reviewing does similar things to what you want! this is always a nice thing if it happens).

[chibani]

Same for me, on WP 5.0.3.
With the classic editor, the current command: wp.media.frame.on('all', function(e) { console.log(e); }); logs every event in browser's dev console.
With Gutenberg, the same command doesn't do anything.

Originally, I was working on a script that uses : wp.media.featuredImage.frame.on('open', /* my code */);, that has stopped working since I upgraded my WordPress installation to WP 5

[praditha]

Hi @chibani ,

I've tried the all event.
But it's only fired one time. After I confirm to choose the file, the Media frame was closed.
And then I want to change the file but the event is not fired anymore.

Is it true like that, or it's just in my local?

[chibani]

@praditha Previously (pre-guteberg), the frame events where fired on every interaction with the featuredImage frame (open, close, upload, select the featured image, etc...).
Now, it's now even fired once.

[chrisvanpatten]

I've just re-tested this, and confirmed that this does appear to continue to be a bug; it does not appear possible to consistently access events on wp.media.frame.

[talldan]

I haven't looked into it too deeply and there's a caveat that I'm no backbone expert, but it may be related to the way in which the block editor constructs and destroys the media frame as needed. The code is in this file:
https://github.com/WordPress/gutenberg/blob/master/packages/media-utils/src/components/media-upload/index.js

My guess is that the calls to frame.remove() are resulting in listeners being removed, and frame.content.get() does seem to return null until a media modal is opened, and then it returns a value.

It was noted on this trac ticket that the classic and block editor behave differently in the way they handle initializing, so that could also be affecting the hooks:
https://core.trac.wordpress.org/ticket/49431