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
59:40 README.md
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: https://github.com/itsjonq/g2
G2 Components 
One reply on “Moving Components to Gutenberg (Walkthrough)”
[…] project for a while. This week, Q took a live audience on a Twitch walk-through of the process of Moving Components to Gutenberg (Walkthrough). The post has the recording and an outline of the show. It’s fascinating for me, although I […]
LikeLike