Wakefly BlogGetting Started with React and Gutenberg

The release of WordPress 5.0 is expected on November 19th, 2018 - and with it brings a major change in the form of the default Gutenberg editor. In preparation for it’s release, I have been focused on learning Gutenberg, as well as React - the technology driving it. As the resident WordPress evangelist here at Wakefly, it’s my role to stay on top of the latest technology changes within the WordPress platform, and get our team trained up on how to best leverage them for our clients.

This Saturday, I’ll be speaking at WordCamp Portland about my experience learning React and how that knowledge can be used to build a site in Gutenberg. I’ll also be participating on the Gutenberg panel to share what I’ve learned and answer questions. Since many other developers are likely going through this same learning process right now, I wanted to share the resources that I found most helpful.

• Gutenberg Handbook: I started my training here to gain a solid understanding of the fundamentals of Gutenberg
  • Pros: Great information about the transform api and the methods you can use to make it less painful to switch over to Gutenberg
  • Cons: Lacked detail about more advanced methods, as well as background about things like the difference between the edit and save functions
• Gutenberg - Live Developer Walkthrough: Next I watched this live walkthrough video which built off the basics of the Gutenberg handbook and dug a bit deeper into those concept
  • Pros:This was a great way to see the application of the information I learned previously. It also went into some more advanced concepts that will be relevant to the type of development work I do regularly.
  • Cons: This still left me with a lot of unanswered questions about attributes. They were mentioned everywhere and clearly seemed important but were not explained well.
• Matt Mullenweg: A Summertime Update: This was a keynote presentation given at WordCamp Europe 2018 by co-founder of WordPress Matt Mullenweg. I initially expected this to be more high-level but it actually provided some really great clarification about some of the Gutenberg questions that had been lingering from my prior training
  • Pros: This is where I was able to get the explanation I was looking for about attributes and some other core pieces. I couldn’t find this info in any of the other tutorials.
  • Cons: In order to really take advantage of all that Gutenberg has to offer, I need to learn more about how Gutenberg uses React. This was more focused on the Gutenberg API.
• React’s Tutorial Site: Understanding Gutenberg’s API is great, but in order to do anything beyond the basics, I knew I would need to learn React and more specifically, how Gutenberg uses React
  • Pros: I really liked that they provide 2 learning maps to choose from to accommodate your learning style: reading extensive documentation (my preference) or a more hands on approach. It also provides CodePen and a code sandbox so you can play around without having to download node and all assets. You can skip the lengthy setup process and jump right in.
  • Cons: Nothing really - this was a great tutorial.
• Facebook’s GitHub: Facebook created React so I thought it would be good to review the code files
  • Pros: This was a great way for me to see what and how they are using React, which helped me get a better sense of best practices
  • Cons: This is the literally the repository so you aren’t necessarily going to get a lot of background information about the reasons behind some of the things you find in the code.
• React Crash Course:This is a free video course by Mosh Hamedami, who is an excellent resource in general for development training. He is very knowledgeable and I have taken online training courses from him in the past
  • Pros: This is essentially a React bootcamp that will take you through a little bit of everything. The tutorials are a great way to expose you to a lot of different scenarios and guide you through how to handle
  • Cons: The only thing this doesn’t really cover is building a CRUD (create, read, update and delete) app. I recommend this video to fill that gap.

Between all of the items above, I felt that I gained a strong understanding of Gutenberg and React that will prepare me for WordPress 5.0. It’s worth noting that there have been some concerns around the accessibility of Gutenburg. WordPress’ Accessibility Team claims that it’s not accessible and therefore not ready for release. The Gutenberg team contends that it is due to React’s accessibility considerations. It remains to be seen if this will impact the release but it’s something we are keeping an eye on as well.

In addition to the highly anticipated Gutenberg update, the other planned enhancements for WordPress 5.0 all seem to be moving towards a more intuitive site-building experience. It’s going to be a pretty major release and I’m looking forward to building some new sites with it!