The future is Gutenberg and it is coming! Will you be ready? Gutenberg is a whole new editing experience for WordPress. If you are a WordPress developer you will not want to miss this talk where we will dive into the world of building your own Guten Blocks.
Below are my slides about building your own Gutenberg Blocks. Presented at NERD Summit 2018 and the Seacoast NH WordPress meetup in March 2018 and at WordCamp Boston 2018.
Feel free to also download the Gutenberg Call to Action plugin reviewed in the slides above. The main block.js file can also be reviewed below (double click to highlight and copy).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
/** /** * Call to Action Block for Gutenberg * * Registering a basic call to action block for use with the Gutenberg editor * * Styles: * editor.css — Editor styles for the block. * style.css — Editor & Front end styles for the block. */ ( function( blocks, editor, components, i18n, element ) { var el = element.createElement; // needed to create HTML elements blocks.registerBlockType( 'gb-demo/gb-cta', { // Unique block name with namespace prefix // Block title title: i18n.__( 'Call to Action' ), // Can be Dashicon or SVG icon: 'megaphone', // Block category — common, formatting, layout widgets, or embed category: 'common', //Up to 3 can be specified keywords: [ i18n.__( 'Banner' ), i18n.__( 'CTA' ), i18n.__( 'Shout Out' ) ], attributes: { title: { //Title for our Call to Action block type: 'string', }, content: { //Text for our Call to Action block type: 'array', source: 'children', selector: 'p', }, buttonText: { //Button text for the desired action type: 'string', }, buttonURL: { //Destination URL when button is clicked type: 'url', }, }, edit: function( props ) { //Can have variable and function definitions here return [ el( 'div', { className: props.className }, el( editor.RichText, { tagName: 'h3', className: 'cta-title', inline: false, placeholder: i18n.__( 'Enter an attention-getting title!' ), value: props.attributes.title, focus: props.focus, onFocus: props.setFocus, onChange: function( newTitle ) { props.setAttributes( { title: newTitle } ); }, } ), el( editor.RichText, { tagName: 'p', className: 'cta-content', inline: false, placeholder: i18n.__( 'Enter your pitch here' ), value: props.attributes.content, focus: props.focus, onFocus: props.setFocus, onChange: function( newContent ) { props.setAttributes( { content : newContent } ); }, } ), el( 'div', { className: 'cta-button-container' }, el( editor.RichText, { tagName: 'span', className: 'cta-button-interior', inline: true, placeholder: i18n.__( 'Button Text' ), value: props.attributes.buttonText, onChange: function( newButtonText ) { props.setAttributes( { buttonText : newButtonText } ); }, focus: props.focus, onFocus: props.setFocus, } ) ), ), el( editor.InspectorControls, { key: 'inspector' }, // Display the block options in the inspector panel. el( components.PanelBody, { title: i18n.__( 'Call to Action Link' ), className: 'block-gb-cta-link', initialOpen: true, }, el( components.TextControl, { type: 'url', label: i18n.__( 'Enter the destination URL for the button' ), value: props.attributes.buttonURL, onChange: function( newButtonURL ) { props.setAttributes( { buttonURL: newButtonURL } ); }, } ), ), ), ]; }, save: function( props ) { var attributes = props.attributes; return el( 'div', { className: props.className }, el( 'h3', { className: 'cta-title' }, attributes.title ), attributes.content && el( 'p', { className: 'cta-content' }, attributes.content ), attributes.buttonURL && attributes.buttonText && el( 'div', { className: 'cta-button-container' }, el( 'a', { className: 'cta-button', href: attributes.buttonURL, }, el( 'span', { }, attributes.buttonText ), ), ) ); } } ); } )( window.wp.blocks, window.wp.editor, window.wp.components, window.wp.i18n, window.wp.element, ); |
I hope this has inspired you to try creating your own Gutenberg blocks. What are you going to try doing with Gutenberg?
What do you think?