Make a list with header and subtext in Gutenberg blocks

by

I want to create a block in the gutenberg editor, to create lists with a header and subtext (interview format with question and answer). The list should be in an ordered list.

I can’t figure out how to do this.

The result I want is:

    <ol>
        <li>
            <h3>This is editable question 1</h3>
            <p>This is the editable answer</p>
        </li>
        <li>
            <h3>This is editable question 2</h3>
            <p>This is the editable answer</p>
        </li>
        <li>
            <h3>This is editable question 3</h3>
            <p>This is the answer</p>
        </li>
    </ol>

The code i’ve got so far, displaying only an input text:

/**
 * BLOCK: Editable
 *
 * Registering a basic editable block with Gutenberg.
 * Introduces the concept of attributes and extracting
 * them, and the default text formatting added by Editable.
 *
 * Styles:
 *        editor.css — Editor styles for the block.
 *        style.css — Frontend styles for the block.
 */
( 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.
    var RichText          = wp.editor.RichText; // For creating editable elements.

    /**
     * Register block
     *
     * @param  {string}   name     Block name.
     * @param  {Object}   settings Block settings.
     * @return {?WPBlock}          Block itself, if registered successfully,
     *                             otherwise "undefined".
     */
    registerBlockType(
        'brandbeat/interview-format', // Block name. Must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
        {
            title: __( 'Interview format' ), // Block title. __() function allows for internationalization.
            icon: 'admin-tools', // 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.
            attributes: {
                content: {
                    type: 'array',
                    source: 'query',
                    default: [],
                    selector: 'section .card-block',
                    query: {
                        headline: {
                            type: 'array',
                            selector: 'h3',
                            source: 'children',
                            default: 'Title'
                        },
                        description: {
                            type: 'array',
                            selector: '.card-content',
                            source: 'children',
                            default: 'Answer'
                        },
                    },
                },
            },

            // Defines the block within the editor.
            edit: function( props ) {
                var content = props.attributes.content;

                function onChangeContent( updatedContent ) {
                    props.setAttributes( { content: updatedContent } );
                }

                return [
                    createElement(
                        RichText,
                        {
                            tagName: 'ol',
                            className: props.className,
                            value: content,
                            onChange: onChangeContent,
                            onFocus: props.setFocus
                        },
                    )
                ];
            },

            // Defines the saved block.
            save: function( props ) {
                var content = props.attributes.content;

                return createElement(
                    'p',
                    {
                        className: props.className,
                    },
                    content
                );
            },
        }
    );
} )();

I can’t find any example or tutorials on Google for some reason.

1 Answer
1

In general you have to do those things:

  • Define you attributes
  • Write a UI for the editor in the edit function, which saves values entered by the editor to your attributes
  • Render the html with the save function by using the values from your attributes

The tutorial from the official docs isn’t half bad:
https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type/

Leave a Comment