Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Future of WordPress Development

The Future of WordPress Development

WordCamp Miami 2018

There are many things coming in 2018 that effect the future of WordPress in various ways – including how WordPress works behind the scenes and a major change to the WordPress editor and how the average user uses WordPress.

More Decks by Grzegorz (Greg) Ziółkowski

Other Decks in Programming


  1. Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl The Future of WordPress Development

  2. CHAPTER I History

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. “ ” 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. make.wordpress.org/core/2017/01/04/focus-tech-and-design-leads/ MATT MULLENWEG
  10. By embracing "the block", we can potentially unify multiple different

    interfaces into one.
  11. ”Mystery meat" refers to hidden features in software, features that

    you have to discover.
  12. CHAPTER II Gutenberg

  13. None
  14. The vision • Everything is a block • Placeholders are

    key • Direct manipulation • Customization • Drag and drop is additive
  15. “ ” Ultimately, the vision for Gutenberg is to make

    it much easier to author rich content. Through ensuring good defaults, wrapping and bundling advanced layout options blocks, and making the most important actions immediately available, authoring content with WordPress should be accessible to anyone. WORDPRESS.ORG/GUTENBERG/HANDBOOK/REFERENCE/DESIGN-PRINCIPLES/
  16. CHAPTER III Demo

  17. CHAPTER IV Technical

  18. Technical overview: make.wordpress.org/core/2017/01/17/editor- technical-overview/

  19. “ ” MATT MULLENWEG I believe quite strongly that JavaScript

    and API-driven interfaces are the future of not just WordPress but the web. The State of the Word 2015
  20. TECHNICAL Technologies

  21. Libraries • React • Redux • Lodash • WordPress packages

    • Other npm modules
  22. Tools • WordPress :) • Webpack • Babel • Eslint

    • Jest • Cypress
  23. Gutenberg is built using modular architecture.

  24. Third-party libraries are hidden behind the abstraction layer.

  25. Reusable components over plain HTML markup.

  26. TECHNICAL Blocks

  27. Enqueue Javascript CSS HTML

  28. Block API: wordpress.org/gutenberg/handbook/block-api

  29. None
  30. Blocks are composed of components.

  31. None
  32. TECHNICAL Themes

  33. A theme experiment: github.com/WordPress/gutenberg-theme

  34. Templates: wordpress.org/gutenberg/handbook/templates/

  35. None
  36. Extensibility TECHNICAL

  37. None
  38. None
  39. None
  40. None
  41. None
  42. CHAPTER V The future

  43. Merge proposal hasn’t happened yet.

  44. Gutenberg is not a page builder, customization comes in the

    next focus.
  45. Exploring: a way to write create a block in any

  46. Interactive blocks also on the frontend?

  47. Starter kit and reusable scripts.

  48. None
  49. “ ” DAN ABRAMOV If WordPress were to adopt React,

    it would make sense for it to also provide a zero- configuration build environment. We are happy to offer some of the packages we developed as part of Create React App for reuse. wpcouple.com/interview-react-team-facebook-wordpress-gutenberg/
  50. Generate blocks with WP-CLI: wordpress.org/gutenberg/handbook/blocks/ generate/blocks-with-wp-cli/

  51. Reusable scripts: github.com/WordPress/packages/tree/master/ packages/scripts

  52. WordPress packages (npm): github.com/WordPress/packages

  53. CHAPTER VI Get involved

  54. Learn more: wordpress.org/gutenberg

  55. Documentation: wordpress.org/gutenberg/handbook/

  56. Get the plugin: wordpress.org/plugins/gutenberg/

  57. Help with issues: github.com/WordPress/gutenberg/issues

  58. Join the conversation: #core-editor, wed 14:00 UTC

  59. Come find me, let’s talk Gutenberg

  60. Thanks, any questions? Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl