Prototyping – Swipeable “Action Sheet” UI for mobile (web)

On today’s live Twitch stream, I roughly prototyped an idea to improve menus and dialogs for the mobile web.

The motivation originated from conversations I’ve had with @diegohaz – specifically on ideas of how we could improve the accessibility of dropdown menus on phones. This led to some design research into the world of native mobile (iOS/Android), and seeing how we could bring those experiences to the mobile web.

The ending result was far from pretty. However, the exercise was helpful in identifying the important mechanics of creating this flow. Mechanics such as synchronizing swipe distance and overlay animations, establishing “thresholds” for collapse/expand actions, height and positional offset calculations, and possible cross-component layered rendering.

P.S. A big shoutout to @timothybjacobs for dropping by!

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

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 https://status.g2-components.com/ . 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.

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 https://www.twitch.tv/itsjonq

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 :).

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.