Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Let's Build A Gutenberg Block | WordCamp Europe 2018

790 views

Published on

Workshop Slides

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Let's Build A Gutenberg Block | WordCamp Europe 2018

  1. 1. (function (blocks, element) {   blocks.registerBlockType('cgb/block-wceu-block', {     title: __('WCEU Block'), icon: 'shield',     edit: function (props) {       return element.createElement(         'p',         null,         'You will see me in the editor.'       );     },     save: function (props) {       return element.createElement(         'p',         null,         'I am saved to the database.'       );     }   }) })(   wp.blocks,   wp.element );
  2. 2. const { registerBlockType } = wp.blocks; registerBlockType( 'cgb/block-wceu-block', { title: __( ‘WCEU Block' ), icon: ‘carrot', edit: function( props ) { return ( <p>You will see me in the editor.</p> ) }, save: function( props ) { return ( <p>I am saved to the database.</p> ) } });
  3. 3. value: {     type: 'array',     source: 'query',     selector: 'blockquote > p',     query: {       children: {         source: 'node',       },     },     default: [],   },   citation: {     type: 'array',     source: 'children',     selector: 'cite',   },   align: {     type: 'string',   },   style: {     type: 'number',     default: 1,   },
  4. 4. <RichText        tagName="cite"        value={ citation }        onChange={          ( nextCitation ) => props.setAttributes( {            citation: nextCitation,          } )        }        placeholder={ __( 'Write citation…' ) }      />
  5. 5. <blockquote         className={ style === 2 ? 'is-large' : '' }         style={ { textAlign: align ? align : null } }       >         <RichText.Content value={ toRichTextValue( value ) } />         { citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }       </blockquote> <!-- wp:quote {"align":"center","style":2} --> <blockquote class="wp-block-quote is-large" style="text-align:center">   <p>You'll have to learn how to configure a build step someday, probably.</p> <cite>Lara Schenck</cite></blockquote> <!-- /wp:quote -->
  6. 6. const { registerBlockType } = wp.blocks; registerBlockType('cgb/block-wceu-block', {     title: __('Section Block' ), icon: 'carrot', attributes: {       value: {         type: 'array',         source: ‘children',         selector: 'p'       }, align: {         type: ‘string'       }     }, edit: function (props) { ... },      save: function (props) { ... } });

×