WPMVC editor.js for blocks

editor.js

/**
 * 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]'
            )
        );
    },
} );