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
   

   View Slide

2. CHAPTER I
   History
   

   View Slide

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

   View Slide

4. View Slide

5. View Slide

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/
   

   View Slide

7. Authoring richly laid out posts is a key
   strength of WordPress… but it’s not
   easy to do.
   

   View Slide

8. By embracing "the block", we can
   potentially unify multiple different
   interfaces into one.
   

   View Slide

9. "Mystery meat" refers to hidden
   features in software, features that you
   have to discover.
   

   View Slide

10. The vision…
    • Everything is a block
    • All blocks are created equal
    • Drag and drop is additive
    • Placeholders are key
    • Direct manipulation
    • Customisation
    

    View Slide

11. CHAPTER II
    Myths
    

    View Slide

12. Gutenberg will be able to be turned off.
    

    View Slide

13. Metaboxes will be supported.
    

    View Slide

14. Custom post types will be supported.
    

    View Slide

15. Short codes will continue to work.
    

    View Slide

16. You do not need a specific theme to use
    Gutenberg or change your theme.
    

    View Slide

17. Accessibility is not an afterthought.
    

    View Slide

18. Gutenberg is not a page builder,
    customisation comes in the next focus.
    

    View Slide

19. Merge proposal hasn’t happened yet.
    

    View Slide

20. CHAPTER III
    Blocks
    

    View Slide

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
    

    View Slide

22. Every block…
    • Inspected by clicking the block.
    • Has advanced layout options available in the inspector.
    

    View Slide

23. Block attributes
    • Most important available right on the block.
    • Advanced ones in the sidebar inspector.
    

    View Slide

24. View Slide

25. Enqueue
    Javascript
    CSS
    HTML
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. View Slide

30. Register your block…
    

    View Slide

31. View Slide

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

    View Slide

33. CHAPTER IV
    A look inside
    

    View Slide

34. View Slide

35. A look inside
    Editing
    

    View Slide

36. View Slide

37. Settings
    A look inside
    

    View Slide

38. View Slide

39. Inspector
    A look inside
    

    View Slide

40. View Slide

41. Inserter
    A look inside
    

    View Slide

42. View Slide

43. View Slide

44. CHAPTER V
    Placeholder
    

    View Slide

45. View Slide

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

    View Slide

47. CHAPTER VI
    Themes
    

    View Slide

48. Gutenberg DOES NOT need a theme to work
    

    View Slide

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
    

    View Slide

50. There are some add_theme_support things…
    

    View Slide

51. View Slide

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

    gutenberg-theme
    

    View Slide

53. CHAPTER VII
    Technical
    

    View Slide

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

    View Slide

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

    View Slide

56. Exploring: a way to write create a block in
    any framework.
    

    View Slide

57. CHAPTER VIII
    The future…
    

    View Slide

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

    View Slide

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

    View Slide

60. … ???
    

    View Slide

61. CHAPTER IX
    Get involved
    

    View Slide

62. Learn more: wordpress.org/gutenberg
    

    View Slide

63. Documentation: gutenberg-devdoc.surge.sh
    

    View Slide

64. Get the plugin: 

    wordpress.org/plugins/gutenberg/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

68. Give a talk, have a meetup discussion
    

    View Slide

69. Come find me, let’s talk Gutenberg
    

    View Slide

70. Thanks, any questions?
    Tammie Lister : @karmatosed speakerdeck.com/tammielis/getting-to-know-gutenberg
    

    View Slide