G2 Components, a From-Scratch Reimagining of WordPress Components

Update some of the things.

That was the goal that Jon Quach, a Principal Designer at Automattic, laid out in the roadmap for integrating the G2 Components project into Gutenberg and, eventually, core WordPress. The project is a reimagining of the pieces that make the block editor, a “from-scratch” overhaul of the component system. Updating all of the things or even many of the things at once runs the risk of breaking everything.

“Ideally, what should happen is you should update just some of the things in a very controlled and intentional manner,” wrote Quach in the post. He likened it transitioning a city, section by section, to solar power until the traditional power factory could be shut down. You convert one piece, test, find problems, and correct them before moving to the next section.

That is the plan for integrating G2 Components into Gutenberg.

“G2 Components is a project that embodies the idea of making user interfaces and user experiences better for others,” said Quach. “At the moment, it’s materialized as a Component System designed to work within the context and environments of Gutenberg and WordPress.”

The goal is to provide the resources to improve the Gutenberg project’s UI. Components should make it easier to create newer UIs without hacking together code. Quach said the consistency and experiences of the Component System should scale and have a ripple effect throughout the WordPress platform. This will also extend to third-party block developers.

“The code components are just the starting point,” he said. “My ultimate goal is for this to transcend code and influence and elevate design as well — creating a unified Design System that enables and empowers folks to craft cohesive and feature-rich UI experiences within the world of WordPress.”

Quach believes that platforms have benefited from having similar approaches. He mentioned Material Design by Google as having elevated the Android platform and bringing cohesion across the company’s products.

The Gutenberg team has already started integrating the G2 Components into the project. This integration replaces WordPress components (@wordpress/components) in a controlled manner that should not break existing implementations within the core editor or third-party projects. New components will be swapped in as they become ready. “Like flipping on a switch,” said Quach.

The following video is an hour-long walkthrough of G2 Components that Quach posted on YouTube:

He routinely posts updates on the G2 Components blog. Alongside those are deeper dives into his design thinking on the project. He also talks about the project on his Twitch stream almost daily.

What Are Components?

Screenshot of a component in the G2 Components Storybook.

Components are everything from buttons to toggles to checkboxes. They are standardized pieces that make up the UI of the block editor. They are available for both core and third-party developers to create what end-users see and interact with. However, there was a problem with how the original component system was built.

“The current components aren’t built with a system in mind, but rather, to fulfill an immediate need,” said Quach. “This particular design detail is crucial. A systems-first approach more easily supports the addition of new features, and more importantly, customization!”

The new approach is about building a native design system for WordPress. Such a system would allow anyone to build on top of it and create native experiences.

Quach said one of the easiest ways to look at this is from a backend theming perspective — the Component System also has a theming sub-system. “Instead of the traditional method of writing CSS as a ‘skin’ to layer on top, UI aesthetics can be adjusted through configuration values — similar to how WordPress can be configured with definitions in the wp-config.php file,” he said. “This distinction is important as these values tap directly into the Style system, allowing the styles to load correctly at the right place and at the right time. All without affecting the current environment’s styles, and more importantly, not being affected by the current environment’s styles.”

He was responding to my question on why the component system should be rebuilt from scratch. The idea is to have components that “just work” in an environment such as the WordPress admin, such as making sure the existence of a WordPress theme’s stylesheet does not break components simply by being loaded.

“Why rethink, rebuild, and enhance Inputs, Buttons, Modals, Dropdowns, and others?” countered Quach in response. “So that you the developer don’t have to.”

What Does This Mean For Developers?

Respecting backward-compatibility is something Quach said he took incredibly seriously when designing the architecture of the G2 Components project. He also said it was a part of the integration strategy he proposed.

“I had mentioned that this project ’embodies the idea of making user interfaces and user experiences better for others,'” he said. “Accounting for backward compatibility and supporting third-party migration absolutely falls under the category of user experience.”

As the Gutenberg team continues integrating new components, it should not change what developers have already been doing. However, it could open up some new possibilities.

“The new Component System will definitely help in the UI department,” said Quach. “One area I’m particularly excited about is the rapid-development/prototyping space. Because these Components are self-contained units, they can be brought into platforms like CodeSandbox and they…just…work. You can hit the ground running and rapidly construct and share prototypes (ranging from tiny-yet-mighty to large and in-charge).”

He said he has had success in testing component designs and demonstrating ideas for quick feedback. He has also worked from the opposite direction, building complex components in CodeSandbox and bringing them back into the Component System.

“As a designer and front-end developer, I cannot stress how efficient, effective, and creatively liberating this ‘micro building’ workflow is,” he said. “It’s something I’m excited for others to experience as well.”