{"id":28930651,"url":"https://github.com/rtcamp/blocks-bento-variations","last_synced_at":"2025-07-17T15:38:18.332Z","repository":{"id":42192433,"uuid":"404409992","full_name":"rtCamp/blocks-bento-variations","owner":"rtCamp","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-06T05:59:09.000Z","size":3517,"stargazers_count":2,"open_issues_count":3,"forks_count":0,"subscribers_count":28,"default_branch":"main","last_synced_at":"2023-07-22T01:02:11.772Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rtCamp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-08T15:59:29.000Z","updated_at":"2023-01-18T21:59:49.000Z","dependencies_parsed_at":"2023-01-27T21:31:31.659Z","dependency_job_id":null,"html_url":"https://github.com/rtCamp/blocks-bento-variations","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"purl":"pkg:github/rtCamp/blocks-bento-variations","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtCamp%2Fblocks-bento-variations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtCamp%2Fblocks-bento-variations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtCamp%2Fblocks-bento-variations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtCamp%2Fblocks-bento-variations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rtCamp","download_url":"https://codeload.github.com/rtCamp/blocks-bento-variations/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtCamp%2Fblocks-bento-variations/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261311759,"owners_count":23139485,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-22T15:10:05.360Z","updated_at":"2025-07-17T15:38:18.327Z","avatar_url":"https://github.com/rtCamp.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blocks' Bento Variations\nExperimental Plugin for comparison of Bento based Gutenberg blocks with their non-Bento versions.\n\n[![Total alerts](https://img.shields.io/lgtm/alerts/g/rtCamp/blocks-bento-variations.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/rtCamp/blocks-bento-variations/alerts/)\n[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/rtCamp/blocks-bento-variations.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/rtCamp/blocks-bento-variations/context:javascript)\n\n## Bento Introduction\n\nBento 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.\n\nThe plugin creates new variations of a few selected Gutenberg blocks. The new variations are created using the [Bento components](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/). This allows us to compare the Bento based Gutenberg block with their normal version.\n\n## Technical Details 🔩\nThe aim is to use [the Block Variations API](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/) 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.\n\n## Using the Plugin\n\n### Plugin Files Structure 📁\n\n```markdown\n.\n├── README.md\n├── assets\n│   ├── build\n│   │   ├── css\n│   │   └── js\n│   ├── package-lock.json\n│   ├── package.json\n│   ├── postcss.config.js\n│   ├── src\n│   │   ├── js\n│   │   └── scss\n│   └── webpack.config.js\n├── inc\n│   ├── classes\n│   ├── helpers\n│   └── traits\n├── blocks-bento-variations.php\n└── phpcs.xml\n```\n### Building Assets\nThe assets folder contains webpack setup and can be used for creating blocks or adding any other custom scripts.\n\n- Run `npm i` from `assets` folder to install required npm packages.\n- Use `npm run dev` during development for assets.\n- Use `npm run prod` for production build.\n- Use `npm run lint-js` for linting JavaScript.\n- Use `npm run lint-css` for linting CSS.\n\n\n## Blocks and Their Variations\n\n| Block                                     | Variation          | Is AMP Compatible?  | Dependency             |\n|-------------------------------------------|--------------------|--------------------|--------------------|\n| [Slideshow](https://github.com/Automattic/jetpack/tree/master/projects/plugins/jetpack/extensions/blocks/slideshow) | Slideshow (Bento) | Yes | [Jetpack Plugin](https://wordpress.org/plugins/jetpack/)\n| [Accordion](https://github.com/godaddy-wordpress/coblocks/tree/master/src/blocks/accordion) | Accordion (Bento) | Yes | [CoBlocks](https://wordpress.org/plugins/coblocks/)\n| [Web Stories](https://github.com/google/web-stories-wp/tree/b5dc0dcd9449947062fd43606c052af0773ef2cb/includes/Block) | Web Stories (Bento) | Yes | [Web Stories](https://wordpress.org/plugins/web-stories/)|\n| [Sharing](https://atomicblocks.com/blocks/sharing-icons-block/) | Sharing (Bento) | Yes | [Atomic Blocks](https://wordpress.org/plugins/atomic-blocks/)|\n\n## Roadmap\nAt present, only one block variation has been added, Slideshow. There are many more awesome [Bento Components Available](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/#available-bento-components) that will be used to create new Block Bento Variations of existing blocks.\n\n## Reporting a Bug 🐞\n\nBefore creating a new issue, do browse through the [existing issues](https://github.com/rtCamp/blocks-bento-variations/issues/) for resolution or upcoming fixes.\n\nIf you still need to [log an issue](https://github.com/rtCamp/blocks-bento-variations/issues/new), make sure to include as much detail as you can, including clear steps to reproduce your issue if possible.\n\n## Credits ✨\n\nInspiration from [gutenberg-bento](https://github.com/swissspidy/gutenberg-bento) (By [Pascal Birchler](https://github.com/swissspidy))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frtcamp%2Fblocks-bento-variations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frtcamp%2Fblocks-bento-variations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frtcamp%2Fblocks-bento-variations/lists"}