Gutenberg: The new core WordPress editor

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.

2cd8df04a3be5cdefbd88ce598ec7a7d?s=128

Kimb Jones

May 18, 2017
Tweet

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