Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The What and Why of Gutenberg

The What and Why of Gutenberg

Presentation at WordCamp NYC.

Props to Gutenberg design lead Tammie Lister for a lot of the content.


Andrew Roberts

October 21, 2017

Other Decks in Technology


  1. Andrew Roberts : @andrew_roberts https://speakerdeck.com/androb/the-what-and-why-of-gutenberg What and Why 

  2. CHAPTER I History

  3. gutenberg-devdoc.surge.sh/reference/design-principles/

  4. None
  5. None
  6. “ ” The editor will endeavour to create a new

    page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. MATT MULLENWEG make.wordpress.org/core/2017/01/04/focus-tech-and-design-leads/
  7. Authoring richly laid out posts is a key strength of

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

    interfaces into one.
  9. "Mystery meat" refers to hidden features in software, features that

    you have to discover.
  10. The vision… • Everything is a block • All blocks

    are created equal • Drag and drop is additive • Placeholders are key • Direct manipulation • Customization
  11. CHAPTER II Myths

  12. Gutenberg will be able to be turned off.

  13. Metaboxes will be supported.

  14. None
  15. Custom post types will be supported.

  16. Short codes will continue to work.

  17. You do not need a specific theme to use Gutenberg

    or change your theme.
  18. Accessibility is not an afterthought.

  19. Gutenberg is not a page builder, customization comes in the

    next focus.
  20. Merge proposal hasn’t happened yet.

  21. CHAPTER III Blocks

  22. “ ” Ultimately, the vision for Gutenberg is to make

    it much easier to author rich content. Through ensuring good defaults, wrapping and bundling advanced layout options blocks, and making the most important actions immediately available, authoring content with WordPress should be accessible to anyone. GUTENBERG-DEVDOC.SURGE.SH/REFERENCE/DESIGN-PRINCIPLES
  23. Every block… • Inspected by clicking the block. • Has

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

    • Advanced ones in the sidebar inspector.
  25. None
  26. Enqueue Javascript CSS HTML

  27. Block API: gutenberg-devdoc.surge.sh/block-api

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

  29. Your first block: gutenberg-devdoc.surge.sh/ blocks/writing-your-first-block-type/

  30. None
  31. Register your block…

  32. None
  33. A tutorial: github.com/obenland/giphy-block/ commits/master

  34. CHAPTER IV A look inside

  35. None
  36. A look inside Editing

  37. None
  38. Settings A look inside

  39. None
  40. Inspector A look inside

  41. None
  42. Inserter A look inside

  43. None
  44. None
  45. CHAPTER V Placeholder

  46. None
  47. matiasventura.com/post/gutenberg-or-the-ship-of-theseus/

  48. CHAPTER VI Themes

  49. Gutenberg DOES NOT need a theme to work

  50. 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 • Customization is up to user NOT theme
  51. There are some add_theme_support things…

  52. None
  53. A theme experiment: github.com/WordPress/

  54. CHAPTER VII Technical

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

  56. Language of Gutenberg: gutenberg- devdoc.surge.sh/language/

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

  58. CHAPTER VIII The future…

  59. We need to get this into the hands of more

  60. Testing so far: make.wordpress.org/test/

  61. … ???

  62. CHAPTER IX TinyMCE & 

  63. “TinyMCE is one of the best tools for enabling rich

    text on the web. In Gutenberg, TinyMCE does exactly that. Nearly every text field you'll find is augmented with TinyMCE for rich text. Whether it be text, lists, or even just a single caption, TinyMCE can be invoked on blocks for rich text enhancements.” - Gutenberg FAQ
  64. The Classic Text block in Gutenberg will be TinyMCE as

    you remember it, and will support plugins such as TinyMCE Advanced A Classic Editor plugin will be available to restore the old post editor As TinyMCE evolves, it should continue to be available in WordPress Core for use in plugins Also…
  65. TinyMCE is a vibrant & active project 153,458 Downloads from

    NPM in last month 2,200 Commits in last 12 months 33 Contributors in last 12 months 115,535 Lines of JavaScript 4,765 Stars on Github 588,316 Unique page views on docs in last month
  66. Gutenberg is driving TinyMCE… Headless core (no UX) Inline boundaries

    Modern look-and-feel React integration and support Block APIs, universal inserter, and more … and influencing TinyMCE
  67. CHAPTER X Get involved

  68. Learn more: wordpress.org/gutenberg

  69. Documentation: gutenberg-devdoc.surge.sh

  70. Get the plugin: 

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

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

  73. Join the conversation: #core-editor, wed 17:00 UTC

  74. Give a talk, have a meetup discussion

  75. Come find me, let’s talk Gutenberg or TinyMCE

  76. Thanks, any questions? Andrew Roberts : @andrew_roberts https://speakerdeck.com/androb/the-what-and-why-of-gutenberg