Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

presented at

@MOR10

WYSIWYG

OLD SCHOOL WYSIWYG

ANCIENT SCHOOL WYSIWYG

MODERN WYSIWYG

AI WYSIWYG

FRONT-END WYSIWYG

WYSIWYGiI iI

WYSIWYGWTCAITHASAFAEEPTTAPACPES

WYSIWYG

WYSIWYG WAS BUILT FOR THIS

THE NATURAL ENVIRONMENT OF THE WEB

IS CHANGING FROM BOUNDED TO BOUNDLESS

dateline:

https://wordpress.tv/2013/07/29/matt-mullenweg-state-of-the-word-2013/

MATT MULLENWEG

PRESENTS WHAT WILL

EVENTUALLY BECOME

GUTENBERG.

GUTENBERG IS ABOUT

IDENTIFYING AND ADDING

MEANING TO CONTENT

THIS IS DONE

THROUGH BLOCKS AND

BLOCK CONTEXTS

Paragraph Image Columns

BEHIND THE CURTAIN

BEHIND THE CURTAIN

WIE GEHTS?

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

GUTEN OPPORTUNITIES

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

Contextual enhancements

Contextual enhancements

“Something we’ve been exploring is adding our SEO

and readability feedback as comments to text.”

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

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

Matias Ventura

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

Style for individual blocks

Grant block control to developers

Themes and plugins can introduce new blocks

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

Random idea:

COMIC BOOK BLOCKS

concrete idea:

layout selector

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

in the works:

repeatable blocks

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.

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.

SO I THOUGHT

GUTENBERG WAS AN

EDITOR REPLACEMENT?

I SEE HOW YOU GOT

TO THAT CONCLUSION.

WYSIWYG?

NAVIGATION

HEADER

MAIN CONTENT SIDEBAR

FOOTER

GUTEN TAG!

this is just the beginning!

NAVIGATION

HEADER

MAIN CONTENT SIDEBAR

FOOTER

NAVIGATION

HEADER

MAIN CONTENT SIDEBAR

FOOTER

ALL THE VIEW

ARE BELONG TO ME!

NAVIGATION

HEADER

SIDEBAR

FOOTER

Post Title

Post Meta

Paragraph

Blockquote

Everything as a block

POTENTIAL BLOCKS

RECENT COMMENTS BLOCK

RECENT POSTS BLOCK

CHAT BLOCK

SLIDESHOW BLOCK

CUSTOM MENU BLOCK

CONFINED

CONFINED

INFINITE

MAIN CONTENT

MAIN CONTENT

WHAT YOU SEE IS WHAT YOU GET

WYSIWYG?

WYTESTIWYG

WYCONTRIBUTEIWYG

WYBUILDIWYG

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

https://github.com/wordpress/gutenberg

Test Gutenberg Today

Contribute your ideas

Build the future you want