Setup & Introduction to Gutenberg: Tooling And Terminology

This is my portion from an all day Gutenberg Workshop at WordCamp Miami 2018.

Transcript

1. Introduction to Gutenberg Development Zac Gordon / @zgordon javascriptforwp.com
2. 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
3. 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
4. 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
5. 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
6. 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
7. 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
8. JavaScript Libraries Included with Gutenberg CHAPTER I
9. JS Libraries in Gutenberg • wp.element - React & ReactDOM • wp.blocks • wp.components • wp.i18n • wp.data • packages*
10. JS Libraries in Gutenberg • wp.element - React & ReactDOM • wp.blocks - Components for building blocks • wp.components • wp.i18n • wp.data • packages*
11. JS Libraries in Gutenberg • wp.element - React & ReactDOM • wp.blocks - Components for building blocks • wp.components - Generic components • wp.i18n • wp.data • packages*
12. 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*
13. 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 - Redux state management • packages*
14. 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 - Redux state management • packages* - Modules and tools available via NPM
15. 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 - Redux state management • packages* - Modules and tools available via NPM
16. Let’s take a look https://github.com/WordPress/gutenberg
17. How to Access Gutenberg JavaScript Libraries CHAPTER II
18. — window.wp “ The Gutenberg JavaScript libraries are stored in a “window.wp” JavaScript object in global scope.
19. 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
20. Let’s try it
21. 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
22. — Hi Roy “ You may often want to rename libraries in global window object to have shorter names
23. Referencing JS libraries ES5 ES6 RESULT
24. registerBlockType() CHAPTER III
25. — The Gute “ registerBlockType() is the JavaScript function used to create custom blocks.
26. registerBlockType() basic settings • Name • Icon • Category
27. Icon Name Category
28. Pause for full effect.
29. Edit Code Save Code
30. registerBlockType() edit/save settings • Code to manage editing the block • Code to determine what gets saved to content
31. Block content is saved in the_content()
33. registerBlockType() attributes • Attributes are like variables • Attributes keep track of block content that can change
34. Attribute Attribute Attribute
37. registerBlockType() settings • Name • Description • Icon • Category • Keywords • Supports • Attributes • Transforms • Edit • Save • Custom
38. Types of Blocks CHAPTER IV
39. Types of Blocks • Static • Editable • Dynamic
40. Types of Blocks • Static - Cannot edit content • Editable • Dynamic
41. Types of Blocks • Static - Cannot edit content • Editable - Can edit content • Dynamic
42. Types of Blocks • Static - Cannot edit content • Editable - Can edit content • Dynamic - Save settings, not content (content is dynamic)
43. Extra Block Features CHAPTER V
44. Extra blocks features 1. Unselected vs selected state 2. Formatting toolbar 3. Inspector toolbar
45. Unselected vs selected state
46. Block formatting toolbar
47. Block inspector toolbar
48. 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
49. Introduction to Gutenberg Development Zac Gordon / @zgordon javascriptforwp.com