/** | |
* BLOCK: gtm-audio-block | |
* | |
* Registering a basic block with Gutenberg. | |
* Simple block, renders and saves the same content without any interactivity. | |
*/ | |
// Import CSS. | |
import './style.scss'; | |
import './editor.scss'; | |
const { __ } = wp.i18n; // Import __() from wp.i18n | |
const { | |
registerBlockType, // Basic block register function | |
RichText, // Element Tag for all editable inputs | |
source // For attribute sources | |
} = wp.blocks; // Import registerBlockType() from wp.blocks | |
const { InspectorControls } = wp.editor; | |
const { ColorPalette } = wp.components; | |
/** | |
* Register: aa Gutenberg Block. | |
* | |
* Registers a new block provided a unique name and an object defining its | |
* behavior. Once registered, the block is made editor as an option to any | |
* editor interface where blocks are implemented. | |
* | |
* @link https://wordpress.org/gutenberg/handbook/block-api/ | |
* @param {string} name Block name. | |
* @param {Object} settings Block settings. | |
* @return {?WPBlock} The block, if it has been successfully | |
* registered; otherwise `undefined`. | |
*/ | |
registerBlockType( 'cgb/block-gtm-audio-block', { | |
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. | |
title: __( 'gtm-audio-block - CGB Block' ), // Block title. | |
icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/. | |
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. | |
keywords: [ | |
__( 'gtm-audio-block — CGB Block' ), | |
__( 'CGB Example' ), | |
__( 'create-guten-block' ), | |
], | |
/** | |
* Object with all binding elements between the view HTML and the functions | |
* Let's you bind data from DOM elements and storage attributes | |
*/ | |
attributes: { | |
// To storage background colour of the div | |
background_color: { | |
type: 'string', | |
default: 'red', // Default value for newly added block | |
}, | |
// To storage the complete style of the div that will be 'merged' with the selected colours | |
block_style: { | |
selector: 'div', // From tag a | |
source: 'attribute', // binds an attribute of the tag | |
attribute: 'style', // binds style of a: the dynamic colours | |
} | |
}, | |
/** | |
* The edit function describes the structure of your block in the context of the editor. | |
* This represents what the editor will render when the block is used. | |
* | |
* The "edit" property must be a valid function. | |
* | |
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/ | |
*/ | |
edit: function( props ) { | |
var background_color = props.attributes.background_color // To bind button background colour | |
// Style object for the button | |
// I created a style in JSX sintax to keep it here for | |
// the dynamic changes | |
var block_style = props.attributes.block_style // To bind the style of the button | |
block_style = { | |
backgroundColor: background_color, | |
color: '#000', | |
padding: '14px 25px', | |
fontSize: '16px', | |
} | |
// | |
// onChange event functions | |
// | |
function onChangeBgColor ( content ) { | |
props.setAttributes({background_color: content}) | |
} | |
// Creates a <p class='wp-block-cgb-block-gtm-audio-block'></p>. | |
return [ | |
<InspectorControls> | |
<label class="blocks-base-control__label">background color</label> | |
<ColorPalette // Element Tag for Gutenberg standard colour selector | |
onChange={onChangeBgColor} // onChange event callback | |
/> | |
</InspectorControls> | |
, | |
<div className={ props.className } style={block_style}> | |
<p>— Hello from the backend.</p> | |
</div> | |
]; | |
}, | |
/** | |
* The save function defines the way in which the different attributes should be combined | |
* into the final markup, which is then serialized by Gutenberg into post_content. | |
* | |
* The "save" property must be specified and must be a valid function. | |
* | |
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/ | |
*/ | |
save: function( props ) { | |
var block_style = { | |
backgroundColor: props.attributes.background_color | |
} | |
return ( | |
<div style={block_style}> | |
<p>— Hello from the frontend.</p> | |
</div> | |
); | |
}, | |
} ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment