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
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

Advertisement

The Tiny Yet Mighty “as” Prop

Component libraries, frameworks, and toolkits share a common goal. That goal is to provide users with the ability to do cool things with less work. G2 Components is no different in that regard!

They can provide power by focusing and abstracting away complexity (like MATH!). They can provide UI cohesion by building upon and encouraging specific usage patterns. They can also provide safety nets by understanding multiple use cases and supporting those use cases with sensible defaults.

One of the biggest challenges (if not the biggest) is to do all of this while being as flexible as possible. As far as React UI is concerned, I can’t think of another pattern that does this better than the humble “as” prop.

Creating Avatars

In today’s Zoom session, I streamed the design and creation process for creating a new Avatar component for G2. This Avatar goes beyond air-bending an image in a circle. Earlier on in the session (but also throughout), we detailed some flexible, intelligent, and DX (designer/developer experience) features, including:

• Name to initial rendering (e.g. Eileen V. to EV)
• A range of default (preferred) sizes, which can be customized
• A set of shape variations (e.g. Circle or Rounded Square)
• The ability to render a “status dot” in the top corner
• Tooltip that appears to display the full user name
• An AvatarGroup that will stack and layer Avatars within

Designing Draggables, Droppables, and Sortables

Drag gestures are becoming increasingly more popular in Web UIs – and for good reason! They’re super easy to use! They extend the fluid “life-like” experience we’ve become accustomed to from the mobile/tablet world. Therefore, it’s important that this library includes a solid and flexible drag / drop / sort system.

The funny thing is… Drag/Sort systems are almost always excluded from Component libraries. The main reason is… well… because they’re heavy and complicated (aka. really hard!). I believe taking on this complexity is worth it as we’ll be able to provide users with an easy to use + powerful way to create highly interactive experiences – be that in Gutenberg’s UI, custom Block controls, WP Admin, and beyond.

Creating Smart Layout Components (HStack, VStack, and ZStack)

In today’s Zoom session, I streamed the design and creation process for creating a handful of SwiftUI inspired layout components for G2: HStack, VStack, and ZStack. These components are designed to enable users to create many layout UI variations with very little code.

What are these stacks?

Source: Design+Code

HStack aligns items in a horizontal fashion.

VStack aligns items in a vertical fashion.

ZStack stacks items in a layered fashion.

Each layout stack component renders with smart defaults to accommodate the most common use-cases for each layout type.

HStack and VStack provide a property called spacing, allowing the user to add (you guessed it) spacing in-between each item as needed.