$30 off During Our Annual Pro Sale. View Details »

Creating Advanced Gutenberg Blocks

Eric Debelak
September 11, 2018

Creating Advanced Gutenberg Blocks

Learn how to create advanced blocks for WordPress' new Gutenberg Editor

Eric Debelak

September 11, 2018
Tweet

More Decks by Eric Debelak

Other Decks in Programming

Transcript

  1. Creating Advanced Gutenberg Blocks

  2. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-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/advanced-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 • Written in React.js - https://reactjs.org/ What is Gutenberg?
  4. DEMO

  5. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Gutenberg puts everything in the

    content - goodbye post meta! (with exceptions) • Gutenberg uses attributes as settings on each block Resources: https://wordpress.org/gutenberg/handbook/ https://github.com/WordPress/gutenberg Basics
  6. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • When you register a block,

    you have an editor method and a save method • The save method takes the block attributes and saves as html in the post/ page content area Basics (continued)
  7. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • The attributes are saved as

    JSON in html comments unless they are attached to an html element Basics (continued)
  8. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-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 front end of the site just shows the html saved in the content Basics (continued)
  9. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Register the block Set default attributes

    Simple example
  10. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Edit method Simple example (continued)

  11. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Save method Simple example (continued)

  12. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-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 Templates
  13. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Create Guten Block (https://github.com/ahmadawais/create-guten-block) Getting

    Started
  14. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-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 What’s built in
  15. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-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
  16. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics • https://github.com/11online/gutenberg-simple-weather-block Going over

    simple examples
  17. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics • Goals: • Allow

    users to input as many statistics as they wish • Have a simple count up animation Simple Statistics
  18. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Strategies: • Use an array

    of statistics to allow flexibility in the number of statistics • Since we don’t get JavaScript interactivity in our save method, we need another way to show the count up animation • We will use data attributes to save our Gutenberg attributes on each statistic • We’ll use a jQuery script to parse the attributes and start the animation Simple Statistics (continued)
  19. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics Simple Statistics - src/block/block.js

  20. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics Simple Statistics - src/block/block.js

  21. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics Simple Statistics - src/block/block.js

  22. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics • Edit method Simple

    Statistics - src/block/block.js
  23. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Edit method (continued) Simple Statistics

    - src/block/block.js
  24. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Edit method (continued) Simple Statistics

    - src/block/block.js
  25. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Edit method (continued) Simple Statistics

    - src/block/block.js
  26. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Edit method (continued) Simple Statistics

    - src/block/block.js
  27. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Edit method (continued) Simple Statistics

    - src/block/block.js
  28. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Statistics - src/block/block.js

  29. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Statistics - src/block/block.js

  30. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Edit method (continued) Simple Statistics

    - src/block/block.js
  31. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Statistics - src/block/block.js

  32. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Statistics - src/block/block.js

  33. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Goals: • Allow users to

    input as many statistics as they wish • Have a simple count up animation • Strategies: • Use an array of statistics to allow flexibility in the number of statistics • Since we don’t get JavaScript interactivity in our save method, we need another way to show the count up animation • We will use data attributes to save our Gutenberg attributes on each statistic • We’ll use a jQuery script to parse the attributes and start the animation Simple Statistics (continued)
  34. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-weather-block • Goals • Allow

    the users to globally save the Open Weather api key • Allow users to set their temperature units per weather block • Allow users to set the city per weather block Simple Weather Block
  35. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Strategies • Use server side

    rendering so we don’t expose our api key • Save the api key on the wp_options table so all blocks have access to it • Use the inspector controls for the temperature unit • Use a React Component for the edit method so we have access to local state and the React Component lifecycle Simple Weather Block (continued)
  36. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/init.php

  37. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/init.php

  38. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/init.php

  39. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/block/block.js

  40. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/block/block.js

  41. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/block/block.js

  42. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/block/block.js

  43. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/block/block.js

  44. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/block/block.js

  45. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/block/block.js

  46. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/block/block.js

  47. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/block/block.js

  48. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/block/block.js

  49. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/block/block.js

  50. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Goals • Allow the users

    to globally save the Open Weather api key • Allow users to set their temperature units per weather block • Allow users to set the city per weather block • Strategies • Use server side rendering so we don’t expose our api key • Save the api key on the wp_options table so all blocks have access to it • Use the inspector controls for the temperature unit • Use a React Component for the edit method so we have access to local state and the React Component lifecycle Simple Weather Block (continued)
  51. @EricDebelak eric@11online.us Slides: https://11online.us/advanced-gutenberg-blocks/ • Validation - Gutenberg revalidates both

    the html and the attributes, so you need default attributes 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
  52. QUESTIONS? @EricDebelak eric@11online.us