registerBlockType Explained
wp.blocks.registerBlockType( 'namespace/block-name', { // Localize title using wp.i18n.__() title: __( 'Block Demo', 'textdomain' ), // Category Options: common, formatting, layout, widgets, embed category: 'common', // Dashicons Options - https://goo.gl/aTM1DQ icon: 'wordpress-alt', // Limit to 3 Keywords / Phrases keywords: [ __( 'Example', 'textdomain' ), __( 'Project', 'textdomain' ), __( 'Code Samples', 'textdomain' ) ], // Enable or disable support for features supports: { html: false }, // Attributes set for each piece of dynamic data used in your block attributes: { content: { type: 'array', source: 'children', selector: 'div.my-content', }, }, // Determines what is displayed in the editor edit: props => { const onChangeContent = value => { props.setAttributes( { content: value } ); }; return ( <div className={ props.className }> <RichText tagname="div" multiline="p" className="my-content" placeholder={ __( 'Add your content...', 'textdomain' ) } value={ props.attributes.content } onChange={ onChangeContent } /> </div> ); }, // Determines what is displayed on the frontend save: props => { return ( <div className={ props.className }> <div class="my-content"> { props.attributes.content } </div> </div> ); }, }, );