Last active
October 2, 2019 14:30
-
-
Save markhowellsmead/599688972d4bcd9cfd7ba35744d717b1 to your computer and use it in GitHub Desktop.
Gutenberg: MediaUpload Component (add to InspectorControls)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Using a different LazySize if the block alignment changes: https://github.com/markhowellsmead/helpers/wiki/Gutenberg#use-different-lazysizes-image-when-alignment-changes