Pro Yearly is on sale from $80 to $50! »

Getting Started With Gutenberg Blocks

Getting Started With Gutenberg Blocks

So you’ve probably heard about Gutenberg, but how do you start building your own Gutenberg blocks? We’ll cover tooling and the basics to create simple blocks. I’ll also walk through a simple example to help attendees feel comfortable enough to get started.

6fa5f43285019310b730be9cd7ad23af?s=128

Eric Debelak

June 06, 2018
Tweet

Transcript

  1. Getting Started with Gutenberg Blocks

  2. @EricDebelak eric@11online.us 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
  3. @EricDebelak eric@11online.us 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?
  4. DEMO

  5. @EricDebelak eric@11online.us 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
  6. @EricDebelak eric@11online.us 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
  7. @EricDebelak eric@11online.us 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
  8. @EricDebelak eric@11online.us 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)
  9. @EricDebelak eric@11online.us 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)
  10. @EricDebelak eric@11online.us 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)
  11. @EricDebelak eric@11online.us 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
  12. @EricDebelak eric@11online.us Slides: https://11online.us/getting-started-building-gutenberg-blocks/ Resources: https://wordpress.org/gutenberg/handbook/ https://github.com/WordPress/gutenberg Basics (continued)

  13. @EricDebelak eric@11online.us 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
  14. @EricDebelak eric@11online.us 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
  15. @EricDebelak eric@11online.us 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
  16. @EricDebelak eric@11online.us 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;
  17. @EricDebelak eric@11online.us 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 = ( <h1 className="greeting"> Hello, world! </h1> );
  18. @EricDebelak eric@11online.us 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
  19. @EricDebelak eric@11online.us 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
  20. @EricDebelak eric@11online.us Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-paragraph Going over a simple

    example
  21. @EricDebelak eric@11online.us 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
  22. @EricDebelak eric@11online.us Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • src/block/block.js - imports and variable

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

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

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

    Going over a simple example
  26. @EricDebelak eric@11online.us Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • src/block/block.js - edit part 2

  27. @EricDebelak eric@11online.us Slides: https://11online.us/getting-started-building-gutenberg-blocks/ • src/block/block.js - save Going over

    a simple example
  28. @EricDebelak eric@11online.us 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
  29. @EricDebelak eric@11online.us 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
  30. QUESTIONS? @EricDebelak eric@11online.us