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
Tweet

More Decks by Tammie Lister

Other Decks in Technology

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