Instantly share code, notes, and snippets.

@igorbenic igorbenic/block.js
Last active Jan 31, 2018

Embed
What would you like to do?
Gutenberg Select Post - Duplicate Controls
/**
* BLOCK: my-block
*
* Registering a basic block with Gutenberg.
* Simple block, renders and saves the same content without any interactivity.
*/
// Import CSS.
import './style.scss';
import './editor.scss';
const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType, Editable, AlignmentToolbar, BlockControls, InspectorControls, Toolbar } = wp.blocks; // Import registerBlockType() from wp.blocks
const { SelectControl } = InspectorControls;
const { withAPIData, Component } = wp.element;
class mySelectPosts extends Component {
static getInitialState() {
return {
posts: [],
selectedPost: 2,
};
}
constructor() {
super( ...arguments );
console.log( this.props );
this.state = this.constructor.getInitialState();
this.getOptions = this.getOptions.bind(this);
this.onChangeSelectPost = this.onChangeSelectPost.bind(this);
}
getOptions() {
return ( new wp.api.collections.Posts() ).fetch().then( ( posts ) => {
this.setState({ posts });
} );
}
componentDidMount() {
this.setState( { selectedPost: this.props.attributes.selectedPost } );
this.getOptions();
}
onChangeSelectPost( value ) {
this.props.setAttributes({selectedPost: parseInt( value ) })
this.setState( { selectedPost: parseInt( value ) } );
}
render() {
let output = 'Loading Posts...';
let selectedPost = {};
let options= [ { value: 0, label: 'Select a Post' } ];
if( this.state.posts.length > 0 ) {
output = 'We have ' + this.state.posts.length + ' posts';
this.state.posts.forEach((post) => {
options.push({value:post.id, label:post.title.rendered});
});
}
if( 0 === this.state.selectedPost ) {
output = 'Please Select a Post';
} else {
output = 'A post is selected';
}
// focus is not available here, we need to use this.props.focus
return [
!! this.props.focus && ( <InspectorControls key="inspector">
<SelectControl onChange={this.onChangeSelectPost} value={ this.props.attributes.selectedPost } label={ __( 'Select a Post' ) } options={ options } />
</InspectorControls>
),
output
];
}
}
/**
* Register: aa Gutenberg Block.
*
* Registers a new block provided a unique name and an object defining its
* behavior. Once registered, the block is made editor as an option to any
* editor interface where blocks are implemented.
*
* @param {string} name Block name.
* @param {Object} settings Block settings.
* @return {?WPBlock} The block, if it has been successfully
* registered; otherwise `undefined`.
*/
registerBlockType( 'cgb/block-my-block', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'my-block - CGB Block', 'CGB' ), // Block title.
icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
__( 'my-block — CGB Block' ),
__( 'CGB Example' ),
__( 'create-guten-block' ),
],
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'p',
},
alignment: {
type: 'string',
},
selectedPost: {
type: 'number',
default: 0,
selector: 'div'
}
},
// The "edit" property must be a valid function.
edit: mySelectPosts,
// The "save" property must be specified and must be a valid function.
save: function( props ) {
const { content, selectedPost } = props.attributes;
console.log( selectedPost );
return <div><p className={ props.className }>{ content }</p>{ selectedPost }</div>
},
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment