Gutenberg is the new WordPress editor. It is built on ReactJS. As such, it introduces modern technologies that WordPress developers must learn to keep up with modern WordPress development.
One of the most intimidating things about trying to learn Javascript nowadays is where to start. Personally, as a developer who's always been more PHP/backend oriented, trying to dive in to modern Javascript is like..
This list attempts to catalog valuable community resources that I've read/watched to make it easier to learn things like Gutenberg, React, Webpack, Babel, etc.
*Prices stated may not be current. No price means it's free!
| Summary | Link | Price* |
|---|---|---|
| Block Editor Handbook | https://developer.wordpress.org/block-editor/ | |
| Intro to Gutenberg and creating blocks(series) | https://www.youtube.com/watch?v=U4sfx7vN0Iw | |
| Building Gutenberg blocks with JSX | https://modularwp.com/how-to-build-gutenberg-blocks-jsx/ | |
| WordPress and JS in 2019: Coding a Custom Block Type | https://www.youtube.com/watch?v=Mv68Sa-iHyo | |
| Enable Inner Blocks in Gutenberg | https://www.ibenic.com/enable-inner-blocks-gutenberg/ |
| Summary | Link | Price |
|---|---|---|
| React Crash Course | https://www.youtube.com/watch?v=sBws8MSXN7A | |
| React & Webpack 4 from Scratch | https://www.youtube.com/watch?v=deyxI-6C2u4 |
| Summary | Link | Price* |
|---|---|---|
| Webpack documentation | https://webpack.js.org/concepts | |
| Webpack Crash Course | https://www.youtube.com/watch?v=lziuNMk_8eQ | |
| Setting Up Webpack for Your Project | https://medium.com/@imranhsayed/setting-up-webpack-for-your-project-97279bbb0385 | |
| Entry point wildcards | https://code.luasoftware.com/tutorials/webpack/webpack-wildcard-support-for-entry-points/ |
| Summary | Link | Price* |
|---|---|---|
| Using Babel and Webpack | https://www.youtube.com/watch?v=iWUR04B42Hc |
Thank you to all the creators for providing such valuable information for others to learn! Your efforts make the web fun to use and learn.