Save 37% off PRO during our Black Friday Sale! »

Gutenberg Workshop Slides - WordCamp London 2018

Gutenberg Workshop Slides - WordCamp London 2018

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

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

April 15, 2018
Tweet

Transcript

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

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

  3. https://gutenberg.courses/wcldn @zgordon “Workshop” Overview • Gutenberg JavaScript Libraries • Tooling

    and Enqueuing JS & CSS • Architecture of a Block • DEMOS • Q&A
  4. https://gutenberg.courses/wcldn @zgordon Gutenberg JavaScript Libraries

  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
  6. https://gutenberg.courses/wcldn @zgordon GB JS libraries are available as global variables

  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;
  8. https://gutenberg.courses/wcldn @zgordon Tooling & Enqueuing

  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
  10. https://gutenberg.courses/wcldn @zgordon Block Architecture

  11. https://gutenberg.courses/wcldn @zgordon To build blocks with JS we use a

    function called registerBlockType()
  12. https://gutenberg.courses/wcldn @zgordon Server-side block registration is possible too

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

  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
  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: () => <p>{ wp.i18n.__( 'Edit this.', 'myplugin' ) }</p>, save: () => <p>{ wp.i18n.__( 'Save this.', 'myplugin' ) }</p>, } );
  16. https://gutenberg.courses/wcldn @zgordon DEMOS

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

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