Gutenberg is coming, and it’s bringing a lot of changes to how WordPress themes and plugins will be developed. What does that mean for a a grumpy, old developer like me? Well if you want to keep working in WordPress, it means it’s time to buckle down and lean something new. In this session we’ll cover some of the changes Gutenberg means for developers, and all the new tools, languages and libraries you need to to learn to start to develop with Gutenberg.

1. @mikehale#wcchi
Gutenberg: You Can't Teach an Old Dev New Tricks
WordCamp Chicago 2018

2. Mike Hale
Stompgear - Founder
Freelance WordPress Developer
● Startups
● SaaS
● eCommerce
● Agencies
● Fortune 500
Stompgear Digital Marketing

4. Matt Mullenweg - State of the Word - WordCamp US 2015

8. /cgi-bin/
1995: Common Gateway Interface & PERL

10. 1996: Active Server Pages (IIS3)

12. 2002: ASP.Net
C#, MVC, Core...

14. 2011: WordPress & PHP

17. Ready, Set, GO?

19. ★ wp.element

21. ● XML/HTML like syntax used by React
● Extension to the JavaScript language
● Used by preprocessors
● Won't run in a browser
● Syntactic Sugar
JSX

22. ● .babelrc config file
● "Transpiles" JSX to JavaScript
● Allows for modern syntax in older browsers
Babel

23. Babel

24. ● Dependency Graph Manager
● Bundle multiple source files
● "Loaders" (like tasks in Gulp or Grunt)
● Configure Dev server for "hot" reloading
Webpack

25. ● Node.js is a fast, cross-platform JavaScript runtime
environment
● NPM: Node Package Manager
○ Installs packages (code libraries)
○ Dev or Prod Environments
Node.js & NPM

26. Now

27. Next...

30. WordCamp US 2015 by echofoxtrot is licensed under CC BY-NC 2.0

31. The Future
Morten Rand-Hendriksen
Gutenberg & The Future of WordPress
WordCamp US 2017
https://wordpress.tv/2017/11/28/morten-rand-hendriksen-gutenberg-the-future-of-wordpress/

36. New WP Block Editor Development Course by Zac Gordon

37. Foundation and Examples for Building
Blocks
● How the Block Editor Works
● Creating Custom Blocks
● Working with Native Blocks
● Options for Theme Developers
● Example Blocks
● Modern JS/ES6+, JSX, React, webpack & babel

39. create-guten-block
Ahmad Awais
Zero-configuration developer toolkit
No configuring React, Webpack,
ES6/Next, ESLint, Babel...
https://github.com/ahmadawais/create-guten-block

41. @MikeHale
Stompgear - Founder
Freelance WordPress Developer
● Startups
● SaaS
● eCommerce
● Agencies
● Fortune 500
Stompgear Digital Marketing