Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

9,503 views

Published on

If you use WordPress, you need to know about Gutenberg, the project underway to change how content is created and managed in everyone's favorite web publishing application. This slide deck is from Morten Rand-Hendriksen's WordCamp US 2017 presentation "Gutenberg and the WordPress of Tomorrow" where he outlines what Gutenberg is now and what WordPress will be in the future.

Published in: Internet
  • Be the first to comment

Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

  1. 1. presented at
  2. 2. @MOR10
  3. 3. WYSIWYG
  4. 4. OLD SCHOOL WYSIWYG
  5. 5. ANCIENT SCHOOL WYSIWYG
  6. 6. MODERN WYSIWYG
  7. 7. AI WYSIWYG
  8. 8. FRONT-END WYSIWYG
  9. 9. WYSIWYG iI iI
  10. 10. WYSIWYGWTCAITHASAFAEEPTTAPACPES WYSIWYG
  11. 11. WYSIWYG WAS BUILT FOR THIS
  12. 12. THE NATURAL ENVIRONMENT OF THE WEB IS CHANGING FROM BOUNDED TO BOUNDLESS
  13. 13. dateline:
  14. 14. https://wordpress.tv/2013/07/29/matt-mullenweg-state-of-the-word-2013/ MATT MULLENWEG PRESENTS WHAT WILL EVENTUALLY BECOME GUTENBERG.
  15. 15. GUTENBERG IS ABOUT IDENTIFYING AND ADDING MEANING TO CONTENT THIS IS DONE THROUGH BLOCKS AND BLOCK CONTEXTS
  16. 16. Paragraph Image Columns
  17. 17. BEHIND THE CURTAIN BEHIND THE CURTAIN WIE GEHTS?
  18. 18. <!-- wp:image {"id":81,"align":"right"} --> <figure class="wp-block-image alignright"><img src="http:// gutenberg.dev:8888/wp-content/uploads/2017/10/ Gutenbergimpremta.jpeg" alt="Always remember to add alt text!" /> <figcaption>Wikimedia Commons</figcaption> </figure> <!-- /wp:image --> <!-- wp:paragraph {"dropCap":true} --> <p class="has-drop-cap">On the surface, Gutenberg is just a replacement for the traditional content editor. </p> <!-- /wp:paragraph --> <!-- wp:paragraph {"textColor":"#eee","backgroundColor":"#0693e3","fontSize":27} --> <p style="background-color:#0693e3;color:#eee;font-size:27px" class="has-background">In the bigger picture, Gutenberg does something new and unique: It introduces the concept of <strong>Blocks</strong>.</p> <!-- /wp:paragraph -->
  19. 19. GUTEN OPPORTUNITIES
  20. 20. https://yoast.com/gutenberg-integration/
  21. 21. Contextual enhancements
  22. 22. Contextual enhancements
  23. 23. “Something we’ve been exploring is adding our SEO and readability feedback as comments to text.”
  24. 24. https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/
  25. 25. Imagine defining a whole page template as a set of default blocks, ready to be filled once the user creates a page. Matias Ventura
  26. 26. Gutenberg aims to give developers a way to define and protect structural markup and their design while giving users the ability to directly edit the information intuitively. Matias Ventura
  27. 27. Style for individual blocks
  28. 28. Grant block control to developers
  29. 29. Themes and plugins can introduce new blocks
  30. 30. https://woocommerce.com/2017/11/woocommerce-gutenberg/
  31. 31. Random idea: COMIC BOOK BLOCKS
  32. 32. concrete idea: layout selector
  33. 33. https://hmn.md/what-we-do/projects/the-sun/
  34. 34. in the works: repeatable blocks
  35. 35. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.. Franz Kafka Novelist and short story writer whose work fuses elements of realism and the fantastic typically features isolated protagonists faced by bizarre or surrealistic predicaments and incomprehensible social-bureaucratic powers.
  36. 36. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.. Franz Kafka Novelist and short story writer whose work fuses elements of realism and the fantastic typically features isolated protagonists faced by bizarre or surrealistic predicaments and incomprehensible social-bureaucratic powers. Franz Kafka Novelist and short story writer whose work fuses elements of realism and the fantastic typically features isolated protagonists faced by bizarre or surrealistic predicaments and incomprehensible social-bureaucratic powers. Franz Kafka Novelist and short story writer whose work fuses elements of realism and the fantastic typically features isolated protagonists faced by bizarre or surrealistic predicaments and incomprehensible social-bureaucratic powers.
  37. 37. SO I THOUGHT GUTENBERG WAS AN EDITOR REPLACEMENT? I SEE HOW YOU GOT TO THAT CONCLUSION.
  38. 38. WYSIWYG?
  39. 39. NAVIGATION HEADER MAIN CONTENT SIDEBAR FOOTER GUTEN TAG!
  40. 40. this is just the beginning!
  41. 41. NAVIGATION HEADER MAIN CONTENT SIDEBAR FOOTER
  42. 42. NAVIGATION HEADER MAIN CONTENT SIDEBAR FOOTER ALL THE VIEW ARE BELONG TO ME!
  43. 43. NAVIGATION HEADER SIDEBAR FOOTER Post Title Post Meta Paragraph Blockquote
  44. 44. Everything as a block
  45. 45. POTENTIAL BLOCKS
  46. 46. RECENT COMMENTS BLOCK
  47. 47. RECENT POSTS BLOCK
  48. 48. CHAT BLOCK
  49. 49. SLIDESHOW BLOCK
  50. 50. CUSTOM MENU BLOCK
  51. 51. CONFINED CONFINED INFINITE
  52. 52. MAIN CONTENT
  53. 53. MAIN CONTENT
  54. 54. WHAT YOU SEE IS WHAT YOU GET
  55. 55. WYSIWYG?
  56. 56. WYTESTIWYG
  57. 57. WYCONTRIBUTEIWYG
  58. 58. WYBUILDIWYG
  59. 59. https://wordpress.org/plugins/gutenberg/
  60. 60. https://github.com/wordpress/gutenberg
  61. 61. Test Gutenberg Today
  62. 62. Contribute your ideas
  63. 63. Build the future you want

×