Blocks' Bento Variations

Experimental Plugin for comparison of Bento based Gutenberg blocks with their non-Bento versions.

Bento Introduction

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.

The plugin creates new variations of a few selected Gutenberg blocks. The new variations are created using the Bento components. This allows us to compare the Bento based Gutenberg block with their normal version.

Technical Details 🔩

The aim is to use the Block Variations API for creating the Bento variations of the blocks. Then, to modify the Bento variations' markup to use the Bento components on the Front-end. The use of the Block Variations API reduces efforts of re-creating the block's Editor functionalities.

Using the Plugin

Plugin Files Structure 📁

.
├── README.md
├── assets
│   ├── build
│   │   ├── css
│   │   └── js
│   ├── package-lock.json
│   ├── package.json
│   ├── postcss.config.js
│   ├── src
│   │   ├── js
│   │   └── scss
│   └── webpack.config.js
├── inc
│   ├── classes
│   ├── helpers
│   └── traits
├── blocks-bento-variations.php
└── phpcs.xml

Building Assets

The assets folder contains webpack setup and can be used for creating blocks or adding any other custom scripts.

• Run npm i from assets folder to install required npm packages.
• Use npm run dev during development for assets.
• Use npm run prod for production build.
• Use npm run lint-js for linting JavaScript.
• Use npm run lint-css for linting CSS.

Blocks and Their Variations

Block	Variation	Is AMP Compatible?	Dependency
Slideshow	Slideshow (Bento)	Yes	Jetpack Plugin
Accordion	Accordion (Bento)	Yes	CoBlocks
Web Stories	Web Stories (Bento)	Yes	Web Stories
Sharing	Sharing (Bento)	Yes	Atomic Blocks

Roadmap

At present, only one block variation has been added, Slideshow. There are many more awesome Bento Components Available that will be used to create new Block Bento Variations of existing blocks.

Reporting a Bug 🐞

Before creating a new issue, do browse through the existing issues for resolution or upcoming fixes.

If you still need to log an issue, make sure to include as much detail as you can, including clear steps to reproduce your issue if possible.

Credits ✨

Inspiration from gutenberg-bento (By Pascal Birchler)