Fields: Replace the `FeaturedImageEdit` field to a more general `MediaUpload` field

[talldan]

What problem does this address?

The existing FeaturedImageEdit field looks it only has one purpose - for setting the featured image:
https://github.com/WordPress/gutenberg/blob/trunk/packages/fields/src/fields/featured-image/featured-image-edit.tsx

There's not much in the implementation that means this has to be the case. I think it's worth considering updating the implementation to be a more general MediaUpload (or perhaps just Media) field that can be used more broadly. For example, setting the site logo, the use cases in #71730, and possibly more.

Status

• Landed a MediaEdit component at Fields: Add MediaEdit component #73537
• Implement compact/full view (see designs below) MediaEdit: expanded view #74336
• Add drag and drop functionality MediaEdit: Add drag and drop functionality #74455
• Support validation (custom) MediaEdit: Support custom validation #74704
• Support label prop Add label to MediaEdit component #74176
• Can we absorb setValue logic into Media edit? Fields: Add MediaEdit component #73537 (comment)

[jameskoster]

Yeah it would be great to design a DataForm field that essentially integrates with the media library for selecting/uploading files. +100 for generalising—let's also consider multiple file selection.

I mocked this up a while ago which might serve as a starting point:

Regular DataForm

• Dotted outlines indicate users can drop files to upload/replace (probably not essential to begin with but nice to have)
• Clicking 'Choose file' or 'Add files' would open the Media Library in a DataViewsPicker in a Modal
  • With multi-select=true for the field variant that supports multiple files
• Clicking an already-selected file opens the Media Library
• 'Remove' unsets the file, but doesn't remove it from the Media Library

Panel DataForm

Clicking the field opens the Media Library in a DataViewsPicker in a Modal.

Side note: I wonder if a lower-level FileControl input component (basically a wrapper for input type="file" styled to look like the buttons with dotted outlines in the mockup above) would be useful here.

[jameskoster]

Worked on a quick iteration of the mockup above, to include a more visual variant of the control when set, inspired by the current featured image treatment in the document inspector:

[oandregal]

Surfacing a conversation with @andrewserong about this:

• The existing media type is not working well. It's so broad that we don't have enough information to provide meaningful defaults. For example, image, video, pdf, etc. have very different rendering mechanisms. Filtering for any of them is weird (what do we filter? by file name?).
• Even if we retire the media type for more specific ones, perhaps Edit could be shared among them? @andrewserong suggested we could leverage the existing Edit config for providing specific info the control needs. For example, allowedTypes:

{
  Edit: {
    control: 'media',
    allowedTypes: [ `image`, `video` ]
  }
}

[andrewserong]

Thanks for capturing the discussion! Yes, one of the things on my mind about this is that I think a common media control is probably more useful than a media field. Each field might need to store the image data in slightly different ways, but ideally the control will be in common.

@ntsekouras I see it looks like you've picked this one up. Happy to help review with this one! Once we've got a more general control in place it'd be great to replace the ad hoc controls in the Content Only Controls experiment, too: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/content-only-controls/media/index.js