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.

Transcript

1. Getting Started with Gutenberg Blocks
   

   View Slide

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
   

   View Slide

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?
   

   View Slide

4. DEMO
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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)
   

   View Slide

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)
   

   View Slide

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)
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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;
    

    View Slide

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 = (
    
    Hello, world!
    
    );
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

30. QUESTIONS?
    @EricDebelak
    eric@11online.us
    

    View Slide