Last active
December 12, 2018 00:51
-
-
Save mikemcalister/2a20834358e851f8416f9f4870a9e933 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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}%`, | |
} } | |
/> | |
); | |
}, | |
} | |
] | |
} ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment