box-list.js

//  Import CSS.
import './style.scss';
import './editor.scss';

import {List_Item, List_Item_Edit} from './list_item.js';

const {__} = wp.i18n; // Import __() from wp.i18n
const {registerBlockType} = wp.blocks;

const {
    TextControl
} = wp.components;

const {
    URLInputButton,
    InnerBlocks,
} = wp.editor;

registerBlockType('mat/block-mat-gb-box-list', {
    title: __('Materiell: Box List'),
    icon: 'grid-view',
    category: 'common',
    keywords: [
        __('Materiell'),
        __('Box List'),
        __('Custom'),
    ],

    attributes: {
        heading: {
            type: 'array',
            source: 'children',
            selector: '.heading',
            default: 'How Can We Help You?'
        }
    },

    edit: function (props) {

        const {
            attributes: {heading},
            setAttributes,
            isSelected
        } = props;

        const inner_blocks_template = [
            ['mat/block-mat-gb-box-list-item'],
            ['mat/block-mat-gb-box-list-item'],
            ['mat/block-mat-gb-box-list-item'],
            ['mat/block-mat-gb-box-list-item'],
        ];

        return (
            <div>
                <section className="gb-layout-full-width-container">
                    <div className="contents">
                        <div className="gb-content-square-menu">
                            {isSelected ? (
                                <TextControl
                                    label={__('Heading Text', 'materiell-plugins')}
                                    help={__('Leave this field blank to omit the heading.', 'materiell-plugins')}
                                    value={heading}
                                    className="heading-editor"
                                    onChange={heading => setAttributes({heading})}
                                />
                            ) : (
                                <h2 className="heading">{heading}</h2>
                            )}

                            <ul className="list-container editor">
                                <InnerBlocks
                                    allowedBlocks={[
                                        'mat/block-mat-gb-box-list-item',
                                    ]}
                                    template={inner_blocks_template}/>
                            </ul>
                        </div>
                    </div>
                </section>
            </div>
        );

    },

    save(props) {

        const {
            attributes: {heading, list_items}
        } = props;

        return (
            <div>
                <section className="gb-layout-full-width-container">
                    <div className="contents">
                        <div className="gb-content-square-menu">
                            <h2 className="heading">{heading}</h2>
                            <ul className="list-container">
                                <InnerBlocks.Content/>
                            </ul>
                        </div>
                    </div>
                </section>
            </div>
        );
    },
});

registerBlockType('mat/block-mat-gb-box-list-item', {
    title: __('Materiell: Box List Item'),
    parent: ['mat/block-mat-gb-box-list-item'],
    icon: 'grid-view',
    category: 'common',
    keywords: [
        __('Materiell'),
        __('Box List Item'),
        __('Custom'),
    ],

    attributes: {
        url: {
            type: 'string',
            source: 'attribute',
            selector: '.item-url',
            attribute: 'href'
        }
    },

    edit: function (props) {

        const {
            attributes: {url},
            setAttributes,
            isSelected
        } = props;

        const inner_blocks_template = [
            ['core/heading', {placeholder: 'Enter a title'}],
            ['core/paragraph', {placeholder: 'Enter content...'}],
        ];

        return (
            <li className="list-item">
                <InnerBlocks
                    templateLock="all"
                    template={inner_blocks_template}/>
                <URLInputButton
                    url={url}
                    onChange={(url) => setAttributes({url})}
                />
            </li>
        );

    },

    save(props) {
        const {
            attributes: {url},
        } = props;

        return (
            <li className="list-item">
                <a href={url} className="item-url">
                    <InnerBlocks.Content/>
                </a>
            </li>
        );
    },
});