Although Gutenberg is put together with React, the code we’re writing to make custom blocks isn’t. It certainly resembles a React component though, so I think it’s useful to have a little play to get familiar with this sort of approach. There’s been a lot of reading in this series so far, so let’s roll-up our sleeves and make something cool.
Let’s dig into this ES6 world a bit, as it’s ultimately going to help us understand how to structure and build a custom Gutenberg block.
Controlling scope is something you probably don't tend to consider when working with CSS and Sass. We have had access to the ampersand (
&) for quite some time now, which gives us a level of scope—but it's easy for it to lose its usefulness when you're nested quite deeply. The
& can send us down a windy road of doom when we completely lose track of what it means and can be responsible for some really heavy bloat.
When Chris wrote his idea for a Boilerform, I had already been thinking about starting a new project. I’d just decided to put my front-end boilerplate to bed, and wanted something new to think about. Chris’ idea struck a chord with me immediately, so I got enthusiastically involved in the comments like an excitable puppy. That excitement led me to go ahead and build out the initial version of Boilerform, which you can check out here.
For a beginner, accessibility can be daunting. With all of the best intentions in the world, the learning curve to developing compliant, fully accessible websites and apps is huge. It's also hard to find the right advice, because it's an ever-changing and increasingly crowded landscape.
I've written this post to give you some tips on small things that can make a big difference, while hopefully not affecting your development process too much.