Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const { __ } = wp.i18n;
const {
registerBlockType,
RichText,
InspectorControls,
AlignmentToolbar,
BlockControls,
} = wp.blocks;
const {
TextControl
} = wp.components;
registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
title: __( 'Example: Controls (esnext)' ),
icon: 'universal-access-alt',
category: 'layout',
attributes: {
content: {
type: 'array',
selector: 'p',
},
text: {
type: 'string',
},
alignment: {
type: 'string',
},
},
edit: props => {
const {
attributes: {
content,
alignment,
text
},
focus,
className,
setFocus
} = props;
const onChangeContent = newContent => {
props.setAttributes( { content: newContent } );
};
const onChangeAlignment = newAlignment => {
props.setAttributes( { alignment: newAlignment } );
};
const onChangeText = newText => {
props.setAttributes( { text: newText } );
};
return (
<div>
{
!! focus && (
<InspectorControls>
<AlignmentToolbar
value={ alignment }
onChange={ onChangeAlignment }
/>
<TextControl
value={ text }
onChange={ onChangeText }
/>
</InspectorControls>
)
}
<RichText
className={ className }
style={ { textAlign: alignment } }
onChange={ onChangeContent }
value={ content }
focus={ focus }
onFocus={ setFocus }
/>
</div>
);
},
save: props => {
// ignore for now
}
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment