SlideShare a Scribd company logo
1 of 91
Download to read offline
presented at
@MOR10
WYSIWYG
OLD SCHOOL WYSIWYG
ANCIENT SCHOOL WYSIWYG
MODERN WYSIWYG
AI WYSIWYG
FRONT-END WYSIWYG
WYSIWYG
iI 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
Gutenberg and the WordPress of Tomorrow - WordCamp US 2017

More Related Content

More from Morten Rand-Hendriksen

Responsive Images in the Real World - presented at JavaScript Open 2015
Responsive Images in the Real World - presented at JavaScript Open 2015Responsive Images in the Real World - presented at JavaScript Open 2015
Responsive Images in the Real World - presented at JavaScript Open 2015Morten Rand-Hendriksen
 
Can WordPress really do that? A case study of vierderduer.no
Can WordPress really do that? A case study of vierderduer.noCan WordPress really do that? A case study of vierderduer.no
Can WordPress really do that? A case study of vierderduer.noMorten Rand-Hendriksen
 
Your Blog is Boring and Your Photos Suck
Your Blog is Boring and Your Photos SuckYour Blog is Boring and Your Photos Suck
Your Blog is Boring and Your Photos SuckMorten Rand-Hendriksen
 
10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your SiteMorten Rand-Hendriksen
 

More from Morten Rand-Hendriksen (7)

Ethics and the Promise of Open Source
Ethics and the Promise of Open SourceEthics and the Promise of Open Source
Ethics and the Promise of Open Source
 
GitHub for the Rest of Us
GitHub for the Rest of UsGitHub for the Rest of Us
GitHub for the Rest of Us
 
Responsive Images in the Real World - presented at JavaScript Open 2015
Responsive Images in the Real World - presented at JavaScript Open 2015Responsive Images in the Real World - presented at JavaScript Open 2015
Responsive Images in the Real World - presented at JavaScript Open 2015
 
Can WordPress really do that? A case study of vierderduer.no
Can WordPress really do that? A case study of vierderduer.noCan WordPress really do that? A case study of vierderduer.no
Can WordPress really do that? A case study of vierderduer.no
 
Your Blog is Boring and Your Photos Suck
Your Blog is Boring and Your Photos SuckYour Blog is Boring and Your Photos Suck
Your Blog is Boring and Your Photos Suck
 
Wp meetup custom post types
Wp meetup custom post typesWp meetup custom post types
Wp meetup custom post types
 
10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site
 

Recently uploaded

Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxNIMMANAGANTI RAMAKRISHNA
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxMario
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxAndrieCagasanAkio
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 

Recently uploaded (11)

Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptx
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptx
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptx
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 

Gutenberg and the WordPress of Tomorrow - WordCamp US 2017