Head-first into Gutenberg

Head-first into Gutenberg

Presented at WordPress Goa meet-up: https://www.meetup.com/WordPressGoa/events/245275573/

17f37be7dfd491b7b442a79f69e08f16?s=128

Prateek Saxena

December 01, 2017
Tweet

Transcript

  1. https://gitter.im/WordPressGoa/Lobby https://www.meetup.com/wordpressgoa

  2. gutenberg CC-BY-NC 4.0

  3. Prateek Saxena UX Engineer at Wikimedia Foundation Wordpress Developer Enthusiast

    prtksxna.com
  4. Meggs, Philip B. A History of Graphic Design. John Wiley

    & Sons, Inc. 1998. (p 64) commons.wikimedia.org/wiki/File:Printer_in_1568-ce.png Public Domain
  5. Willi Heidelbach, 28 September 2004 commons.wikimedia.org/wiki/File:Metal_movable_type.jpg CC-BY-SA 3.0

  6. Printing form set in chase. Form is the New Testament

    in Scots. Chase is Miller & Richard. commons.wikimedia.org/wiki/File:New_Testament_in_chase.jpg CC-BY 2.0
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. Printing form set in chase. Form is the New Testament

    in Scots. Chase is Miller & Richard. commons.wikimedia.org/wiki/File:New_Testament_in_chase.jpg
  19. New features being added make.wordpress.org/core/tag/gutenberg/

  20. Not just for posts Posts Pages Widgets

  21. Not just HTML content • HTML Content • Post Meta

    Data • REST API
  22. a block

  23. None
  24. None
  25. a block has functions

  26. None
  27. a block has functions that take attributes as input

  28. None
  29. None
  30. a block has functions that take attributes as input and

    return simple HTML
  31. None
  32. a block has functions that take attributes as input and

    return simple HTML a React element.
  33. a block has functions that take attributes as input and

    return simple HTML a React element. attributes could be: post content
  34. None
  35. text

  36. html

  37. attribute (html)

  38. a block has functions that take attributes as input and

    return simple HTML a React element. attributes could be: post content, post meta, API
  39. post meta

  40. register_meta

  41. a block has functions that take attributes as input and

    return simple HTML a React element. attributes could be: post content, post meta, API
  42. a block has functions that take attributes as input and

    return simple HTML a React element, based on the state. attributes could be: post content, post meta, API
  43. State? Not really.

  44. a block has functions that take attributes as input and

    return simple HTML a React element, based on the state (not really). attributes could be: post content, post meta, API
  45. a block has functions that take attributes as input and

    return simple HTML a React element, based on the state (not really). attributes could be: post content, post meta, API states could be: edit, focus, save
  46. None
  47. Block’s metadata

  48. Attribute registration

  49. Get attributes and state from props

  50. Event handlers to setAttributes

  51. None
  52. Event handlers to setAttributes

  53. Show BlockControls and the AlignmentToolbar if the focus is truthy

  54. Show Editable with the value set to our content and

    event handlers for onFocus and onChange
  55. Editable? AligntmentToolbar? BlockControls?

  56. Output a <p> with the content and className

  57. None
  58. None
  59. None
  60. None
  61. None
  62. a block has functions that take attributes as input and

    return simple HTML a React element, based on the state (not really). attributes could be: post content, post meta, API states could be: edit, focus, save
  63. More code and documentation wordpress.org/gutenberg/handbook/

  64. Printing form set in chase. Form is the New Testament

    in Scots. Chase is Miller & Richard. commons.wikimedia.org/wiki/File:New_Testament_in_chase.jpg
  65. By embracing “the block”, we can potentially unify multiple different

    interfaces into one. Instead of learning how to write shortcodes, custom HTML, or paste URLs to embed, you should do with just learning the block, and all the pieces should fall in place. —Gutenberg Handbook
  66. Thank you! Questions?