Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
* 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 }
/>
);
},
}
]
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment