Now that we’ve got the basics of the block built, it’s time to introduce some of the features afforded to us by the WordPress API that allow us to make changes to the visuals of our block. Namely, we want to using block attributes for custom colors.
Sure, up to this point, we’ve bee building the blocks using the WordPress APIs for block creation, serialization, and displaying, but we’ve also hard-coded a lot of our our styling. And when it comes to building custom blocks, sometimes that’s exactly what we want to do.
But other times, we want the users to be able to change, say, the color of their text or the background of their blocks, or maybe both. And the APIs for the Block Editor make this possible. As with the rest of the content of this series, though, it’s not without understanding what’s available to us.
Since this series builds upon itself, I recommend reading and following the previous articles thus far especially if you’re just now stumbling across this content.
So far, these are the things we’ve discussed:
- Required Tools, Plugin Structure, Dependencies, Block Metadata
- The Backend, The Frontend, Functionality, Styles, a Working Demo
- Block Attributes, Editable Content, Components, Editor Styles
- Saving Data, Styling the Frontend
If you’re ready to continue, we’ll get started. Remember, now that we’re this far in the series, I’m working to keep the articles a bit shorter. This is because:
- We’ve laid enough ground work so it’s easier to focus on one thing at a time,
- I find it easier to digest one concept at a time especially when it comes to learning something new, like building blocks as a backend engineer 🙂.
So in this post, we’re going to focus on one new thing: Introducing color options for our block.
Continue reading
