Don't Fear The Block: Gutenberg is Gettin' Good

As presented at WordCamp NYC on Sept 14th, 2019.

Now that we’re more than six months past the Gutenlaunch, how is the new WordPress editor faring in the real world?

In short, the answer is brilliantly.

In this talk I go through some of the most exciting and interesting developments on and around Gutenberg, including real production examples from our clients as well as others.

We’ll cover core blocks, block libraries, block-aware-themes, and custom blocks.

If you’ve held back from embracing the block, come see why it’s time to start planning your own gutenswitch.

Transcript

1. Don’t Fear the Block John Eckman @jeckman WordCamp New York September 15th, 2019
2. @jeckman https://twitter.com/jeckman/status/1021092249885659136 Photo by Nathan Anderson on Unsplash
3. @jeckman Be all in Photo by Tiago Gerken on Unsplash
4. @jeckman What’s New in Gutenberg? Photo by Kahika on Unsplash
5. @jeckman Gutenberg Improvements • 5.0: RSS Block, Kindle Embed Block, Focal Point Picker • 5.1: Search, Calendar, Tag Cloud Blocks; Micro- animations; Widgets-to-Blocks complete • 5.2: @wordpress/block-editor module • 5.3: block management, nested blocks, legacy widget • 5.4: Vertical alignment in columns, playsinline video, improved hover state • 5.5: Group block, vertical alignment and image fill options in Media & Text block • 5.6: Improved focus state, simplified style specificity • 5.7: Width setting in column block, show post content or excerpt in Latest Posts; headers and footers in table block • 5.8: Change text color in heading block, reorder gallery images, widgets screen POC • 5.9: Snackbar notices, group block • 6.0: predefined layouts in columns block, improvements to group block • 6.1: Using motion/animation when moving blocks • 6.2: Nesting cover and media & text blocks, button block customization • 6.3: A11y support for navigation and edit modes • 6.4: Resize and background color for Cover block, typewriter experience, circle crop on image block https://wpengine.com/blog/gutenberg-a-six-month-feature-update Photo by Guilherme Cunha on Unsplash
6. @jeckman Content Block Areas (Phase II begins) https://make.wordpress.org/ core/2019/09/05/defining- content-block-areas/
7. @jeckman Third -Party Libraries Photo by Susan Holt Simpson on Unsplash
8. @jeckman Atomic Blocks
9. @jeckman “More recently, Array’s Atomic Blocks library has emerged as a go-to source for creative, easy-to-use Gutenberg blocks that leverage the new WordPress editor. Atomic Blocks is the most popular and most downloaded library of beautiful, responsive, and customizable blocks for Gutenberg. It allows users to add great-looking elements to their web pages at significantly reduced turnaround times that convert at higher rates, all without touching a line of code.” https://wpengine.com/blog/bringing-array-themes-into-the-wp-engine-family/
10. @jeckman CoBlocks
11. @jeckman “Effective today, Rich Tabor is joining GoDaddy to help lead innovation around Gutenberg.” “CoBlocks and ThemeBeans are joining the GoDaddy family.” https://www.godaddy.com/garage/coblocks-themebeans-tabor/
12. 10up & GoDaddy collaboration - Gutenberg ready, CoBlocks enabled theme - coming soon to .org
13. @jeckman Stackable
14. @jeckman https://demo.wpstackable.com/v2/bold/
15. @jeckman Ultimate Addons for Gutenberg
16. @jeckman Kioken blocks
17. @jeckman 10up Projects Using Gutenberg Photo by Andrew Neel on Unsplash
18. American Marketing Association @jeckman
19. @jeckman Restricted Content (editing)
20. @jeckman Restricted Content (front end)
21. @jeckman
22. @jeckman Newsletter & Latest Content
23. Starbucks Stories @jeckman
24. @jeckman Story Map Block (front end)
25. @jeckman Story Map Block (edit)
26. @jeckman Product Recommendation
27. @jeckman Product Recommendation (edit)
28. @jeckman Starbucks Productions (front end)
29. @jeckman Starbucks Productions (edit)
30. JDRF.org @jeckman
31. @jeckman https://jdrf.design/
32. @jeckman Container Options
33. EAB @jeckman
34. @jeckman
35. @jeckman
36. @jeckman Promo Block
37. The Rockefeller Archive Center is a major repository and research center for the study of philanthropy and its impact throughout the world. In addition to the papers of the Rockefeller family, the RAC's collections include the records of the Rockefeller Foundation, Ford Foundation, Near East Foundation, Commonwealth Fund, Rockefeller Brothers Fund, Henry Luce Foundation, W. T. Grant Foundation and many other philanthropic organizations. Rockefeller Archive Center
38. Timeline Block
39. @jeckman Timeline Block (editing)
40. @jeckman Editorial Commenting
41. @jeckman Lessons Learned • Use Gutenberg to force component based designs & design systems • Aim for direct manipulation of visual objects - but balance that with the flexibility of attributes and inspector controls • Extend core blocks where possible instead of remaking them • Combine blocks into groupings • The “reusable blocks” feature is amazing but needs improvement Photo by Roman Mager on Unsplash
42. @jeckman Let’s GO! Photo by Kid Circus on Unsplash
43. John Eckman CEO @jeckman Q&A Photo by Camylla Battani on Unsplash