gutenberg-blocks.js

(function (blocks, components, i18n, element) {
    var el = element.createElement;
    var children = blocks.source.children;
    var BlockControls = wp.blocks.BlockControls;
    var InspectorControls = wp.blocks.InspectorControls;
    var TextControl = wp.blocks.InspectorControls.TextControl;
    var SelectControl = wp.blocks.InspectorControls.SelectControl;
    var ColorPalette = wp.blocks.ColorPalette;

    blocks.registerBlockType('atomion/divider-block', {
        title: i18n.__('Divider'),
        icon: 'minus',
        category: 'layout',
        attributes: {
            title: {
                type: 'array',
                source: 'children',
                selector: 'h3',
            },
            alignment: {
                type: 'string',
                default: 'center',
            },
            dividerStyle: {
                type: 'select',
                default: 'solid',
            },
            dividerWidth: {
                type: 'range',
                default: '200',
            },
            dividerSize: {
                type: 'range',
                default: '2',
            },
            dividerPaddingTop: {
                type: 'number',
                default: '20',
            },
            dividerPaddingRight: {
                type: 'number',
                default: '0',
            },
            dividerPaddingBottom: {
                type: 'number',
                default: '20',
            },
            dividerPaddingLeft: {
                type: 'number',
                default: '0',
            },
            dividerColor: {
                type: 'color',
                default: 'black',
            },
        },

        edit: function (props) {

            var focus = props.focus;
            var focusedEditable = props.focus ? props.focus.editable || 'title' : null;
            var attributes = props.attributes;
            var alignment = props.attributes.alignment;
            var dividerStyle = props.attributes.dividerStyle;
            var dividerSize = props.attributes.dividerSize;
            var dividerWidth = props.attributes.dividerWidth;
            var dividerPaddingTop = props.attributes.dividerPaddingTop;
            var dividerPaddingRight = props.attributes.dividerPaddingRight;
            var dividerPaddingBottom = props.attributes.dividerPaddingBottom;
            var dividerPaddingLeft = props.attributes.dividerPaddingLeft;
            var dividerColor = props.attributes.dividerColor;

            function onChangeAlignment(newAlignment) {
                props.setAttributes({alignment: newAlignment});
            }


            var focus_controls = !!focus && el( // Display controls when the block is clicked on.
                blocks.BlockControls,
                {key: 'controls'},
                el(
                    blocks.AlignmentToolbar,
                    {
                        value: alignment,
                        onChange: onChangeAlignment,
                    }
                )
            );

            var inspector_controls = !!focus && el(
                blocks.InspectorControls,
                {key: 'inspector'},
                el('div', {className: 'components-block-description'},
                    el('p', {}, i18n.__('Settings for the Divider'))
                ),
                el('h2', {}, i18n.__('Settings')),
                // divider style
                el('div', {className: 'divider-style-setting-container'},
                    el(
                        SelectControl,
                        {
                            type: 'number',
                            label: i18n.__('Number of Columns'),
                            value: dividerStyle,
                            options: [
                                {value: 'solid', label: i18n.__('solid')},
                                {value: 'dotted', label: i18n.__('dotted')},
                                {value: 'dashed', label: i18n.__('dashed')},
                                {value: 'double', label: i18n.__('double')},
                            ],
                            onChange: function (newStyle) {
                                props.setAttributes({dividerStyle: newStyle});
                            },
                        }
                    )
                ),
                // divider width
                el('div', {className: 'divider-width-setting-container  range-setting'},
                    el(
                        TextControl,
                        {
                            type: 'range',
                            label: i18n.__('Width'),
                            class: 'blocks-range-control__slider',
                            style: {'margin-left': 0},
                            value: dividerWidth,
                            min: 0,
                            max: 2000,
                            onChange: function (newWidth) {
                                props.setAttributes({dividerWidth: newWidth});
                            }
                        }
                    ),
                    el('span', {className: 'gap-height range-output', content: 'asd',},
                        attributes.dividerWidth + 'px')
                ),
                // divider size
                el('div', {className: 'divider-size-setting-container  range-setting'},
                    el(
                        TextControl,
                        {
                            type: 'range',
                            label: i18n.__('Size'),
                            class: 'blocks-range-control__slider',
                            style: {'margin-left': 0},
                            value: dividerSize,
                            min: 0,
                            max: 10,
                            onChange: function (newSize) {
                                props.setAttributes({dividerSize: newSize});
                            },
                        }
                    ),
                    el('span', {className: 'gap-height range-output', content: 'asd',},
                        attributes.dividerSize + 'px')
                ),
                // divider padding
                el('div', {className: 'divider-padding-setting-container  range-setting'},
                    el('label', {className: 'blocks-base-control__label'}, i18n.__('Padding in px')),
                    // top
                    el(
                        TextControl,
                        {
                            type: 'number',
                            label: i18n.__('top'),
                            class: 'blocks-range-control__slider',
                            style: {'margin-left': 0},
                            value: dividerPaddingTop,
                            onChange: function (newPaddingTop) {
                                props.setAttributes({dividerPaddingTop: newPaddingTop});
                            },
                        }
                    ),
                    // right
                    el(
                        TextControl,
                        {
                            type: 'number',
                            label: i18n.__('right'),
                            class: 'blocks-range-control__slider',
                            style: {'margin-left': 0},
                            value: dividerPaddingRight,
                            onChange: function (newPaddingRight) {
                                props.setAttributes({dividerPaddingRight: newPaddingRight});
                            },
                        }
                    ),
                    // bottom
                    el(
                        TextControl,
                        {
                            type: 'number',
                            label: i18n.__('bottom'),
                            class: 'blocks-range-control__slider',
                            style: {'margin-left': 0},
                            value: dividerPaddingBottom,
                            onChange: function (newPaddingBottom) {
                                props.setAttributes({dividerPaddingBottom: newPaddingBottom});
                            },
                        }
                    ),
                    // left
                    el(
                        TextControl,
                        {
                            type: 'number',
                            label: i18n.__('left'),
                            class: 'blocks-range-control__slider',
                            style: {'margin-left': 0},
                            value: dividerPaddingLeft,
                            onChange: function (newPaddingLeft) {
                                props.setAttributes({dividerPaddingLeft: newPaddingLeft});
                            },
                        }
                    )
                ),
                // divider color
                el('div', {className: 'divider-size-setting-container  range-setting', label: i18n.__('Size')},
                    el('label', {className: 'blocks-base-control__label'}, i18n.__('Color')),
                    el(
                        ColorPalette,
                        {
                            type: 'color',
                            label: i18n.__('Size'),
                            class: 'blocks-range-control__slider',
                            style: {'margin-left': 0},
                            value: dividerColor,
                            onChange: function (newColor) {
                                props.setAttributes({dividerColor: newColor});
                            },
                        }
                    )
                )
            )


            return [focus_controls, inspector_controls];
        },

        save: function (props) {
            var attributes = props.attributes;

            return (
                el('div', {className: props.className},
                    el('div', {
                            className: 'gap', style: {height: attributes.gapHeight + 'px'}
                        }
                    )
                )
            );
        }
    });

})(
    window.wp.blocks,
    window.wp.components,
    window.wp.i18n,
    window.wp.element
);