Gutenberg: The new core WordPress editor

In this talk I will be showing progress of Gutenberg, the new content editing experience for WordPress. This includes a little history around the how's and why's, looking at the impact of this change for new and existing WordPress sites, and, most importantly, how you can get ready for the arrival of Gutenberg which is currently targeted for early June 2017.

Transcript

1. BIG MEDIA MEETUP
 LONDON Thursday, May 18, 2017
2. THE ALL NEW 
 WORDPRESS EDITOR
3. Managing Director & Co-Founder KIMB JONES Make Do - WordPress Specialist Agency
4. www.makedo.net
5. - WHAT? -
 THERE’S A NEW 
 WORDPRESS EDITOR?
6. THE EDITOR TODAY
7. SO WHY CHANGE?
8. 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
9. THE MANY DIFFERENT WAYS 
 TO DO VERY SIMPLE THINGS… CUSTOM META FIELDS
10. THE MANY DIFFERENT WAYS 
 TO DO VERY SIMPLE THINGS… SHORTCODES
11. THE MANY DIFFERENT WAYS 
 TO DO VERY SIMPLE THINGS… LAYOUT BUILDERS
12. WHAT WILL CHANGE LOOK LIKE?
13. THE WP 
 VISION 
 FOR 2017
14. JANUARY 4th 2017 Three main focuses this year: • REST API • The editor • The customizer
15. 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
16. “BLOCKS”
17. JANUARY 11th 2017 Started off with: • How to improve the editor? • Discuss and research • A wishlist for improvements
18. …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
19. GUTENBERG THIS LED TO…
20. GUTENBERG
 PROTOTYPES & STATUS
21. INITIAL WIREFRAME
22. ADVANCED MOCK-UP
23. FURTHER ENHANCEMENTS…
24. MINOR CHANGES…
25. GUTENBERG
 HOW DOES EDITING WORK?
26. GUTENBERG
 VIDEO DEMO
27. GUTENBERG
 DISCLAIMER:
 
 THIS IS JUST A PLUGIN IT DOESN’T 
 WORK IT JUST LAYS THE FOUNDATION
 AND ALLOWS FOR TESTING & RESEARCH
28. NO VIDEO? https://testgutenberg.wpkonsulterna.se/wp-admin/admin.php?page=gutenberg
29. WHEN?
30. WHEN? laying the foundation for the new editor:
 We already update TinyMCE all the time. Potential breakage or compatibility should be limited… — Matt Mullenweg
31. LAYING THE
 FOUNDATION
 FOR GUTENBERG
32. BLOCKS SYSTEM
33. CODE WP-POST-GRAMMAR
34. ‘BLOCK’ CODE EXAMPLE <!-- wp:image --> <img src=“https://site.com/2017/05/kimb.jpg”> <!-- /wp -->
35. ‘BLOCK’ CODE EXAMPLE <!-- wp:text align:left --> Hi I’m Kimb <strong>I work at Make Do a 
 WordPress Agency</strong>. We are awesome. <!-- /wp -->
36. BACKWARDS COMPATABILITY?
37. 
 Keep in mind the API is not finalized and tweaks are happening frequently…
 
 — Matias Ventura, May 5th 2017 WIP (WORDPRESS IN PROGRESS)
38. https://make.wordpress.org/core/ WANNA KNOW
 MORE?
39. THAT IS ALL. FOR NOW.
40. 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
41. 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