How to create multiple meta fields in gutenberg block

Question

I need to create a wordpress Gutenberg block that will allow me to insert some data as name and surname, company name, the best sentence from the references.

So far I managed to create a Gutenberg block that is saving one text field.

dc-references-block.php

// register custom meta tag field
function dcr_register_post_meta() {
    register_post_meta( 'page', 'dc_references_block_field', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
    ) );
}
add_action( 'init', 'dcr_register_post_meta' );


function dcr_enqueue() {
    wp_enqueue_script(
        'dc-references-block-script',
        plugins_url( 'dc-references-block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-components' )
    );
}
add_action( 'enqueue_block_editor_assets', 'dcr_enqueue' );

dc-references-block.js

( function( wp ) {
    var el = wp.element.createElement;
    var registerBlockType = wp.blocks.registerBlockType;
    var TextControl = wp.components.TextControl;


    registerBlockType( 'dc-references-block/dc-references-block', {
        title: 'Title',
        icon: 'edit',
        category: 'common',

        attributes: {
            blockValue: {
                type: 'string',
                source: 'meta',
                meta: 'dc_references_block_field'
            }
        },

        edit: function( props ) {
            var className = props.className;
            var setAttributes = props.setAttributes;

            function updateBlockValue( blockValue ) {
                setAttributes({ blockValue });
            }

            return el(
                'div',
                { className: className },
                el( TextControl, {
                    label: 'write here name of company',
                    value: props.attributes.blockValue,
                    onChange: updateBlockValue
                }
              )

            );
        },

        save: function() {
            return null;
        }
    } );
} )( window.wp );

Whenever I try to add a second text field or textarea to the block I get an error "site does not support this block".

Could anyone explain to me how to, in this situation, add correctly more then one text field and textarea to a block?

Answer 1

It would be better if you included the code that did not work. In any case, I changed your code by adding another text input and a textarea (with relevant entries in attributes and meta).

Here is the modified code. Also, I have changed some of the code to be more readable.

Javascript

( function( wp ) {
    const el = wp.element.createElement;
    const registerBlockType = wp.blocks.registerBlockType;
    const TextControl = wp.components.TextControl;
    const TextareaControl = wp.components.TextareaControl;

    registerBlockType( 'dc-references-block/dc-references-block', {
        title: 'Title',
        icon: 'edit',
        category: 'common',

        attributes: {
            blockValue: {
                type: 'string',
                source: 'meta',
                meta: 'dc_references_block_field'
            },
            // Add two new attributes
            name: {
                type: 'string',
                source: 'meta',
                meta: 'dc_references_block_field_name'
            },
            desc: {
                type: 'string',
                source: 'meta',
                meta: 'dc_references_block_field_desc'
            }
        },

        edit: function( props ) {
            const className = props.className;
            const setAttributes = props.setAttributes;

            // Original element with onChange event as an anonymous function
            const text = el( TextControl, {
                label: 'write here name of company',
                value: props.attributes.blockValue,
                key: 'companyName',
                onChange: function( value ) {
                    setAttributes( { name: value } );
                }
            } );

            //Add two new elements
            const secondText = el( TextControl, {
                label: 'Write your name',
                value: props.attributes.name,
                key: 'username',
                onChange: function( value ) {
                    setAttributes( { name: value } );
                }
            } );

            const textArea = el( TextareaControl, {
                label: 'Write a description',
                value: props.attributes.desc,
                key: 'desc',
                onChange: function( value ) {
                    setAttributes( { desc: value } );
                }
            } );

            return el(
                'div',
                { className: className },
                // Children of the main div as an array
                [ text, secondText, textArea ]
            );
        },

        save: function() {
            return null;
        }
    } );
}( window.wp ) );

PHP

register_post_meta( 'page', 'dc_references_block_field', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
    ) );

   // register two new meta corresponding to attributes in JS
    register_post_meta( 'page', 'dc_references_block_field_name', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
    ) );

    register_post_meta( 'page', 'dc_references_block_field_desc', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
    ) );