Getting Ready For Gutenberg Block Development

If you go back a few years, Matt teased you “Learn JavaScript Deeply”. Some paid attention to it while some ignored. Well yeah, I am the second one. I always hated JS stuff and tried to stay away from it because it was always overwhelming to me with various things attached to it, I am that jQuery magician guy :p. But with Gutenberg seems like someone moved my cheese or pressed reset button boom. Gutenberg is the buzz word for WordPress ecosystem these days & we are talking, getting worried and sometimes even wondering. If you are a developer like me then well you might be like, god no. I always tried to stay away from JS and now there is no way.

Hey #WordPress #Gutenberg you moved my cheese ! Click To Tweet

People good with JavaScript are happy soul but others are trying to figure out how and what to learn to be on track with new development & changes coming to WordPress. If you are someone who has been primarily working with PHP and no or less JavaScript then you are living under the rock it’s ES/ES6/ES2015/ES/NEXT/ESX or other 300+ names :p. Have been pushing myself hard to make my self-enter the world of JS/ES because it has already invaded the universe in various areas. We are building applications, website, back-ends, editors, mobile apps, desktop application and maybe creating humans with it someday :p.

Jumping straight to the Gutenberg development might make you feel lost, the documentation & code you read will only confuse you. That’s why wanted to share the learning path you can follow to make your self-comfortable for Gutenberg development. Have followed/following the same myself.

Teachers

Any subject can be interesting or boring, it really depends on the teacher. Who can make you fall in love with it or hate it forever!

Subject or topics are not boring its the teacher so choose them wisely 😉 #learning Click To Tweet

I prefer video content for learning and few people I like are @jeffery_way (Laracasts), @wesbos & @alexjgarrett (Code Course). Three of them have their own unique style of teaching & I love them.

Last but not the least the new teacher I am fan of is @zgordan

Warm Up

Before you proceed it would be worth reading about general things around JavaScript. This will help you quickly scan through things and set the mood to move motivated 🙂

Step 1: Getting Familiar With ES6

Before you touch the Gutenberg development make sure you know how ES6 code looks like & can read it so that you don’t feel lost reading the code or documentation.  If you have scanned through code/documentation and were wondering what ‘…’ three dots meant or what ‘() => {}’  or those import what was happening with the syntax. Then you need to upgrade yourself to new modern JavaScript.

Wes Bos has created detailed course “ES6 for Everone” which step by step teaches you the ES6 along with tools required  to write and develop modern JS

https://es6.io/

In case you have some knowledge of JavaScript or rather want quick crash course than “ES2015 Crash Course” by Jeffery Way from Laracast is the perfect fit

https://laracasts.com/series/es6-cliffsnotes

Step 2: WebPack Ninja

Once you are done learning ES6 next step would be to understand what is the role of WebPack and how to config it. WebPack configuration can be overwhelming but Jeffery Way makes it looks fun & simple trust me. Check out his course “WebPack For Everyone”

https://laracasts.com/series/webpack-for-everyone

If you still feel scared or puzzled worry not Jeffery cares for you and has created “Laravel Mix” an elegant wrapper around Webpack which is easy to use. Don’t get misled by the name “Laravel” it can be used with WordPress or any other project.

https://github.com/JeffreyWay/laravel-mix

Step 3: Do You React

So now you know ES6 & WebPack next step to get closer to Gutenberg development is getting good with React. Gutenberg code will start to make more sense once you get familiar with React as you no longer have to wonder what are those components or props etc do.

Wes Bos has created the detailed course which step by step teaches you how to work with React. Check out his course “React For Beginners”

https://reactforbeginners.com/

In case you want quick crash course on React Jeffery Way have created video course titled “Do You React”

https://laracasts.com/series/do-you-react/

Might be bit old hope he soon updates it 🙂

Step 4: Getting Good With Gutenberg

ES6, WebPack & React you are now ready to read and understand Gutenberg code and write one once you get familiar with Gutenberg Code/API

The only best resource to learn Gutenberg development in my knowledge so far is “Gutenberg Courses” by Zac Gorden

https://gutenberg.courses/

Get Set Go

Once you’re done with above you are all good to create awesome block(s) and share the love with the community 🙂

Credits 

Copy-editing & proofreading by Pravin Prajapati

Leave a Reply