Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View Slide

  2. @EricDebelak
    [email protected]
    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

    View Slide

  3. @EricDebelak
    [email protected]
    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?

    View Slide

  4. DEMO

    View Slide

  5. @EricDebelak
    [email protected]
    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

    View Slide

  6. @EricDebelak
    [email protected]
    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)

    View Slide

  7. @EricDebelak
    [email protected]
    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)

    View Slide

  8. @EricDebelak
    [email protected]
    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)

    View Slide

  9. @EricDebelak
    [email protected]
    Slides: https://11online.us/advanced-gutenberg-blocks/
    Register the block
    Set default attributes
    Simple example

    View Slide

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

    View Slide

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

    View Slide

  12. @EricDebelak
    [email protected]
    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

    View Slide

  13. @EricDebelak
    [email protected]
    Slides: https://11online.us/advanced-gutenberg-blocks/
    • Create Guten Block (https://github.com/ahmadawais/create-guten-block)
    Getting Started

    View Slide

  14. @EricDebelak
    [email protected]
    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

    View Slide

  15. @EricDebelak
    [email protected]
    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

    View Slide

  16. @EricDebelak
    [email protected]
    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

    View Slide

  17. @EricDebelak
    [email protected]
    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

    View Slide

  18. @EricDebelak
    [email protected]
    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)

    View Slide

  19. @EricDebelak
    [email protected]
    Slides: https://11online.us/advanced-gutenberg-blocks/
    • https://github.com/11online/gutenberg-simple-statistics
    Simple Statistics - src/block/block.js

    View Slide

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

    View Slide

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

    View Slide

  22. @EricDebelak
    [email protected]
    Slides: https://11online.us/advanced-gutenberg-blocks/
    • https://github.com/11online/gutenberg-simple-statistics
    • Edit method
    Simple Statistics - src/block/block.js

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. @EricDebelak
    [email protected]
    Slides: https://11online.us/advanced-gutenberg-blocks/
    • Edit method (continued)
    Simple Statistics - src/block/block.js

    View Slide

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

    View Slide

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

    View Slide

  33. @EricDebelak
    [email protected]
    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)

    View Slide

  34. @EricDebelak
    [email protected]
    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

    View Slide

  35. @EricDebelak
    [email protected]
    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)

    View Slide

  36. @EricDebelak
    [email protected]
    Slides: https://11online.us/advanced-gutenberg-blocks/
    Simple Weather Block - src/init.php

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  50. @EricDebelak
    [email protected]
    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)

    View Slide

  51. @EricDebelak
    [email protected]
    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

    View Slide

  52. QUESTIONS?
    @EricDebelak
    [email protected]

    View Slide