Skip to content

Instantly share code, notes, and snippets.

@markhowellsmead
Last active October 2, 2019 14:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save markhowellsmead/599688972d4bcd9cfd7ba35744d717b1 to your computer and use it in GitHub Desktop.
Save markhowellsmead/599688972d4bcd9cfd7ba35744d717b1 to your computer and use it in GitHub Desktop.
Gutenberg: MediaUpload Component (add to InspectorControls)
const {MediaUpload, MediaUploadCheck} = wp.blockEditor;
<MediaUploadCheck>
<MediaUpload
onSelect={clienticon => {
getLazySrcs(clienticon.id, 'smallsquare').then(clienticon => this.props.setAttributes({clienticon}));
}}
allowedTypes={['image/jpg', 'image/jpeg', 'image/png']}
value={this.props.attributes.clienticon.id}
render={({open}) => {
let title = _x('Bild auswählen', 'Block button text', 'sha');
if (this.props.attributes.clienticon.id) {
title = _x('Bild ersetzen', 'Block button text', 'sha');
}
return (
<Fragment>
{
this.props.attributes.clienticon.id &&
<figure className="o-sidebar__figure"><img onClick={open} src={this.props.attributes.clienticon.org[0]}/></figure>
}
<Button onClick={open} isDefault isLarge>
{title}
</Button>
{
this.props.attributes.clienticon.id &&
<Button onClick={() => this.props.setAttributes({clienticon: {id: false}})} isLink isDestructive isLarge>
{__('Remove Image')}
</Button>}
</Fragment>
);
}}
/>
</MediaUploadCheck>
@markhowellsmead
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment