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.

Design Systems

The Path To Integration

After months of careful planning, experimentation, designing, and testing, G2 Components is at a stage where all of the various systems and parts are coming together. The next phase is to integrate with Gutenberg (hopefully!). Integration planning is one of those hyper important things that is often left to the very end. It’s a crucial aspect that ultimately determines the success of a project like G2 Components.

UI Integration, and all of its nuances, constraints, and pitfalls, is something that I was well aware of before even starting down this G2 Components path. Many of the core mechanics and systems of G2 have been shaped around these considerations.


G2 on Twitch

Recently, I’ve attended a couple of Twitch streams hosted by Helen Hou Sandi (she’s a Director of Open Source Initiatives at 10up and WordPress Lead Developer). They were a lot of fun! It has inspired me to give Twitch a try and stream and share my work within G2 Components.

You can catch the streams at

It’s worth noting that I’ve never formally streamed on Twitch before. My live coding/streaming experience hasn’t extended beyond YouTube. It’ll be a new experience for me. I’m not sure what’s best for scheduling or moderating, or what services and setups I should use.

For those who may be tuning in, thank you in advance for your patience and support as I figure this out :).

Styles Systems

Creating a Variable System

Working with globalized variables maybe one of the trickier aspects to any design or code project. It’s sort of like accumulating a collection of a particular collectable, say Pokemon cards. It’s cool that you can collect these cards! I mean, who wouldn’t want an original 1st edition base set Charizard. As your collection grows, without some sort of organization system, say a binder, it may become difficult to find cards you want. The same can be said about variables. It’s not enough to support it as a feature. You also have to encourage or provide a framework for maintaining them.


Designing UI Interactions

In this zoom session, we explore some techniques in planning and designing UI interactions.

The design challenge for today was to simulate a typical workflow that happens with a design to development hand-off. We pretended that we were submitting designs for Google’s search interface.

Inconsistencies and degraded experiences often stem from miscommunication or misinterpretation (either from the design side, or the development side). Our goal is to clarify our designs by complementing static mockups with interaction and state diagrams and thoughtful naming of assets (e.g. Figma layers).

This involved being drilling into the details and being thoughtful on every interaction as it relates to user expectations, accessibility, and encouraged interaction behaviours. It also involved being mindful of the next people receiving our design work, and providing them with the context and information they need to be successful.


Designing UI Interactions (Zoom Session Announcements)

Hi all! I’m planning on hosting another design Zoom session. For the session, I’m going to be sharing some techniques in planning and designing UI interactions.

UI interactions can be extremely complex. There can be so many different actions a user can perform. A great example would Mac OS Spotlight or Google’s search bar.

Considering and supporting certain flows are fundamental to making experiences feel intuitive and delightful. Funny enough, it’s common for these details tend to be forgotten about during the creation of these interfaces. It’s almost impossible to effectively communicate these nuances in traditional static design to development hand-offs. Even sophisticated Figma prototypes fall victim to this.

In this Zoom session, we hope to demonstrate how we can improve this workflow, using nothing more than a pen, some paper, and a bit of imagination.

I’m planning on starting the call on Tuesday, October 20th at 1:00PM EDT. The call may last 60-75 mins or so.

These Zoom hangouts sessions are very free-form! Everyone is welcome to join, engage, ask questions, and play! For those who can’t make it, no worries. I’ll be recording the call and uploading it to YouTube

I’ll share the Zoom link in this post (and on Slack) before the time of the call.

See you then!