index.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.',
    }
};

class ABTestBlock extends Component {
	render() {

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

		return [
			// Show the block markup in the editor
			<div class="ab-text">
				<InnerBlocks />
			</div>
		];
	}
}

// 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 } = props.attributes;

		// Save the block markup for the front end
		return (
			<div class="ab-text">
				<InnerBlocks.Content />
			</div>
		);
	},

	deprecated: [
		{
			attributes: {
				text: {
					type: 'string',
					default: 'This is default text.',
				},
				...blockAttributes
			},

			migrate( attributes, innerBlocks  ) {
				return [
					omit( attributes, 'text' ),
					[
						createBlock( 'core/paragraph', {
							content: attributes.text,
						} ),
						...innerBlocks,
					],
				];
			},

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