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.

2. presented at

3. @MOR10

4. WYSIWYG

5. OLD SCHOOL WYSIWYG

6. ANCIENT SCHOOL WYSIWYG

7. MODERN WYSIWYG

8. AI WYSIWYG

9. FRONT-END WYSIWYG

10. WYSIWYG
iI iI

11. WYSIWYGWTCAITHASAFAEEPTTAPACPES
WYSIWYG

12. WYSIWYG WAS BUILT FOR THIS

13. THE NATURAL ENVIRONMENT OF THE WEB
IS CHANGING FROM BOUNDED TO BOUNDLESS

14. dateline:

15. https://wordpress.tv/2013/07/29/matt-mullenweg-state-of-the-word-2013/
MATT MULLENWEG
PRESENTS WHAT WILL
EVENTUALLY BECOME
GUTENBERG.

22. GUTENBERG IS ABOUT
IDENTIFYING AND ADDING
MEANING TO CONTENT
THIS IS DONE
THROUGH BLOCKS AND
BLOCK CONTEXTS

23. Paragraph Image Columns

30. BEHIND
THE
CURTAIN
BEHIND
THE
CURTAIN
WIE GEHTS?

31. <!-- 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 -->

33. GUTEN
OPPORTUNITIES

34. https://yoast.com/gutenberg-integration/

35. Contextual enhancements

36. Contextual enhancements

37. “Something we’ve been exploring is adding our SEO
and readability feedback as comments to text.”

38. https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/

39. Imagine defining a
whole page template as
a set of default blocks,
ready to be filled once
the user creates a page.
Matias Ventura

40. 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

41. Style for individual blocks

42. Grant block control to developers

43. Themes and plugins
can introduce new blocks

44. https://woocommerce.com/2017/11/woocommerce-gutenberg/

45. Random idea:
COMIC BOOK BLOCKS

49. concrete idea:
layout selector

50. https://hmn.md/what-we-do/projects/the-sun/

51. in the works:
repeatable blocks

52. 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.

53. 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.

54. SO I THOUGHT
GUTENBERG WAS AN
EDITOR REPLACEMENT?
I SEE HOW YOU GOT
TO THAT CONCLUSION.

55. WYSIWYG?

57. NAVIGATION
HEADER
MAIN CONTENT SIDEBAR
FOOTER
GUTEN TAG!

58. this is just
the beginning!

59. NAVIGATION
HEADER
MAIN CONTENT SIDEBAR
FOOTER

60. NAVIGATION
HEADER
MAIN CONTENT SIDEBAR
FOOTER
ALL THE VIEW
ARE BELONG TO ME!

61. NAVIGATION
HEADER
SIDEBAR
FOOTER
Post Title
Post Meta
Paragraph
Blockquote

63. Everything
as a block

65. POTENTIAL BLOCKS

66. RECENT COMMENTS BLOCK

67. RECENT POSTS BLOCK

68. CHAT BLOCK

69. SLIDESHOW BLOCK

70. CUSTOM MENU BLOCK

73. CONFINED
CONFINED
INFINITE

75. MAIN CONTENT

76. MAIN CONTENT

79. WHAT YOU SEE IS
WHAT YOU GET

80. WYSIWYG?

81. WYTESTIWYG

82. WYCONTRIBUTEIWYG

83. WYBUILDIWYG

84. https://wordpress.org/plugins/gutenberg/

85. https://github.com/wordpress/gutenberg

88. Test Gutenberg Today

89. Contribute your ideas

90. Build the future you want