Last week, we released “Color Palette Block,” which enables users to create and share color palettes quickly from the WordPress Gutenberg editor. Post that we have been experimenting with the Gutenberg extensibility API. The Gutenberg development team is working hard on each release and adding more power to the upcoming editor. The last few releases added an extensibility API to extend Gutenberg/ blocks via plugins.
Currently, we are working with a few clients to explore migrating their existing websites to Gutenberg. During brainstorming, one thing that was discussed was the option to have gradients & images as a block background. We have been playing around with the extensibility API & this was the perfect opportunity for us.
Pravin Prajapati from the team is familiar with page builders and has used “Visual Composer”? & “Beaver Builder” so he came up with the wishlist of options:
- Gradients as background
- Image as background
- Solid color overlay on the image background
- Gradient color over the image background
Digging into Gutenberg Documentation & code, we were able to implement our wishlist.? It’s not a perfect implementation, but a good experimental attempt.
Background options might not work on all blocks or might break a few.
Check out Block Background in action:
Want to play around with “block background”? Head over to our Gutenberg playground: https://gutenberg.lubus.in/
Block is available for download on the WordPress plugin repo https://wordpress.org/plugins/block-background/
Want to dive into the code and explore how it works? The code is open source on GitHub?https://github.com/lubusIN/block-background
Stay tuned for more Gutenberg goodies, as we are working on another experimental plugin exploring the extensibility API. 🙂
Leave a Reply