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:


By Q

I specialize in Design Systems, Interaction, and UI.
I'm a Principal Designer at Automattic.

One reply on “Moving Components to Gutenberg (Walkthrough)”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s