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


  1. 4.
  2. 5.
  3. 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
  4. 7.

    Authoring richly laid out posts is a key strength of

    WordPress… but it’s not easy to do.
  5. 10.

    The vision… • Everything is a block • All blocks

    are created equal • Drag and drop is additive • Placeholders are key • Direct manipulation • Customization
  6. 14.
  7. 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
  8. 23.

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

    advanced layout options available in the inspector.
  9. 24.

    Block attributes • Most important available right on the block.

    • Advanced ones in the sidebar inspector.
  10. 25.
  11. 30.
  12. 32.
  13. 35.
  14. 37.
  15. 39.
  16. 41.
  17. 43.
  18. 44.
  19. 46.
  20. 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
  21. 52.
  22. 61.
  23. 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
  24. 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…
  25. 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
  26. 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