Slide 1
Slide 1 text
BIG MEDIA MEETUP
LONDON
Thursday, May 18, 2017
Slide 2
Slide 2 text
THE ALL NEW
WORDPRESS EDITOR
Slide 3
Slide 3 text
Managing Director & Co-Founder
KIMB JONES
Make Do - WordPress Specialist Agency
Slide 4
Slide 4 text
www.makedo.net
Slide 5
Slide 5 text
- WHAT? -
THERE’S A NEW
WORDPRESS EDITOR?
Slide 6
Slide 6 text
THE EDITOR TODAY
Slide 7
Slide 7 text
SO WHY
CHANGE?
Slide 8
Slide 8 text
WP EDITOR PROS & CONS
Cons
• Simple, basic, boring
• Dated, better alternatives out
there
• Bloated and technically
complex
• Difficult to extend ‘well’
• Has led to many different ways
to do very simple things
Pros
• Simple, easy, painless
• Established (old)
• Uses TinyMCE, open source,
own community, etc
• Easy to extend and improve
• A standard in WordPress for
many years
Slide 9
Slide 9 text
THE MANY DIFFERENT WAYS
TO DO VERY SIMPLE THINGS…
CUSTOM META FIELDS
Slide 10
Slide 10 text
THE MANY DIFFERENT WAYS
TO DO VERY SIMPLE THINGS…
SHORTCODES
Slide 11
Slide 11 text
THE MANY DIFFERENT WAYS
TO DO VERY SIMPLE THINGS…
LAYOUT BUILDERS
Slide 12
Slide 12 text
WHAT WILL
CHANGE
LOOK LIKE?
Slide 13
Slide 13 text
THE WP
VISION
FOR 2017
Slide 14
Slide 14 text
JANUARY 4th 2017
Three main focuses this year:
• REST API
• The editor
• The customizer
Slide 15
Slide 15 text
The editor will endeavour to create a new page
and post building experience that makes writing
rich posts effortless, and has “blocks” to make it
easy what today might take shortcodes, custom
HTML, or “mystery meat” embed discovery.
— Matt Mullenweg, January 4th 2017
Slide 16
Slide 16 text
“BLOCKS”
Slide 17
Slide 17 text
JANUARY 11th 2017
Started off with:
• How to improve the editor?
• Discuss and research
• A wishlist for improvements
Slide 18
Slide 18 text
…we’ll need to add new UI […] also reduce and
revisit existing UI, so we don’t end up with
something overwhelmingly complex. That could
mean combining where we can, minimizing
where we can, deprioritizing in places, and
freeing up space as much space as we can.
— Joen Asmussen, January 11th 2017
Slide 19
Slide 19 text
GUTENBERG
THIS LED TO…
Slide 20
Slide 20 text
GUTENBERG
PROTOTYPES
& STATUS
Slide 21
Slide 21 text
INITIAL WIREFRAME
Slide 22
Slide 22 text
ADVANCED MOCK-UP
Slide 23
Slide 23 text
FURTHER ENHANCEMENTS…
Slide 24
Slide 24 text
MINOR CHANGES…
Slide 25
Slide 25 text
GUTENBERG
HOW DOES
EDITING WORK?
Slide 26
Slide 26 text
GUTENBERG
VIDEO DEMO
Slide 27
Slide 27 text
GUTENBERG
DISCLAIMER:
THIS IS JUST A PLUGIN IT DOESN’T
WORK IT JUST LAYS THE FOUNDATION
AND ALLOWS FOR TESTING & RESEARCH
Slide 28
Slide 28 text
NO VIDEO? https://testgutenberg.wpkonsulterna.se/wp-admin/admin.php?page=gutenberg
Slide 29
Slide 29 text
WHEN?
Slide 30
Slide 30 text
WHEN?
laying the foundation for the
new editor:
We already update TinyMCE all
the time. Potential breakage or
compatibility should be limited…
— Matt Mullenweg
Slide 31
Slide 31 text
LAYING THE
FOUNDATION
FOR GUTENBERG
Slide 32
Slide 32 text
BLOCKS SYSTEM
Slide 33
Slide 33 text
CODE WP-POST-GRAMMAR
Slide 34
Slide 34 text
‘BLOCK’ CODE EXAMPLE
Slide 35
Slide 35 text
‘BLOCK’ CODE EXAMPLE
Hi I’m Kimb I work at Make Do a
WordPress Agency. We are awesome.
Slide 36
Slide 36 text
BACKWARDS COMPATABILITY?
Slide 37
Slide 37 text
Keep in mind the API is not finalized and tweaks
are happening frequently…
— Matias Ventura, May 5th 2017
WIP (WORDPRESS IN PROGRESS)
Slide 38
Slide 38 text
https://make.wordpress.org/core/
WANNA KNOW
MORE?
Slide 39
Slide 39 text
THAT IS ALL. FOR NOW.
Slide 40
Slide 40 text
Sources
Focus Tech and Design Leads
https://make.wordpress.org/core/2017/01/04/focus-tech-and-design-leads/
What makes a great editor?
https://make.wordpress.org/design/2017/01/11/what-makes-a-great-editor/
How little blocks work
https://make.wordpress.org/core/2017/05/05/editor-how-little-blocks-work/
GitHub
https://github.com/WordPress/gutenberg
Make WordPress: Core
https://make.wordpress.org/core
WPTavern: News
http://wptavern.com/tag/gutenberg
Video Demo
https://testgutenberg.wpkonsulterna.se/wp-admin/admin.php?page=gutenberg
Slide 41
Slide 41 text
THANK YOU
TWITTER @mkjones BLOG http://kimb.me AGENCY http://makedo.net
Background photo from https://unsplash.com - Steve Guttenberg photos provided by Steve Guttenberg