Image Block: Integrate with the media upload modal #802
Conversation
blocks/library/image/index.js
Outdated
| } ); | ||
|
|
||
| // When an image is selected in the media frame... | ||
| this.frame.on( 'select', this.onSelect ); |
There was a problem hiding this comment.
Could this be a separate component that block authors can more easily add? It'd be nice if we could keep the complexity of the image block to a minimum, and abstract away the need for hooking up the media modal.
mtias
added
the
[Priority] High
|
User experience wise, this is working great! Thank you for doing this. There was also some discussion a while back for auto-invoking the media library when you insert an image from the inserter directly. So this would be the behavior:
|
|
@jasmussen The workflow should be good now 👍 |
Yes! This validates your idea. Works really really well! |
| import { __ } from 'i18n'; | ||
| import Button from 'components/button'; | ||
|
|
||
| class MediaUploadButton extends Component { |
There was a problem hiding this comment.
I'd put this at the same abstraction level as Editable, not in general UI components.
There was a problem hiding this comment.
Yes, I hesitated but I decided to put it here because it can be useful outside the Editor (in other parts of WordPress).
There was a problem hiding this comment.
Blocks will be potentially usable outside the editor as well, so I'd still keep it with Editable :)
|
Please also refer to the new Image widget for some patterns for integration with the media library: |
|
@westonruter Any specific concerned you faced when integrating with the Media Library in the Image widget? The simple integration here seems to work well, at least for now. |
|
@youknowriad there were quite a few things we ran up against when doing more extensive integrations with the media library. If all you need is a simple integration, then cool. But as you look for deeper integration and making use of more features, please refer to the Image widget for prior learnings and collaboration. |
|
Let's merge this. @jasmussen playing with it a bit I kind of like the ability to insert an empty placeholder first, and then choosing to upload or pick from library. |
|
Agreed on merging, then we can decide later on whether we want it this or that way. I like that it's similar to inserting images today. But would be good to feel. |
| if ( !! type ) { | ||
| frameConfig.library = { type }; | ||
| } | ||
| this.frame = wp.media( frameConfig ); |
There was a problem hiding this comment.
Do we need to clean up this frame when the component unmounts? Maybe via the view.remove() function?
https://core.trac.wordpress.org/browser/trunk/src/wp-includes/js/media/views/view.js?rev=33337#L52
closes #418
This PR integrates the image block with the media uploader. I'm not familiar with
wp.media, so I'm just following https://codex.wordpress.org/Javascript_Reference/wp.media here and it seems to work as expected.