The What and Why of Gutenberg

Presentation at WordCamp NYC.

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

Transcript

1. Andrew Roberts : @andrew_roberts https://speakerdeck.com/androb/the-what-and-why-of-gutenberg What and Why 
 of Gutenberg
2. CHAPTER I History
3. gutenberg-devdoc.surge.sh/reference/design-principles/
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.
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.
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/
31. Register your block…
33. A tutorial: github.com/obenland/giphy-block/ commits/master
34. CHAPTER IV A look inside
36. A look inside Editing
38. Settings A look inside
40. Inspector A look inside
42. Inserter A look inside
45. CHAPTER V Placeholder
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…
53. A theme experiment: github.com/WordPress/
 gutenberg-theme
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 framework.
58. CHAPTER VIII The future…
59. We need to get this into the hands of more users.
60. Testing so far: make.wordpress.org/test/
61. … ???
62. CHAPTER IX TinyMCE & 
 Gutenberg
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: 
 wordpress.org/plugins/gutenberg/
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