Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
* BLOCK: Atomic Blocks Test Block
*/
// Import block dependencies and components
import classnames from 'classnames';
import Inspector from './components/inspector';
import icons from './components/icons';
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">
<RichText
tagName="p"
value={ text }
className="ab-text"
onChange={ ( value ) => this.props.setAttributes( { text: value } ) }
/>
</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">
<RichText.Content
value={ text }
/>
</div>
);
},
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment