Head-first into Gutenberg

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

Transcript

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

   View Slide

2. gutenberg
   CC-BY-NC 4.0
   

   View Slide

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

   View Slide

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
   

   View Slide

5. Willi Heidelbach, 28 September 2004
   commons.wikimedia.org/wiki/File:Metal_movable_type.jpg
   CC-BY-SA 3.0
   

   View Slide

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
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

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
    

    View Slide

19. New features being added
    make.wordpress.org/core/tag/gutenberg/
    

    View Slide

20. Not just for posts
    Posts
    Pages
    Widgets
    

    View Slide

21. Not just HTML content
    • HTML Content
    • Post Meta Data
    • REST API
    

    View Slide

22. a block
    

    View Slide

23. View Slide

24. View Slide

25. a block has functions
    

    View Slide

26. View Slide

27. a block has functions that take attributes as
    input
    

    View Slide

28. View Slide

29. View Slide

30. a block has functions that take attributes as
    input and return simple HTML
    

    View Slide

31. View Slide

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

    View Slide

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

    View Slide

34. View Slide

35. text
    

    View Slide

36. html
    

    View Slide

37. attribute (html)
    

    View Slide

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
    

    View Slide

39. post meta
    

    View Slide

40. register_meta
    

    View Slide

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
    

    View Slide

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
    

    View Slide

43. State? Not really.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

46. View Slide

47. Block’s metadata
    

    View Slide

48. Attribute registration
    

    View Slide

49. Get attributes and state
    from props
    

    View Slide

50. Event handlers to
    setAttributes
    

    View Slide

51. View Slide

52. Event handlers to
    setAttributes
    

    View Slide

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

    View Slide

54. Show Editable with the
    value set to our content
    and event handlers for
    onFocus and onChange
    

    View Slide

55. Editable?
    AligntmentToolbar?
    BlockControls?
    

    View Slide

56. Output a with the
    content and className
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

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
    

    View Slide

63. More code and documentation
    wordpress.org/gutenberg/handbook/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

66. Thank you!
    Questions?
    

    View Slide