block.js

/**
 * BLOCK: Atomic Blocks Test Block
 */

// Import block dependencies and components
import Inspector from './components/inspector';
import omit from 'lodash/omit';

// Extend component
const { Component } = wp.element;

// Components
const { __ } = wp.i18n;

// Register block
const { registerBlockType } = wp.blocks;

// Register editor components
const {
    RichText,
    InnerBlocks,
} = wp.editor;

const {
    createBlock
} = wp.blocks;

// Block attributes
const blockAttributes = {
    text: {
        type: 'string',
        default: 'This is default text.',
    },
    paddingLeft: {
        type: 'number',
    },
};

class ABTestBlock extends Component {
    render() {

        // Setup the attributes
        const { attributes: { text, paddingLeft }, isSelected, className, setAttributes } = this.props;

        return [
            // Show the block markup in the editor
            <RichText
                tagName="p"
                value={ text }
                className="ab-text"
                onChange={ ( value ) => this.props.setAttributes( { text: value } ) }
                style={ {
                    paddingLeft: paddingLeft ? `${paddingLeft}%` : null,
                } }
            />
        ];
    }
}

// Register the block
registerBlockType( 'atomic-blocks/ab-test', {
    title: __( 'AB Test Block' ),
    description: __( 'This is a test block to show how to deprecate block features.' ),
    icon: 'editor-ul',
    category: 'atomic-blocks',
    keywords: [
        __( 'test' ),
    ],
    attributes: blockAttributes,

    // Render the block components
    edit: ABTestBlock,

    // Save the attributes and markup
    save: props => {

        // Setup the attributes
        const { text, paddingLeft } = props.attributes;

        // Show the block markup in the editor
        return (
            <RichText.Content
                class="ab-text"
                tagName="p"
                value={ props.attributes.text }
                style={ {
                    paddingLeft: paddingLeft ? `${paddingLeft}%` : null,
                } }
            />
        );
    },

    deprecated: [
        {
            attributes: {
                paddingLeft: {
                    type: 'number',
                    default: 0,
                },
                ...blockAttributes
            },

            migrate( { paddingLeft } ) {
                return {
                    default: '2'
                };
            },

            save( props, attributes ) {
                return (
                    <RichText.Content
                        class="ab-text"
                        tagName="p"
                        value={ props.attributes.text }
                        style={ {
                            paddingLeft: `${props.attributes.paddingLeft}%`,
                        } }
                    />
                );
            },
        }
    ]
} );