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
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
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
25. a block has functions
27. a block has functions that take attributes as input
30. a block has functions that take attributes as input and return simple HTML
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
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
47. Block’s metadata
48. Attribute registration
49. Get attributes and state from props
50. Event handlers to setAttributes
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
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?