0
170
ViewsIn a REACT Gutenberg block, when a user updates a video element's src attribute how can I make this change visible to the user immediately?
I’m creating a custom Gutenberg block for WordPress using @wordpress/create-block, I'm using the MediaUpload React component, which can be referenced here https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload/README.md.
The block contains a user updatable HTML5 video element. My question is - how can I make it so when the user uploads the video of choice they see this in the preview of the post edit screen in WordPress? Currently when the user uploads their video and the src attribute is updated they don't see the video in the preview unless they publish the post and then refresh the page.
I’m using the MediaUpload component imported from @wordpress/block-editor When the user selects their image it actually creates an image object, this image object has a series of properties including "url" so we can pass it to a function as an argument.
This updates the src using a simple function. I'm passing the imageObject in and then updating the url using imageObject.url
For clarity, this is how the video element looks in the browser inspector before the user uploads their video.
They then use the upload button in the side panel and this directs them to the media manager to select their file.
When this step is complete and they return to the post edit screen the src attribute of the video element has been updated, but the DOM hasn't refreshed so the user doesn't see the change in the post edit area of Gutenberg. If they publish or save changes and then refresh the page, they will then see the video they added, but this is confusing for the user, I need them to be able to see the change immediately without saving or refreshing. Is there any way I can achieve this?
1 answers
Answer question0
You are not actually setting the "new" image after it has been saved to the variable. Try something like this:
<MediaUpload
onSelect={(image) => {
setAttributes({ image }) // when selected, save the image in the variable
}}
value={image ? image : ''} // if there is a saved image, this will show (so also after selecting one)
render={({ open }) => (
<div>
<a
href="#"
onClick={exampleFunction}
title={__('select Image', 'example')}
className="image-upload-link" >
</a>
</div>
)}
/>