0

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.

video element in my code

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.

The media upload component in my code

This updates the src using a simple function. I'm passing the imageObject in and then updating the url using imageObject.url

enter image description here

For clarity, this is how the video element looks in the browser inspector before the user uploads their video.

enter image description here

They then use the upload button in the side panel and this directs them to the media manager to select their file.

enter image description here

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?

enter image description here

Æthelstan
  • 883
  • 1
  • 5
  • 12
  • grab a screen, https://stackoverflow.com/questions/60992142/snapshot-video-as-a-preview/61012704#61012704 then set as poster https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video – Lawrence Cherone Dec 07 '21 at 12:34
  • I'm pretty sure NodeJS has nothing to do with Wordpress + Gutenberg. Just for the reference. NodeJS is serverside, react gutenberg JS purely runs on clientside. – Frizzant Dec 09 '21 at 08:26
  • @Frizzant, you're quite right, I'm actually installing using npx @wordpress/create-block and this is creatign a REACT development framework. – Æthelstan Dec 13 '21 at 13:11

1 Answers1

0

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>
                )}
            />
Frizzant
  • 684
  • 1
  • 7
  • 28
  • I'm slightly confused by your answer, but I think you are very close. The `` REACT component can't take code in the way you have described in your answer, instead using a property called onSelect I can call a separate JS function. The `` component creates an “image object” this image object has a “url” property. The function takes the imageObject as the argument and then updates the url property with imageObject.url. This is how this function looks `const onImageSelect1 = ( imageObject ) => { setAttributes( { backgroundImage1: imageObject.url } ) }` – Æthelstan Dec 13 '21 at 13:23
  • It's important to note that the render function of the REACT component can't render anything in the Gutenberg preview in the WordPress post or page editor. It simply renders how the component will appear in the right-side panel in the editor. What needs to be updated is the imageObject.url property. I think the code is doing this, but it isn't visible in the preview until post or page has been saved and the page refreshed. – Æthelstan Dec 13 '21 at 13:27
  • I agree. it's not toally obvious what is happening. This is code that is actually working and in use, but abstracted from it's source for this post. – Frizzant Dec 14 '21 at 14:07