Creating Advanced Gutenberg Blocks

6fa5f43285019310b730be9cd7ad23af?s=47 Eric Debelak
September 11, 2018

Creating Advanced Gutenberg Blocks

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

6fa5f43285019310b730be9cd7ad23af?s=128

Eric Debelak

September 11, 2018
Tweet

Transcript

  1. 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
  2. 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?
  3. 4.
  4. 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
  5. 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)
  6. 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)
  7. 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)
  8. 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
  9. 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
  10. 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
  11. 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)
  12. 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)
  13. 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
  14. 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)
  15. 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)
  16. 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