Skip to content

Instantly share code, notes, and snippets.

@garretthyder
Created January 20, 2020 23:01
Show Gist options
  • Save garretthyder/c6377853cb7eaff8aac0727b4d4107d5 to your computer and use it in GitHub Desktop.
Save garretthyder/c6377853cb7eaff8aac0727b4d4107d5 to your computer and use it in GitHub Desktop.
WPMVC editor.js for blocks
/**
* Gutenberg block type.
* WPMVC block for gutenberg.
*
* @author Alejandro Mostajo <http://about.me/amostajo>
* @copyright 10Quality <http://www.10quality.com>
* @license MIT
* @package WPMVC\MyApp
* @version 1.0.0
*/
wp.blocks.registerBlockType( 'wpmvc/block', {
/**
* Block title.
* @var string
* @since 1.0.0
*/
title: wp.i18n.__( 'MyApp Block', 'my-app' ),
/**
* Block description.
* @var string
* @since 1.0.0
*/
description: wp.i18n.__( 'Custom MyApp Block.', 'sendtonews' ),
/**
* Block icon.
* @var string
* @since 1.0.0
*/
icon: 'format-video',
/**
* Block category.
* @var string
* @since 1.0.0
*/
category: 'general',
/**
* Keywords.
* @var array
* @since 1.0.0
*/
keywords: [
wp.i18n.__( 'wpmvc', 'my-app' ),
wp.i18n.__( 'mvc', 'my-app' ),
wp.i18n.__( 'block', 'my-app' ),
],
/**
* Attributes / properties.
* @var dictionary
* @since 1.0.0
*/
attributes:
{
/**
* Block ID to display.
* If left blank, should use current.
* @since 1.0.0
* @var number
*/
blockID:
{
type: 'string'
},
},
/**
* Returns the editor display block and HTML markup.
* The "edit" property must be a valid function.
* @since 1.0.0
*
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
*
* @param {object} props
*
* @return {object} element
*/
edit: function( props ) {
return [
wp.element.createElement(
'div',
{
className: props.className,
},
(props.attributes.blockID
? 'Block [shortcode id="'+props.attributes.blockID+'"]'
: 'Block [shortcode]'
)
),
wp.element.createElement( wp.components.TextControl, {
label: 'Block ID',
value: props.attributes.blockID,
onChange: ( value ) => {
props.setAttributes( { blockID: value } );
}
} ),
];
},
/**
* Returns the HTML markup that will be rendered in live post.
* The "save" property must be a valid function.
* @since 1.0.0
*
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
*
* @param {object} props
*
* @return {object} element
*/
save: function( props ) {
return wp.element.createElement(
'div',
{
className: props.className,
},
(props.attributes.blockID
? '[shortcode id="'+props.attributes.blockID+'"]'
: '[shortcode]'
)
);
},
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment