Getting to know Gutenberg

D36d2c1821af9249b69ff7f5ed60529b?s=47 Tammie Lister
November 22, 2017

Getting to know Gutenberg

D36d2c1821af9249b69ff7f5ed60529b?s=128

Tammie Lister

November 22, 2017
Tweet

Transcript

  1. Tammie Lister : @karmatosed speakerdeck.com/tammielis/getting-to-know-gutenberg Getting to know Gutenberg

  2. CHAPTER I Once upon a time…

  3. None
  4. None
  5. Authoring richly laid out posts is a key strength of

    WordPress… but it’s not easy to do.
  6. By embracing "the block", we can potentially unify multiple different

    interfaces into one.
  7. The vision… • Everything is a block • All blocks

    are created equal • Drag and drop is additive • Placeholders are key • Direct manipulation • Customisation
  8. gutenberg-devdoc.surge.sh/reference/design-principles/

  9. None
  10. None
  11. CHAPTER III Blocks

  12. Every block… • Inspected by clicking the block. • Has

    advanced layout options available in the inspector.
  13. Block attributes • Most important available right on the block.

    • Advanced ones in the sidebar inspector.
  14. Enqueue Javascript CSS HTML

  15. Block?: make.wordpress.org/core/2017/05/05/ editor-how-little-blocks-work/

  16. None
  17. A tutorial: github.com/obenland/giphy-block/ commits/master

  18. Create blocks: Tweet, blog posts and let us know

  19. CHAPTER IV A look inside

  20. None
  21. A look inside Editing

  22. None
  23. Settings A look inside

  24. None
  25. Inspector A look inside

  26. None
  27. Inserter A look inside

  28. None
  29. CHAPTER VI Themes

  30. Gutenberg DOES NOT need a theme to work

  31. What would an ideal theme be for Gutenberg? • Single

    unlimited width column. • Styles are IF want a true experience - ‘near’ frontend editing. • Simpler THE better. • Best is just CSS themes. • Page templating… think placeholders • Customisation is up to user NOT theme
  32. There are some add_theme_support things…

  33. None
  34. None
  35. matiasventura.com/post/gutenberg-or-the-ship-of-theseus/

  36. A theme experiment: github.com/WordPress/
 gutenberg-theme

  37. CHAPTER II Myths

  38. Gutenberg will be able to be turned off.

  39. Metaboxes will be supported.

  40. Custom post types will be supported.

  41. Short codes will continue to work.

  42. Accessibility is not an afterthought.

  43. Gutenberg is not a page builder, customisation comes in the

    next focus.
  44. CHAPTER VII Technical

  45. Technical overview: make.wordpress.org/ core/2017/01/17/editor-technical-overview/

  46. Exploring: a way to write create a block in any

    framework.
  47. Nested blocks, global blocks … oh my!

  48. CHAPTER III Testing Tale

  49. Why test? • Important to get a baseline • A

    lot was influx, needed boundaries • Ease of contributions • Iterate on over time • A way for community to learn to write tests • A way for those that didn’t know to learn to run tests
  50. None
  51. https://github.com/WordPress/gutenberg/issues/650

  52. https://github.com/WordPress/gutenberg/issues/650

  53. ``` https://github.com/WordPress/gutenberg/issues/652

  54. 1 Feedback/freeform 1 Task based

  55. ``` https://make.wordpress.org/test/2017/06/27/call-for-testing-gutenberg/

  56. None
  57. Full list of issues for feedback: • https://github.com/WordPress/gutenberg/issues/1544 • https://github.com/WordPress/gutenberg/issues/1546

    • https://github.com/WordPress/gutenberg/issues/1547 • https://github.com/WordPress/gutenberg/issues/1548 • https://github.com/WordPress/gutenberg/issues/1549
  58. General comments • https://github.com/WordPress/gutenberg/issues/1550

  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. 103 Task responses 41 Feedback

  67. CHAPTER IV The impact of the tale

  68. None
  69. None
  70. None
  71. None
  72. CHAPTER V Spreading the tale

  73. Issues Support Blogs Pull 
 Requests Meetings Twitter Reviews Slack

  74. None
  75. 58 Responses to feedback form

  76. 53 Feedback 3 Support

  77. CHAPTER VI The second saga of tests

  78. None
  79. None
  80. The new tests • 3 images: beginner, intermediate and advanced

    level • Tests can be run without tester or with • Form for reporting and can write post • Encourage screen recording upload, provide instructions • Branched test depending on if need to set up Gutenberg
  81. None
  82. None
  83. None
  84. CHAPTER VIII The future…

  85. Agencies Dev New users Universities Journalists ? Contributors Community Plugin

    Developers Themers Bloggers ? ? ? ? Builders
  86. … ???

  87. CHAPTER IX Get involved

  88. Learn more: wordpress.org/gutenberg

  89. Documentation: 
 wordpress.org/gutenberg/handbook/

  90. Get the plugin: 
 wordpress.org/plugins/gutenberg/

  91. Run some tests: 
 make.wordpress.org/test/handbook/call-for- testing/gutenberg-testing

  92. Help with issues: 
 github.com/WordPress/gutenberg/issues

  93. Join the conversation: 
 chat.wordpress.org | #core-editor, wed 17:00 UTC

  94. Have a testing session at your meet up

  95. Let’s talk Gutenberg

  96. Let’s talk how you use WordPress agency, education, startup, business,

    owner…
  97. Thanks, any questions? Tammie Lister : @karmatosed speakerdeck.com/tammielis/getting-to-know-gutenberg-webldn