Media & Text - Media picker buttons are not functional

[pinarol]

We need to make Media picker buttons functional.

Support for these items:

1st iteration:

• Adding image from WordPress media library

2nd iteration:

• Uploading image from device library
• Uploading image by capturing

3rd iteration:

• Adding video from WordPress media library
• Uploading video from device library
• Uploading video by capturing

Please refer to already existing image/video blocks for similar functionality.

[pinarol]

This work is dependent on this PR which is very close to merge WordPress/gutenberg#16305
But feel free to also checkout the PR branch to start working

[geriux]

Hey @pinarol !

So I've finished reviewing the task, I saw the image functionality is already implemented but not fully, here's a summary of the main issue:

1st interaction

Adding image from WordPress media library

Base implementation is there but some are missing:

• Image upload progress / with place holder
• Edit button in toolbar

2nd interaction

Uploading image from device library

Base implementation is there but some are missing

• Image upload progress / with place holder
• Edit button in toolbar

Uploading image by capturing

Base implementation is there but some are missing

• Image upload progress / with place holder
• Edit button in toolbar

3rd iteration

Adding video from WordPress media library

Not implemented yet

Uploading video from device library

Not implemented yet

Uploading video by capturing

Not implemented yet

---

After reviewing it I’d like to double check a few things:

Do we want to add the Media Upload progress and the edit button in the toolbar to keep it consistent as the Video / Image blocks?

For those, I’d reuse the MediaUploadProgress component but it's within the image block (the video block uses it as well) so I think it’d be best to extract it out of the image block since it would be used from different components (Image, Video, and MediaText). Any thoughts on this?

To add the video functionality we can as well reuse part of the code of the Video block but it’d also affect if we want to have the upload progress as well and if we extract the previously mentioned component (Media Upload Progress) or not.

Let me know when you can, thanks!

[pinarol]

hi @geriux 👋 Thanks for the analysis! I'll share my opinions here but defer the conclusion to @koke

Do we want to add the Media Upload progress and the edit button in the toolbar to keep it consistent as the Video / Image blocks?

I think so yes.

For those, I’d reuse the MediaUploadProgress component but it's within the image block (the video block uses it as well) so I think it’d be best to extract it out of the image block since it would be used from different components (Image, Video, and MediaText). Any thoughts on this?

Sounds good to me 👍

I expect media area behave same with image/video blocks. Maybe we can go even one step further and use InnerBlocks to embed image/video blocks directly in Media & Text but I don't know what kind of technical problems we'd be facing along the way tbh.

[koke]

I agree that, as a general rule, it should behave as closely as possible to the image and video blocks.

It makes a lot of sense to extract MediaUploadProgress as a standalone component.

[geriux]

Thank you both! I'll investigate about the InnerBlocks approach. I second that it's best to have the same functionality for all. Having duplicated logic may end up in some components staying behind over time. But I know sometimes it's just needed to duplicate.

I'll let you know once I review that =)

[geriux]

Hey @koke @pinarol After reviewing the InnerBlocks structure I think we should continue as we have it now but adding the missing functionality and extracting the MediaUploadProgress. If you both agree I can go ahead and start working on it =)

Thanks!

[pinarol]

Looks good to me 👍