Gutenberg: You Can’t Teach an Old Dev New Tricks - WordCamp Chicago 21018

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.

Transcript

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 w 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. Mike Hale Stompgear - Founder Freelance WordPress Developer • Startups • SaaS • eCommerce • Agencies • Fortune 500 Stompgear Digital Marketing