WP Bootstrap Rows Reverse Control

reverse-row.js

import classnames from 'classnames';

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorAdvancedControls } = wp.editor;
const { ToggleControl } = wp.components;
const { addFilter } = wp.hooks;
const { __ } = wp.i18n;

const { assign, merge } = lodash;

function addAttributes(settings, name) {
    if (name === 'wp-bootstrap-blocks/row') {
        return assign({}, settings, {
                attributes: merge(settings.attributes, {
                reverse: {
                    type: 'boolean',
                    default: false,
                },
            }),
        });
    }
    return settings;
}

addFilter(
    'blocks.registerBlockType',
    'chooseyourname/wp-bootstrap-blocks/add-attributes',
    addAttributes,
);

const addReverseControl = createHigherOrderComponent((BlockEdit) => {
    return (props) => {
        const {
            attributes: { reverse },
            setAttributes,
            name,
        } = props;
        if (name !== 'wp-bootstrap-blocks/row') {
            return <BlockEdit {...props} />;
        }

        return (
            <Fragment>
                <BlockEdit {...props} />
                <InspectorAdvancedControls>
                    <ToggleControl
                        label={ __( 'Reverse Columns on mobile', 'chooseyourname' ) }
                        checked={ reverse }
                        onChange={ ( value ) =>
                            setAttributes( { reverse: value } )
                        }
                    />
                </InspectorAdvancedControls>
            </Fragment>
        );
    };
}, 'withInspectorAdvancedControl');

addFilter(
    'editor.BlockEdit',
    'chooseyourname/wp-bootstrap-blocks/add-inspector-controls',
    addReverseControl,
);

const addReverseClass = createHigherOrderComponent((BlockListBlock) => {
    return (props) => {
        const {
            attributes: { reverse },
            className,
            name,
        } = props;

        if (name !== 'wp-bootstrap-blocks/row') {
            return <BlockListBlock {...props} />;
        }

        return (
            <BlockListBlock
            {...props}
            className={classnames(className, reverse ? `flex-column-reverse flex-md-row ` : '')}
            />
        );
    };
}, 'withClientIdClassName');

addFilter(
    'editor.BlockListBlock',
    'chooseyourname/wp-bootstrap-blocks/add-editor-class',
    addReverseClass
);

function addReverseClassFrontEnd(props, block, attributes) {
    if (block.name !== 'wp-bootstrap-blocks/row') {
        return props;
    }

    const { className } = props;
    const { reverse } = attributes;

    return assign({}, props, {
        className: classnames(className, reverse ? `flex-column-reverse flex-md-row` : ''),
    });
}

addFilter(
    'blocks.getSaveContent.extraProps',
    'chooseyourname/wp-bootstrap-blocks/add-frontend-class',
    addReverseClassFrontEnd,
);