Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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;

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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' ) }

, } );

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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