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
Top 50 WordPress Blogs to market your WordPress product (2024 edition)
Discover the top 50 WordPress blogs to market your WordPress product in 2024. Learn effective strategies and stay tuned for more tips on boosting your plugin, theme, or tool’s visibility.
Read more Top 50 WordPress Blogs to market your WordPress product (2024 edition)
How to use multiple post types in a Query Loop Block
Currently the Query Loop only supports one post type. In this article we will show how we add multiple post types to query using the pre_get_posts action.
Read more How to use multiple post types in a Query Loop Block
How to add filters and search to the WordPress Query Loop Block
It has been a pain to add filters and search to your feeds in Gutenberg. Not any more, we will teach you how.
Read more How to add filters and search to the WordPress Query Loop Block