Getting to know Gutenberg

Gutenberg: the new editing experience for WordPress presented at WC Dublin in October 2017.

Transcript

1. Tammie Lister : @karmatosed speakerdeck.com/tammielis/getting-to-know-gutenberg Getting to know 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 • Customisation
11. CHAPTER II Myths
12. Gutenberg will be able to be turned off.
13. Metaboxes will be supported.
14. Custom post types will be supported.
15. Short codes will continue to work.
16. You do not need a specific theme to use Gutenberg or change your theme.
17. Accessibility is not an afterthought.
18. Gutenberg is not a page builder, customisation comes in the next focus.
19. Merge proposal hasn’t happened yet.
20. CHAPTER III Blocks
21. “ ” 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
22. Every block… • Inspected by clicking the block. • Has advanced layout options available in the inspector.
23. Block attributes • Most important available right on the block. • Advanced ones in the sidebar inspector.
25. Enqueue Javascript CSS HTML
26. Block API: gutenberg-devdoc.surge.sh/block-api
27. Block?: make.wordpress.org/core/2017/05/05/ editor-how-little-blocks-work/
28. Your first block: gutenberg-devdoc.surge.sh/ blocks/writing-your-first-block-type/
30. Register your block…
32. A tutorial: github.com/obenland/giphy-block/ commits/master
33. CHAPTER IV A look inside
35. A look inside Editing
37. Settings A look inside
39. Inspector A look inside
41. Inserter A look inside
44. CHAPTER V Placeholder
46. matiasventura.com/post/gutenberg-or-the-ship-of-theseus/
47. CHAPTER VI Themes
48. Gutenberg DOES NOT need a theme to work
49. 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
50. There are some add_theme_support things…
52. A theme experiment: github.com/WordPress/
 gutenberg-theme
53. CHAPTER VII Technical
54. Technical overview: make.wordpress.org/ core/2017/01/17/editor-technical-overview/
55. Language of Gutenberg: gutenberg- devdoc.surge.sh/language/
56. Exploring: a way to write create a block in any framework.
57. CHAPTER VIII The future…
58. We need to get this into the hands of more users.
59. Testing so far: make.wordpress.org/test/
60. … ???
61. CHAPTER IX Get involved
62. Learn more: wordpress.org/gutenberg
63. Documentation: gutenberg-devdoc.surge.sh
64. Get the plugin: 
 wordpress.org/plugins/gutenberg/
65. Run some tests: make.wordpress.org/test/ handbook/call-for-testing/gutenberg-testing
66. Help with issues: github.com/WordPress/ gutenberg/issues
67. Join the conversation: #core-editor, wed 17:00 UTC
68. Give a talk, have a meetup discussion
69. Come find me, let’s talk Gutenberg
70. Thanks, any questions? Tammie Lister : @karmatosed speakerdeck.com/tammielis/getting-to-know-gutenberg