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

Setup & Introduction to Gutenberg: Tooling And Terminology

Setup & Introduction to Gutenberg: Tooling And Terminology

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

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

March 16, 2018
Tweet

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()

  32. None
  33. registerBlockType() attributes • Attributes are like variables • Attributes keep

    track of block content that can change
  34. Attribute Attribute Attribute

  35. None
  36. None
  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