Components Updates

Moving Components to Gutenberg (Walkthrough)

Today, I did a Twitch stream where I walked through the process of moving a component from the G2 Component library into Gutenberg – specifically the Grid component. During the move, I touched upon various parts of the system (such as the Context and Style system) as well as highlighted the nuances and considerations between both projects.

I’m hoping this video can provide some insight and guidance for anyone interested in learning more about the new Component System or for anyone who would like to help with the integration.

Video Timestamps

00:00 Intro
01:59 Creating a branch
03:00 Working with Existing vs New Components
04:28 Component Adapter
13:30 Copying over code
17:47 Component Hook Convention
22:25 Hooking into the Context System
30:20 Style System hooks and utilities
32:20 The CSS function
35:20 Resolving classNames with cx
40:00 Create Component
42:12 Connecting to the Context System
44:39 Inline example docs
50:00 Snapshot tests
1:05:33 Exporting and using Component Hooks
1:12:47 Running Unit Tests
1:15:28 Creating a Pull Request

The source code for the G2 Components library can be found here:


Integration Status

Happy New Year everyone 🎉 ! I hope everyone has had some time to take care of themselves and loved ones.

Picking up where we left off… We’re continuing the initial efforts to integrate the G2 Components project with Gutenberg, starting with the FontSizeControl component. We’ve adjusted a couple of details in our strategies to expedite the process a bit (while being aware and cautious for regressions). However, this doesn’t change the direction for the overall integration plans.

New Status Site

Screenshot of the G2 components integration status site.

I’ve been organizing and tracking progress using a public Google Sheet document. To make this a little easier to follow, I’ve created a simple status website that renders that information with a more pleasant UI. And oh yes, that site is 100% built with G2 Components and all of it’s glorious systems.

Status expanded.

Each section (or System) can be expanded to view more granular detail of sub tasks that need to be completed.

The URL for the status website is . It’s also been added to the top of this project blog under the navigation link of “Status”.

Screenshot of G2 project blog.

As always, feedback is always welcome :).

P.S. Curious how the site was created? Check out the source code on Github!


Walkthrough + Integration Ideas

Earlier today, I had Twitch streaming session where I did a deep dive into the heart of the G2 Components project. I walked through the core systems and mechanics for the G2 Components project – Accessibility, Animations, Context, Gestures, Styles, and State (and Utils).

These systems aren’t unique in concept, but their implementation details are unique to the project. This is because, as a platform, WordPress and Gutenberg are unique. These are environments with a mountain of UI challenges and requirements – many of which cannot be holistically accommodated out-of-the-box with existing UI libraries or frameworks. This ultimately led to the designs and innovations that form the core systems, acting as the foundations of the entire Component library.

After the foundations were sound, we had to then strategize how we could deliver the component system in a way that did not disrupt the workflow for folks working on the platform (both core and 3rd party). After going over the basics of the system, we hop on over to the various charts and maps that detail how the project would potentially be integrated into Gutenberg in a highly controlled manner.


Project Maps and Progress

It’s been another exciting week for the G2 Components project! As of today, we’ve essentially completed the first of four phases for G2 x Gutenberg integration (the “Prep” phase). In addition to continuing design and development improvements, I’ve worked on expanding, clarifying, and refining the roadmap and task coordination efforts I mentioned last week.

For this post, I’m sharing my ideas on how tasks are coordinated and how folks can follow along.


Gutenberg Integration + Typography Tools (Roadmap)

I’ve been waiting for this moment for a long time. After several months of researching, collaborating, building, testing, and iterating, the G2 Components project is nearing a stage where we can confidently map out the initial integration with Gutenberg!

Working with Global Styles and Design Tools had helped me understand many of the complexities and challenges that come from systemizing a UI layer that could accommodate the expansive and open nature of WordPress and the Gutenberg editor. As such, I believe in the importance of introducing G2 Components to Gutenberg in a way that demonstrates user-facing value. I wanted to provide improvements to the UI experience that end-users could see and feel, rather than a revamped architecture that was superficially invisible.


Power Up! (G2 Updates)

G2 Components has had a fury of updates, as it prepares for the potential integration into Gutenberg! The nature of this work varied touching upon different areas along the spectrum that makes up the Component Layer that is G2.

Important system level requirements were addressed (or acknowledged), like automatic CSS variable generation for IE11 or automatic RTL styles. Developer experience received a boost with better type support. Most importantly, a lot of development and planning centred around how G2 Components could integrate with the Gutenberg project with minimal (ideally zero) disruption to the current systems in place.