0

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.

  • Hi, Does your block needs only these 3 set of "li" or unlimited set of "li" ? – Ashiquzzaman Kiron Feb 12 at 17:21
  • yes, unlimited. – Royw Feb 13 at 8:25
0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.