Multiple Blocks in registerBlockType() Block.js

Question

I am needing to add multiple blocks into the block.js file of my WordPress plugin. I have the following code, but it doesn’t work as expected.

( function() {
    var __ = wp.i18n.__; // The __() function for internationalization.
    var createElement = wp.element.createElement; // The wp.element.createElement() function to create elements.
    var registerBlockType = wp.blocks.registerBlockType; // The registerBlockType() function to register blocks.

    /**
     * Register block
     *
     * @param  {string}   name     Block name.
     * @param  {Object}   settings Block settings.
     * @return {?WPBlock}          Block itself, if registered successfully,
     *                             otherwise "undefined".
     */
    registerBlockType(
        'plugin/custom-block-shortcode-block', // Block name. Must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
        {
            title: __( 'Shortcode', 'plugin-blocks' ), // Block title. __() function allows for internationalization.
            icon: 'smiley',
            category: 'plugin-blocks', // Block category. Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.

            // Defines the block within the editor.
            edit: function( props ) {
                return createElement(
                    'p', // Tag type.
                    {
                        className: props.className,  // Class name is generated using the block's name prefixed with wp-block-, replacing the / namespace separator with a single -.
                    },
                    '[Shortcode][/Shortcode]' // Block content
                );
            },

            // Defines the saved block.
            save: function( props ) {
                return createElement(
                    'p', // Tag type.
                    {
                        className: props.className,  // Class name is generated using the block's name prefixed with wp-block-, replacing the / namespace separator with a single -.
                    },
                    '[Shortcode][/Shortcode]' // Block content
                );
            },
        },
        'plugin/custom-block2-shortcode-block', // Block name. Must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
        {
            title: __( 'Shotcode2', 'plugin-blocks' ), // Block title. __() function allows for internationalization.
            icon: 'smiley',
            category: 'plugin-blocks', // Block category. Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.

            // Defines the block within the editor.
            edit: function( props ) {
                return createElement(
                    'p', // Tag type.
                    {
                        className: props.className,  // Class name is generated using the block's name prefixed with wp-block-, replacing the / namespace separator with a single -.
                    },
                    '[Shortcode][/Shortcode]' // Block content
                );
            },

            // Defines the saved block.
            save: function( props ) {
                return createElement(
                    'p', // Tag type.
                    {
                        className: props.className,  // Class name is generated using the block's name prefixed with wp-block-, replacing the / namespace separator with a single -.
                    },
                    '[Shortcode][/Shortcode]' // Block content
                );
            },
        }
    );
})();

This shows the first block, but not the second block, how do I have multiple blocks in one registerBlockType function?

0
Vil Ignoble 2 years 2019-10-28T16:51:13-05:00 0 Answers 89 views 0

Leave an answer

Browse
Browse