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/
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