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 full-size slide

  2. CHAPTER I
    History

    View full-size slide

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

    View full-size slide



  4. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. CHAPTER II
    Myths

    View full-size slide

  10. Gutenberg will be able to be turned off.

    View full-size slide

  11. Metaboxes will be supported.

    View full-size slide

  12. Custom post types will be supported.

    View full-size slide

  13. Short codes will continue to work.

    View full-size slide

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

    View full-size slide

  15. Accessibility is not an afterthought.

    View full-size slide

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

    View full-size slide

  17. Merge proposal hasn’t happened yet.

    View full-size slide

  18. CHAPTER III
    Blocks

    View full-size slide



  19. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Enqueue
    Javascript
    CSS
    HTML

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Register your block…

    View full-size slide

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

    View full-size slide

  28. CHAPTER IV
    A look inside

    View full-size slide

  29. A look inside
    Editing

    View full-size slide

  30. Settings
    A look inside

    View full-size slide

  31. Inspector
    A look inside

    View full-size slide

  32. Inserter
    A look inside

    View full-size slide

  33. CHAPTER V
    Placeholder

    View full-size slide

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

    View full-size slide

  35. CHAPTER VI
    Themes

    View full-size slide

  36. Gutenberg DOES NOT need a theme to work

    View full-size slide

  37. 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 full-size slide

  38. There are some add_theme_support things…

    View full-size slide

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

    gutenberg-theme

    View full-size slide

  40. CHAPTER VII
    Technical

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. CHAPTER VIII
    The future…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. CHAPTER IX
    Get involved

    View full-size slide

  48. Learn more: wordpress.org/gutenberg

    View full-size slide

  49. Documentation: gutenberg-devdoc.surge.sh

    View full-size slide

  50. Get the plugin: 

    wordpress.org/plugins/gutenberg/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. Give a talk, have a meetup discussion

    View full-size slide

  55. Come find me, let’s talk Gutenberg

    View full-size slide

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

    View full-size slide