Last week saw the launch of Bento, an easy to use component library that helps you achieve a great page experience.
Today, I would like to share some thoughts on how Bento components can be used in Gutenberg in order to reduce development and maintenance costs while at the same time ensuring great user experience (UX) and page experience (PX).
In addition to the core blocks available natively in Gutenberg, developers can create custom blocks for use in the editor. Typically, with Gutenberg you have to implement the same functionality twice, first by creating a block’s Edit component in React and then by re-implementing the same look and feel without React for the frontend. This causes a lot of duplicate work and additional maintenance burden, and potentially even some disparity between the two versions.
This is where Bento comes into play.
Developed by the AMP project, Bento offers well-tested, cross-browser compatible and accessible web components (aka custom elements) that can be used on any website. They are highly performant and contribute to an excellent page experience.
These components are not only available as custom elements, but also as React and Preact components with the same features and API. That makes them an ideal candidate for use in Gutenberg.
You can read more about it on the new Bento blog.
Building a Bento Gutenberg Block
Since Bento and Gutenberg make such a great couple, there is even a dedicated guide on how to create Gutenberg blocks using Bento.
It is the result of a proof-of-concept Bento-powered Gutenberg block I have been working on over the last couple of months. In that article you learn how to apply these learnings yourself. You may also skip this part and jump straight to the repository containing the final code of that tutorial.
I hope these examples give you a better sense of Bento’s potential for Gutenberg block development and I am looking forward to sharing more examples and solutions in the future as the component library evolves.
Leave a Reply