Gutenberg Workshop Slides - WordCamp London 2018

In this "workshop" we go over some of the basic content from WordCamp London workshop on Gutenberg Development

Transcript

1. https://gutenberg.courses/wcldn @zgordon
   Gutenberg
   “Workshop”
   https://gutenberg.courses/wcldn/
   

   View Slide

2. https://gutenberg.courses/wcldn @zgordon
   Zac Gordon
   

   View Slide

3. https://gutenberg.courses/wcldn @zgordon
   “Workshop” Overview
   • Gutenberg JavaScript Libraries
   • Tooling and Enqueuing JS & CSS
   • Architecture of a Block
   • DEMOS
   • Q&A
   

   View Slide

4. https://gutenberg.courses/wcldn @zgordon
   Gutenberg
   JavaScript Libraries
   

   View Slide

5. https://gutenberg.courses/wcldn @zgordon
   Gutenberg JavaScript Libraries
   • wp.element - React abstraction
   • wp.blocks - Resources for building blocks
   • wp.components - Generic UI components
   • wp.i18n - Internationalization
   • wp.data - Redux data store
   

   View Slide

6. https://gutenberg.courses/wcldn @zgordon
   GB JS libraries
   are available as
   global variables
   

   View Slide

7. https://gutenberg.courses/wcldn @zgordon
   // Get funcs & components from global scope
   const { __ } = wp.i18n;
   const { Component } = wp.element;
   const { registerBlockType, RichText } = wp.blocks;
   const { Button } = wp.components;
   

   View Slide

8. https://gutenberg.courses/wcldn @zgordon
   Tooling &
   Enqueuing
   

   View Slide

9. https://gutenberg.courses/wcldn @zgordon
   Tooling and Enqueuing CSS & JS
   • Tools - babel, webpack, npm
   • enqueue_block_editor_assets - Editor Only
   • enqueue_block_assets - Frontend & Editor
   

   View Slide

10. https://gutenberg.courses/wcldn @zgordon
    Block
    Architecture
    

    View Slide

11. https://gutenberg.courses/wcldn @zgordon
    To build blocks with JS
    we use a function called
    registerBlockType()
    

    View Slide

12. https://gutenberg.courses/wcldn @zgordon
    Server-side
    block registration
    is possible too
    

    View Slide

13. https://gutenberg.courses/wcldn @zgordon
    registerBlockType()
    takes two parameters:
    name and settings
    

    View Slide

14. https://gutenberg.courses/wcldn @zgordon
    registerBlockType Settings
    1. title - Name of the block
    2. description - Short description of the block
    3. category - How block is organized with other blocks
    4. icon - Appears with the title when adding the block
    5. keywords - Additional ways to search for the block
    6. supports - Enables and disables certain block features
    7. attributes - Identifies dynamic data in your block
    8. edit - The UI and functionality for editing the block
    9. save - The UI (and functionality) for how block on frontend
    

    View Slide

15. https://gutenberg.courses/wcldn @zgordon
    // Example of some of the registerBlockType settings
    wp.blocks.registerBlockType(

    'example-plugin/example-custom-block',
    {
    title: wp.i18n.__( 'Example Custom Block', 'myplugin' ),
    category: 'common',
    icon: 'wordpress-alt',
    keywords: [ wp.i18n.__( 'Demo' ) ],
    edit: () => { wp.i18n.__( 'Edit this.', 'myplugin' ) },
    save: () => { wp.i18n.__( 'Save this.', 'myplugin' ) },
    }
    );
    

    View Slide

16. https://gutenberg.courses/wcldn @zgordon
    DEMOS
    

    View Slide

17. https://gutenberg.courses/wcldn @zgordon
    Q&A
    

    View Slide

18. https://gutenberg.courses/wcldn @zgordon
    30% OFF Coupon
    “WCLDN-2018”
    https://gutenberg.courses
    

    View Slide