Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Don't fear the block: Gutenberg is gettin' good

515 visualizaciones

Publicado el

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.

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

Don't fear the block: Gutenberg is gettin' good

  1. 1. Don’t Fear the Block John Eckman @jeckman WordCamp New York September 15th, 2019
  2. 2. @jeckman https://twitter.com/jeckman/status/1021092249885659136 Photo by Nathan Anderson on Unsplash
  3. 3. @jeckman Be all in Photo by Tiago Gerken on Unsplash
  4. 4. @jeckman What’s New in Gutenberg? Photo by Kahika on Unsplash
  5. 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. 6. @jeckman Content Block Areas (Phase II begins) https://make.wordpress.org/ core/2019/09/05/defining- content-block-areas/
  7. 7. @jeckman Third -Party Libraries Photo by Susan Holt Simpson on Unsplash
  8. 8. @jeckman Atomic Blocks
  9. 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. 10. @jeckman CoBlocks
  11. 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. 12. 10up & GoDaddy collaboration - Gutenberg ready, CoBlocks enabled theme - coming soon to .org
  13. 13. @jeckman Stackable
  14. 14. @jeckman https://demo.wpstackable.com/v2/bold/
  15. 15. @jeckman Ultimate Addons for Gutenberg
  16. 16. @jeckman Kioken blocks
  17. 17. @jeckman 10up Projects Using Gutenberg Photo by Andrew Neel on Unsplash
  18. 18. American Marketing Association @jeckman
  19. 19. @jeckman Restricted Content (editing)
  20. 20. @jeckman Restricted Content (front end)
  21. 21. @jeckman
  22. 22. @jeckman Newsletter & Latest Content
  23. 23. Starbucks Stories @jeckman
  24. 24. @jeckman Story Map Block (front end)
  25. 25. @jeckman Story Map Block (edit)
  26. 26. @jeckman Product Recommendation
  27. 27. @jeckman Product Recommendation (edit)
  28. 28. @jeckman Starbucks Productions (front end)
  29. 29. @jeckman Starbucks Productions (edit)
  30. 30. JDRF.org @jeckman
  31. 31. @jeckman https://jdrf.design/
  32. 32. @jeckman Container Options
  33. 33. EAB @jeckman
  34. 34. @jeckman
  35. 35. @jeckman
  36. 36. @jeckman Promo Block
  37. 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. 38. Timeline Block
  39. 39. @jeckman Timeline Block (editing)
  40. 40. @jeckman Editorial Commenting
  41. 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. 42. @jeckman Let’s GO! Photo by Kid Circus on Unsplash
  43. 43. John Eckman CEO @jeckman Q&A Photo by Camylla Battani on Unsplash

×