Bento + WordPress

BENTO + WORDPRESS

High performance Bento web components as foundation for Gutenberg blocks

PROJECT DESCRIPTION

The Bento project provides a set of easy-to-use and highly performant open source web components that can be used to accelerate web development and reliably produce web sites with great page experience.
This project aims to use these web components as the technical foundation for the design elements (blocks) in the Gutenberg editor, the default content editor for the WordPress project. By doing so, we want to build a starter website template that gets you started with full performance benefits.

To ensure we uncover all technical difficulties for such an approach and produce a usable outcome at the end of the Hackathon, we are defining a particular (tightly defined) business domain we want to solve for and then scope our implementation vertically across that entire domain. We’ll start with the most naïve implementation possible, and then gradually strengthen this with Bento components and the use of PX-improving best practices.

Some highlights of what to expect for this project:

  • Architecture that incorporates both (P)React-based editor integration and Web-Component-based frontend markup generation.
  • Version management of Bento dependencies as they are used by Gutenberg blocks.
  • Server-side rendering within the context of Gutenberg’s content persistence.
  • Exploring technical aspects of Bento like Declarative Shadow DOM in the context of Gutenberg.
  • Scaffolding/tooling to enable quick replication of the produced starter site (maybe we can convince one of the hosters to even host a one-click solution?)
  • CI/CD to deal with iterative development and automated testing.
  • Performance auditing and profiling to identify bottlenecks and to ensure the implementation yields the expected benefits.
  • Prepare blocks for possible integration into the Block Directory
  • Documentation of the findings about Gutenberg extension, use of Bento within WP, versioning of block-internal dependencies, …

HACKATHON GOALS

The goal would be to create a starter template that makes it easy to quickly set up a WordPress website that has excellent Page Experience scores right out of the gate, by powering Gutenberg blocks via a solid Bento components foundation.

TARGET AUDIENCE

The main target audience for this project consists of web developers wanting to build better tooling for creating performant WordPress sites. Languages used will be mostly JavaScript and some PHP.
In addition, we’ll need to cover CI/CD tooling and shell shenanigans for the scaffolding, which may include containers and other related technologies.
We also will need both design and copywriting skill sets to produce the actual website that is to be built.

PROJECT LEAD

Pascal Birchler is a Developer Relations Engineer at Google, where he is working on helping content creators succeed on the web. He’s been working with WordPress for half of his life and is an avid member of the community and contributor to WordPress itself.

Alain Schlesser is a freelance software engineer, WordPress consultant and Google Developers Expert in Web Technologies living in Germany. He is the maintainer of WP-CLI, the command-line interface for WordPress and works on WordPress Core itself as a contributor and component maintainer.

TAGS

gutenberg
web_com
performance