Last active
March 23, 2018 12:45
-
-
Save dennyf/b970202e89297ca88ba1d6dcdfa1ad90 to your computer and use it in GitHub Desktop.
This is an example of how we can simplify Gutenberg's custom block API - this is only an illustrative example
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 { __ } = wp.i18n; // Import __() from wp.i18n | |
const { registerBlockType, RichText, UrlInput, InspectorControls, PanelColor, ColorPalette } = wp.blocks; | |
/** | |
* This class registers a custom block type, by creating the | |
* controls and updating the values automatically. It also allows passing a single | |
* render function to avoid repetitive code in edit and update. | |
*/ | |
class MyCustomComponent{ | |
constructor(blockId, props, render){ | |
this.blockId = blockId; | |
this.props = props; | |
this.render = render; | |
this.init(); | |
} | |
init(){ | |
const props = Object.assign(this.props, { | |
edit: this.edit.bind(this), | |
save: this.save.bind(this) | |
}); | |
registerBlockType(this.blockId, props); | |
} | |
edit(props){ | |
const atts = this.props.attributes; | |
const elements = [this.render(props, 'edit')]; | |
const onValueChange = (attrId, newValue)=>{ | |
let newAtts = {}; | |
newAtts[attrId] = newValue; | |
props.setAttributes(newAtts); | |
}; | |
for (let attrId in atts) { | |
if (!atts.hasOwnProperty(attrId)) continue; | |
switch(atts[attrId].type) { | |
//TODO: support all controls here | |
case 'color': | |
elements.push( | |
<InspectorControls key="inspector"> | |
<ColorPalette | |
value={ atts[attrId] } | |
onChange={ ( newValue ) => onValueChange( attrId, newValue ) } | |
/> | |
</InspectorControls> | |
); | |
break; | |
} | |
} | |
return elements; | |
} | |
save(props){ | |
return this.render(props, 'save'); | |
} | |
} | |
/** | |
* This component can be used to support an inline RichText control. Please see | |
* the render function below for an example how it is used. | |
*/ | |
class MyTextComponent extends React.Component{ | |
render(){ | |
const {attrId, mode, props } = this.props; | |
let onValueChange = (newValue) => { | |
let newAtts = {}; | |
newAtts[attrId] = newValue; | |
props.setAttributes(newAtts); | |
}; | |
if(mode == 'save'){ | |
return props.attributes[attrId]; | |
}else if(mode == 'edit'){ | |
return (<RichText | |
onChange={ onValueChange } | |
value={ props.attributes[attrId] } | |
/>); | |
} | |
} | |
} | |
/** | |
* And this is how we register the component | |
*/ | |
new MyCustomComponent( 'myplugin/button', { | |
title: __( 'My Button' ), | |
icon: 'button', | |
category: 'common', | |
attributes: { | |
btntext: { | |
type: 'plaintext', | |
selector: 'button', | |
}, | |
bgcolor: { | |
type: 'color', | |
label: __('Select color'), | |
selector: 'button', | |
attribute: 'color' | |
} | |
} | |
}, | |
function(props, mode){ | |
let atts = props.attributes; | |
return ( | |
<button color={atts.bgcolor} style={ { backgroundColor: atts.bgcolor } }> | |
<MyTextComponent props={props} mode={mode} attrId="btntext" /> | |
</button> | |
); | |
} | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment