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

Getting to know Gutenberg

Getting to know Gutenberg

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


Tammie Lister

October 12, 2017

More Decks by Tammie Lister

Other Decks in Technology


  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/

  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 • 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.
  24. None
  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/

  29. None
  30. Register your block…

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

  33. CHAPTER IV A look inside

  34. None
  35. A look inside Editing

  36. None
  37. Settings A look inside

  38. None
  39. Inspector A look inside

  40. None
  41. Inserter A look inside

  42. None
  43. None
  44. CHAPTER V Placeholder

  45. None
  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…

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

  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

  57. CHAPTER VIII The future…

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

  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: 

  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