-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Blocks: Add Upload button to audio and video blocks #5431
Conversation
@@ -25,13 +25,13 @@ import { rawHandler } from '../api'; | |||
*/ | |||
export default function ImagePlaceholder( { className, icon, label, onSelectImage, multiple = false } ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you think, this could be renamed "MediaPlaceholder" to make the experience even more similar? and provide a media type?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As a next iteration, we could bring those two closer by doing proper refactoring. Actually, this was the first step I took, but then I backed off, because I didn't want to change too much in one PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also see my comment #5431 (comment), you were too fast :)
utils/mediaupload.js
Outdated
*/ | ||
export function mediaUpload( filesList, onImagesChange ) { | ||
export function mediaUpload( filesList, onImagesChange, allowedType ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we rename onImagesChange
=> onChange
or onMediaChange
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I missed that :(
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I picked onFileChange
to reflect the param's description.
Further improvements to consider@karmatosed and @jasmussen - are there any plans to iterate further on the media-related blocks? Speaking myself, it seems like this PR bring images and other media formats closer in terms of UX. However, there are a couple of things we could tackle in the follow-up PRs I noticed when testing my changes:
|
0ee584e
to
12b9d5f
Compare
Media is sort of the forgotten space. Yes, there are many plans to improve, including a few tracked in #4108, #2439 and #5256. It's not for a lack of desire to improve, unify, enhance things around media related blocks, it's purely a lack of resources, and so because they work, they haven't been prioritized. Your list looks good, though, and I'd thumb up those improvements if they were made. |
It's not for this week, but I will keep it on my todo list :) |
👍 for this and also agree, this is a small but significant media improvement we can make. |
Opened a follow-up issue as discussed above: #5456. |
Description
As suggested by @youknowriad here:
This PR adds the
Upload
button for the audio and video blocks.I also added a few refactorings to make code more generic and work properly with the new requirements.
mediaUpload
util accepts a type of file as a param to work with audio and video formats.I also fixed a broken behavior of the
edit
button which did nothing when the placeholder was displayed in the audio or video block. I updated the logic to display the button only when the file is selected.This should conclude pre-requirements to make it possible to merge #5211.
How Has This Been Tested?
Manually:
Upload
button to add a new audio file in he audio block.Upload
button to add a new video file in the video block.Edit
button is not visible when in the edit mode for audio and video blocks.Screenshots (jpeg or gifs if applicable):
Please ignore
wide
andfull
buttons in the block's toolbar - I used 2 different websites to create screenshots :)Audio - file selected
Audio - editing
Before
After
Video - file selected
Video - editing
Before
After
Checklist: