NTC WordPress Day - Gutenberg: Are you ready?

The future is coming. Are you ready? Learn about how Gutenberg will transform UX and content strategy by providing users the ability to create flexible content layouts in a visual, block-based editing experience. We’ll share an overview of Gutenberg, tips on how you can use it to achieve your content and design goals, and information about steps you can take now to prepare for its release as part of WordPress Core.

Transcript

1. GUTENBERG: ARE YOU READY? The future of WordPress publishing
2. JOIN THE CONVERSATION ➤ Here and Now! ➤ Collaborative notes: http://bit.ly/18ntcwp-gutenberg ➤ Online: #ntcwpday
3. AGENDA ➤ What is Gutenberg? ➤ Strategic impact ➤ Editing experience ➤ Evaluating your site ➤ Staying informed
4. INTRODUCTIONS Katherine White
 Director of Engineering
 Kanopi Studios
5. WHAT IS GUTENBERG? Why this? Why now?
6. WHY GUTENBERG? ➤ Code name for the new WordPress rich editing experience ➤ Named for Johannes Gutenberg, creator of the printing press ➤ Primary core initiative for 2017 ➤ Slated for release as part of WordPress 5.0
7. WHY NOW? ➤ WordPress Foundation mission: democratize publishing on the web ➤ Editor was lagging behind in innovation compared to platforms like Medium ➤ Demand for layout editing tools - clear need for a core solution ➤ Make rich content easier to produce in WordPress core
8. CURRENT TIMELINE ➤ Will be part of the core WordPress 5.0 release ➤ Initial focus is on post editing and block implementation - content-first ➤ Sites rolling out in ~3 months can focus on the current editing experience ➤ Sites rolling out in ~6 months should plan for Gutenberg ➤ Year following 5.0 release - extending to page templates and full site customization ➤ Will provide initial backwards compatibility for functionality like shortcodes and meta-boxes - but the goal is to move away from these approaches long-term
9. STRATEGIC IMPACT Content & User Experience
10. IMPACTS TO CONTENT & USER EXPERIENCE ➤ Gutenberg delivers on the promise of WYSIWYG ➤ Content creation will be far more flexible and intuitive ➤ Modular blocks that can be placed in views ➤ Content can be easily added, re-ordered, changed on the fly, or reused ➤ Will reduce the need to find plugins to tackle page styling ➤ Shortcodes will ultimately become a thing of the past
11. BUT WAIT, IS THIS THE WILD WEST? ➤ Styling can be controlled within the theme to offer block options that follow established design patterns ➤ Will support creation of default page templates as a set of defined blocks ➤ Creates a styled page that can simply be filled in by content authors ➤ Content accessibility - will flag contrast, alt-text, and other issues as they occur
12. EDITING EXPERIENCE Demo & Features
13. INTERFACE Embracing “blocks”
14. BLOCK TYPES ➤ Static blocks ➤ Dynamic blocks (“Widgets”) ➤ Shared blocks
16. TEXT ELEMENTS Headings, paragraphs, lists, & more
18. IMAGES Images, galleries & layout
20. EMBEDS Intuitive content embedding
22. LAYOUT BLOCKS Text columns, calls-to-action, & tabular data
25. ADDITIONAL FEATURES And experimental goodies
26. ADDITIONAL FEATURES ➤ Custom HTML preview ➤ Table of Contents ➤ Anchors ➤ Text column layouts ➤ Multi-block column layouts (experimental) ➤ … and this is always changing!!
27. ACCESSIBILITY ENHANCEMENTS
28. UNDER THE HOOD Customizing & Supporting Gutenberg
29. CONTENT MANAGEMENT ➤ Intent is to still use post_content as the “single source of truth” ➤ Intent is to support multiple editing contexts (via the REST API, etc) even if they do not leverage the visual block-based editor ➤ Post meta will still be part of configuration architecture ➤ Editor Technical Overview: https://make.wordpress.org/core/2017/01/17/editor- technical-overview/
30. BLOCK API ➤ Allows developers to create custom blocks for the editor ➤ Combination of React JS and PHP ➤ Can create either static or dynamic block types ➤ Can support block-level meta data ➤ Has redundancy between the front and back end components ➤ WP-CLI provides block scaffolding: wp scaffold block <slug> [-- title=<title>] [--dashicon=<dashicon>] [--category=<category>] [-- theme] [--plugin=<plugin>] [--force] ➤ Block API documentation: https://github.com/WordPress/gutenberg/blob/master/docs/ block-api.md ➤ Still evolving!
31. EVALUATE YOUR SITE Step by Step
32. BACK UP YOUR SITE. Step One
33. CREATE AN ISOLATED TESTING ENVIRONMENT. Step Two
34. INSTALL THE 
 GUTENBERG PLUGIN. Step Three
 https://wordpress.org/plugins/gutenberg/
35. ADD GUTENBERG SUPPORT TO YOUR CUSTOM FUNCTIONALITY. Step Four
36. REVIEW AND TEST 
 YOUR SITE. Step Four
37. POTENTIAL POINTS OF FAILURE ➤ Shortcodes ➤ Meta-boxes ➤ Custom post types ➤ Custom fields ➤ Tiny MCE integrations ➤ Third party plugins
38. ESTABLISH YOUR INTEGRATION STRATEGY. Step Five
39. WAYS TO START INTEGRATING ➤ “Smart” content conversion based on well-structured HTML ➤ Classic editor plugin buys you time - https://wordpress.org/plugins/classic-editor/ ➤ Work with one post or type of content at a time - this is not all or nothing ➤ Converting custom functionality to new block types ➤ Database of plugin compatibility: https://plugincompat.danielbachhuber.com/
40. STAYING INFORMED Following Gutenberg Progress
41. INFORMATION AND RESOURCES ➤ Gutenberg News - http://gutenberg.news/ ➤ Gutenberg Documentation - https://wordpress.org/gutenberg/handbook/ ➤ Frontenberg - a Gutenberg playground - https://frontenberg.tomjn.com/ ➤ GitHub repository - https://github.com/WordPress/gutenberg ➤ “Feature Complete” milestone - https://github.com/WordPress/gutenberg/ milestone/8
42. GET INVOLVED ➤ WordPress is actively seeking feedback from the non-developer community ➤ Call for Testing - https://make.wordpress.org/test/handbook/call-for-testing/ gutenberg-testing/
43. A LOOK BACK ➤ What is Gutenberg? ➤ Strategic impact ➤ Editing experience ➤ Evaluating your site ➤ Staying informed
44. THANK YOU! Katherine White
 Director of Engineering
 Kanopi Studios
 katherine@kanopistudios.com
 @katherinemwhite