WordPress editor controls
MediaUpload – Coding WordPress Gutenberg block settings
Share
Upload media to your custom Gutenberg block
You will often want an image, pdf or other files to be used in your custom block. WordPress has made this easy with the MediaUpload component that is part of the block editor (@wordpress/block-editor). Here you can see some of it’s basic properties:
import {
MediaUpload,
} from "@wordpress/block-editor";
<MediaUpload
onSelect={(media) => {
setAttributes({
downloadFile: {
title: media.title,
filename: media.filename,
url: media.url,
},
});
}}
multiple={false}
render={({ open }) => (
<>
<button onClick={open}>
{attributes.downloadFile === null
? 'Upload'
: 'Upload new file'}
</button>
<p>
{attributes.downloadFile === null
? ''
: '(' + attributes.downloadFile.title + ')'}
</p>
</>
)}
/>
Let’s go through the basic properties
The onSelect property is a callback to set the file object. The object contains the details of the file, such as title, filename, url etc. Save whatever you need to your attributes.
// ...
onSelect={(media) => {
setAttributes({
downloadFile: {
title: media.title,
filename: media.filename,
url: media.url,
},
});
}}
// ...
You want to allow multiple files to be selected at once (you get an array files) or simple one?
// ...
multiple={false}
// ...
The render property is a callback called to render the Button opening the media library. The simplest implementation should include a check if the file has been set already and render that info to the user.
If you are uploading an image – you could use this space to show a thumbnail of the selected image.
// ...
render={({ open }) => (
<>
<button onClick={open}>
{attributes.downloadFile === null
? 'Upload'
: 'Upload new file'}
</button>
<p>
{attributes.downloadFile === null
? ''
: '(' + attributes.downloadFile.title + ')'}
</p>
</>
)}
// ...
Here is a full example of how it is used inside the Inspector Controls component inside an edit function of a block:
import { InspectorControls, MediaUpload } from '@wordpress/block-editor'
import { Fragment } from '@wordpress/element'
import { PanelBody } from '@wordpress/components'
const edit = (props) => {
const { className, attributes, setAttributes } = props
const { show } = attributes
return (
<Fragment>
<InspectorControls>
<PanelBody title="Settings" initialOpen={false}>
<MediaUpload
onSelect={(media) => {
setAttributes({
downloadFile: {
title: media.title,
filename: media.filename,
url: media.url,
updated: ''
}
})
}}
multiple={false}
render={({ open }) => (
<>
<button onClick={open}>
{attributes.downloadFile === null
? '+ Upload file'
: 'x Upload new file'}
</button>
<p>
{attributes.downloadFile === null
? ''
: '(' + attributes.downloadFile.title + ')'}
</p>
</>
)}
/>
</PanelBody>
</InspectorControls>
<div>My Block Content</div>
</Fragment>
)
}
Want all the properties? Check the link to the github repo of component here.
Read more tutorials
Learn Gutenberg block building – Create a block that renders an ACF field
With this tutorial, you’ll learn how to create a custom Gutenberg block that displays an ACF field on the front-end of your website.
Read more Learn Gutenberg block building – Create a block that renders an ACF field
What is the theme.json in WordPress Full Site Editing?
Short introduction to the theme.json file that defines a WordPress full site editing theme. Includes useful resources to learn more!
Read more What is the theme.json in WordPress Full Site Editing?
Creating a server side rendered Gutenberg block
Learn how to create your first ‘Hello World’ server side block. Adding dynamic content to your block theme with ease.