91

Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

Embed Size (px)

Citation preview

Page 1: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 2: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

presented at

Page 3: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

@MOR10

Page 4: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

WYSIWYG

Page 5: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

OLD SCHOOL WYSIWYG

Page 6: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

ANCIENT SCHOOL WYSIWYG

Page 7: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

MODERN WYSIWYG

Page 8: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

AI WYSIWYG

Page 9: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

FRONT-END WYSIWYG

Page 10: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

WYSIWYGiI iI

Page 11: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

WYSIWYGWTCAITHASAFAEEPTTAPACPES

WYSIWYG

Page 12: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

WYSIWYG WAS BUILT FOR THIS

Page 13: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

THE NATURAL ENVIRONMENT OF THE WEB

IS CHANGING FROM BOUNDED TO BOUNDLESS

Page 14: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

dateline:

Page 15: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

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

MATT MULLENWEG

PRESENTS WHAT WILL

EVENTUALLY BECOME

GUTENBERG.

Page 16: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 17: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 18: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 19: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 20: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 21: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 22: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

GUTENBERG IS ABOUT

IDENTIFYING AND ADDING

MEANING TO CONTENT

THIS IS DONE

THROUGH BLOCKS AND

BLOCK CONTEXTS

Page 23: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

Paragraph Image Columns

Page 24: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 25: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 26: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 27: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 28: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 29: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 30: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

BEHIND THE CURTAIN

BEHIND THE CURTAIN

WIE GEHTS?

Page 31: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

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

Page 32: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 33: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

GUTEN OPPORTUNITIES

Page 34: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

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

Page 35: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

Contextual enhancements

Page 36: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

Contextual enhancements

Page 37: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

“Something we’ve been exploring is adding our SEO

and readability feedback as comments to text.”

Page 38: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

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

Page 39: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

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

Matias Ventura

Page 40: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

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

Page 41: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

Style for individual blocks

Page 42: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

Grant block control to developers

Page 43: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

Themes and plugins can introduce new blocks

Page 44: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

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

Page 45: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

Random idea:

COMIC BOOK BLOCKS

Page 46: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 47: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 48: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 49: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

concrete idea:

layout selector

Page 50: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

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

Page 51: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

in the works:

repeatable blocks

Page 52: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

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.

Page 53: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

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.

Page 54: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

SO I THOUGHT

GUTENBERG WAS AN

EDITOR REPLACEMENT?

I SEE HOW YOU GOT

TO THAT CONCLUSION.

Page 55: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

WYSIWYG?

Page 56: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 57: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

NAVIGATION

HEADER

MAIN CONTENT SIDEBAR

FOOTER

GUTEN TAG!

Page 58: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

this is just the beginning!

Page 59: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

NAVIGATION

HEADER

MAIN CONTENT SIDEBAR

FOOTER

Page 60: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

NAVIGATION

HEADER

MAIN CONTENT SIDEBAR

FOOTER

ALL THE VIEW

ARE BELONG TO ME!

Page 61: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

NAVIGATION

HEADER

SIDEBAR

FOOTER

Post Title

Post Meta

Paragraph

Blockquote

Page 62: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 63: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

Everything as a block

Page 64: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 65: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

POTENTIAL BLOCKS

Page 66: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

RECENT COMMENTS BLOCK

Page 67: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

RECENT POSTS BLOCK

Page 68: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

CHAT BLOCK

Page 69: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

SLIDESHOW BLOCK

Page 70: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

CUSTOM MENU BLOCK

Page 71: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 72: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 73: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

CONFINED

CONFINED

INFINITE

Page 74: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 75: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

MAIN CONTENT

Page 76: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

MAIN CONTENT

Page 77: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 78: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 79: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

WHAT YOU SEE IS WHAT YOU GET

Page 80: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

WYSIWYG?

Page 81: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

WYTESTIWYG

Page 82: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

WYCONTRIBUTEIWYG

Page 83: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

WYBUILDIWYG

Page 84: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

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

Page 85: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

https://github.com/wordpress/gutenberg

Page 86: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 87: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Page 88: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

Test Gutenberg Today

Page 89: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

Contribute your ideas

Page 90: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

Build the future you want

Page 91: Gutenberg and the WordPress of Tomorrow - WordCamp US 2017