Start Prototyping

With some of the recent updates in G2 components, it’s become clear that the library has become a phenomenal tool for rapid prototyping. With the fundamental systems in place (in particular styling and a healthy collection of primitive components), I’ve been able to experiment and create pretty feature-rich experiences. (Some of this was demonstrated in a recent Zoom session.)

For the purposes of prototyping and testing… If you’re interested in giving these G2 Components a try, I’ve prepared some resources for you!

Components Systems

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.


Let’s Create: Layout Stacks (Zoom Session Announcement)

Hi all! I’m planning on hosting another create/code-along Zoom session. For the session, I’m hoping to create a couple of “Layout Stack” components.

I’m planning on starting the call tomorrow (August 12th) at 3PM 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!


Core Systems for Components

For years now, I’ve been thinking very deeply about design systems, with a focus on UI / component libraries. Based on my experience, I believe that a lot of the UI related pain felt by designers, developers, and other contributors, are due to an underdevelopment or even an absence of very important and often under-estimated core UI systems.

Given the context of Gutenberg and the web, it is worth pointing out that working on an application/platform is very different compared to working on a website. The underlying web technologies may be the same (HTML, CSS, JS). The difference is how these technologies come together, especially considering factors like scale (how many people work on it) and longevity (backwards compatibility + legacy support). One way of looking at it is…You probably wouldn’t build, say, Mac OS the same way you would build a restaurant landing page.

With that being said, the goal of this experimental component library (or any component library) isn’t to craft the most elegantly engineered system-obsessed chunk of code. Far from!

These core systems should feel invisible to folks using the library – kind of like an automatic transmission for a car. They exist for the primary goal of providing the best user experience possible – allowing users to do more with less.


Hello World

Hi everyone!

Q here. Hope you’re doing well.

I decided to start this blog as a way to openly share the ideas, strategies, research, and learnings from the experimental G2 Components project.

The project is a from-scratch reimagining of @wordpress/components designed to accommodate the ever-growing and ever-expressive needs of the Editor and the platform. The ultimate goal is to provide a first class workflow to empower developers and designers (both core and 3rd party) to create cohesive, robust, and delightful user interfaces.