Getting Started with Gutenberg Blocks 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • I’m a Senior Developer/co-founder at 11 online • Started Block Party (https://wpblock.party) this year • I first tried WordPress in 2004, started using it more in 2006, started really developing for WordPress in 2013 • These days I work mostly in React.js on the front end and either python (Flask) or PHP (Lumen) on the backend. I also do some Android dev and, of course, WordPress. I started using React.js over 2 years ago. About me - Eric Debelak 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • New WordPress editor as of...? • A What You See Is What You Get (WYSIWYG) Experience • Content paradigm is BLOCKS! • Comes with simple blocks, but you can build custom blocks What is Gutenberg? 

DEMO 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • Do you have branding guidelines to follow? If so, Gutenberg by default gives you too much freedom Why Make Custom Blocks 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • What you can do with the default paragraph block: • Content creators should be focusing on creating content, not making styling choices Why Make Custom Blocks 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • Gutenberg is written in React.js, a modern front-end library from Facebook https://reactjs.org/ • Most examples will use the ES6 and JSX syntax, which makes writing React.js much easier • Gutenberg uses attributes to interact with blocks • Blocks are then saved in the post content as HTML, JSON data in HTML comments or a combination of the two Basics 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • When you register a block, you have an edit method and a save method • The save method is responsible for turning the attributes into HTML that will then be shown on posts and pages Basics (continued) 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • The attributes are saved as JSON in html comments unless they are attached to an html element Basics (continued) 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • On the editor side, Gutenberg reads the attributes for each block, and then sets the editor method with those attributes • The editor method then allows users to interact with the block and change the attributes • The editor method can include a preview of what the block will look like in the save method Basics (continued) 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • Gutenberg allows for templating as well - https://wordpress.org/ gutenberg/handbook/templates/ • Add in attributes and defaults • And you can lock the templates Basics (continued) - Templates 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ Resources: https://wordpress.org/gutenberg/handbook/ https://github.com/WordPress/gutenberg Basics (continued) 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • We can’t cover everything here, but hopefully we’ll cover enough for you to get started and follow the example • Modern JavaScript requires at the very least build processes. Browsers can’t read JSX or ES6 and the code needs to be compiled into what browsers can read. • To set up these build processes, we need Node.js and npm (Node Package Manager). https://nodejs.org/en/ Getting Started 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • Once we have these tools, we can set up Babel or Webpack for our build process or use a zero-configuration tool to help us • Create Guten Block (https://github.com/ahmadawais/create-guten-block) Getting Started (continued) create-guten-block my-block cd my-block npm start 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • Some Basic ES6 - arrow functions Getting Started (continued) function(param) { } (param) => { } • mutable and immutable variable assignments let a = 1; //mutable const b = 2; //immutable 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ Getting Started (continued) • destructuring const { keyOne, keyTwo } = objectVariable; var keyOne = objectVariable.keyOne; var keyTwo = objectVariable.keyTwo; 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • Some Basic JSX - XML like JS syntax - our edit and save methods must return either null or a JSX element (or vanilla JS equivalent) Getting Started (continued) const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); const element = (

Hello, world!

); 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • setAttributes - function to change a blocks attributes • isSelected - see if the user has selected your block • Editor components: • Plain Text, Rich Text, Media Upload, Color Palette, Dropdown, Inner Blocks, Select Control, Toggle Control, and more. • Complete list - https://github.com/WordPress/gutenberg/tree/master/ components and https://github.com/WordPress/gutenberg/tree/master/ blocks Gutenberg - What’s built in 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • Need some help with your edit methods? • Node Package Manager - npm - https://www.npmjs.com/ • npm has 650,000 packages. • Very useful for extending default functionality. Adding More 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-paragraph Going over a simple example 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • directory structure of where we’ll be working • also includes a dist directory for the compiled code Going over a simple example 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • src/block/block.js - imports and variable assignments Going over a simple example 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • src/block/block.js - registerBlockType part 1 Going over a simple example 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • src/block/block.js - registerBlockType part 2 Going over a simple example 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • src/block/block.js - edit part 1 Going over a simple example 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • src/block/block.js - edit part 2 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • src/block/block.js - save Going over a simple example 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ Our approach (in development) for client sites • https://github.com/11online/11online-blocks Advanced Block Demos • https://github.com/11online/gutenberg-simple-statistics • https://github.com/11online/gutenberg-simple-weather-block More advanced examples for the curious 

@EricDebelak [email protected] Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • Validation - Gutenberg revalidates both the html and the attributes, so you need default attributes or selectors for everything • Arrays don’t allow for declaration of sub attributes • setAttributes has no callback! • Using out of the box components do not always look like the front end of the site will (PlainText, RichText) • Inner Blocks are really useful, but you can only use one per block Gotchas 

QUESTIONS? @EricDebelak [email protected]