Setup & Introduction to Gutenberg: Tooling And Terminology

Slide 1

Slide 1 text

Introduction to Gutenberg Development Zac Gordon / @zgordon javascriptforwp.com

Slide 2

Slide 2 text

Introduction Overview 1. JavaScript libraries included with Gutenberg 2. How to access Gutenberg JavaScript libraries 3. registerBlockType() for building blocks 4. Types of blocks 5. Extra block features

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

JavaScript Libraries Included with Gutenberg CHAPTER I

Slide 9

Slide 9 text

JS Libraries in Gutenberg ● wp.element - React & ReactDOM ● wp.blocks ● wp.components ● wp.i18n ● wp.data ● packages*

Slide 10

Slide 10 text

JS Libraries in Gutenberg ● wp.element - React & ReactDOM ● wp.blocks - Components for building blocks ● wp.components ● wp.i18n ● wp.data ● packages*

Slide 11

Slide 11 text

JS Libraries in Gutenberg ● wp.element - React & ReactDOM ● wp.blocks - Components for building blocks ● wp.components - Generic components ● wp.i18n ● wp.data ● packages*

Slide 12

Slide 12 text

JS Libraries in Gutenberg ● wp.element - React & ReactDOM ● wp.blocks - Components for building blocks ● wp.components - More generic components ● wp.i18n - Internationalization and localization ● wp.data ● packages*

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Let’s take a look https://github.com/WordPress/gutenberg

Slide 17

Slide 17 text

How to Access Gutenberg JavaScript Libraries CHAPTER II

Slide 18

Slide 18 text

— window.wp “ The Gutenberg JavaScript libraries are stored in a “window.wp” JavaScript object in global scope.

Slide 19

Slide 19 text

Accessing Gutenberg JS Libraries 1. Open the Gutenberg Editor 2. Open the Console in web inspector 3. Type wp.element, hit return 4. Try wp.blocks, wp.components, wp.i18n, and wp.data 5. Try with just wp

Slide 20

Slide 20 text

Let’s try it

Slide 21

Slide 21 text

Accessing GB JS Libraries the right way ● Create a plugin ● Enqueue a JavaScript file using enqueue_block_editor_assets ● Reference wp.element in your code ● Reference wp.element.createElement in your code ● Try for other libraries

Slide 22

Slide 22 text

— Hi Roy “ You may often want to rename libraries in global window object to have shorter names

Slide 23

Slide 23 text

Referencing JS libraries ES5 ES6 RESULT

Slide 24

Slide 24 text

registerBlockType() CHAPTER III

Slide 25

Slide 25 text

— The Gute “ registerBlockType() is the JavaScript function used to create custom blocks.

Slide 26

Slide 26 text

registerBlockType() basic settings ● Name ● Icon ● Category

Slide 27

Slide 27 text

Icon Name Category

Slide 28

Slide 28 text

Pause for full effect.

Slide 29

Slide 29 text

Edit Code Save Code

Slide 30

Slide 30 text

registerBlockType() edit/save settings ● Code to manage editing the block ● Code to determine what gets saved to content

Slide 31

Slide 31 text

Block content is saved in the_content()

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

registerBlockType() attributes ● Attributes are like variables ● Attributes keep track of block content that can change

Slide 34

Slide 34 text

Attribute Attribute Attribute

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

registerBlockType() settings ● Name ● Description ● Icon ● Category ● Keywords ● Supports ● Attributes ● Transforms ● Edit ● Save ● Custom

Slide 38

Slide 38 text

Types of Blocks CHAPTER IV

Slide 39

Slide 39 text

Types of Blocks ● Static ● Editable ● Dynamic

Slide 40

Slide 40 text

Types of Blocks ● Static - Cannot edit content ● Editable ● Dynamic

Slide 41

Slide 41 text

Types of Blocks ● Static - Cannot edit content ● Editable - Can edit content ● Dynamic

Slide 42

Slide 42 text

Types of Blocks ● Static - Cannot edit content ● Editable - Can edit content ● Dynamic - Save settings, not content (content is dynamic)

Slide 43

Slide 43 text

Extra Block Features CHAPTER V

Slide 44

Slide 44 text

Extra blocks features 1. Unselected vs selected state 2. Formatting toolbar 3. Inspector toolbar

Slide 45

Slide 45 text

Unselected vs selected state

Slide 46

Slide 46 text

Block formatting toolbar

Slide 47

Slide 47 text

Block inspector toolbar

Slide 48

Slide 48 text

Introduction Review 1. JavaScript libraries included with Gutenberg 2. How to access Gutenberg JavaScript libraries 3. registerBlockType() for building blocks 4. Types of blocks 5. Extra block features

Slide 49

Slide 49 text

Introduction to Gutenberg Development Zac Gordon / @zgordon javascriptforwp.com