Bento vs Non-Bento Gutenberg Experiment

Bento AMP offers well-tested, cross-browser compatible and accessible components that can be used on non-AMP pages without having to use AMP anywhere else. Bento components are designed to be 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 the React-based Gutenberg editor.

Typically, with Gutenberg one has to write a block’s Edit component in React and then replicate the same look and feel for the frontend without React, causing a lot of duplicate work. With Bento, this is no longer a problem.

The purpose of this site is to compare the page experience when the below combination of environments are in play. The Jetpack Slideshow block has been used for this experiment and a related Bento version has been created for comparison purposes.

• AMP + Bento Block
• Non-AMP + Bento Block
• AMP + Non-Bento Block
• Non-AMP + Non-Bento Block

Join us while we continue to explore and check out the repository for more details.