Categories
Updates

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.

Categories
Updates

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.

Categories
Updates

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.

Categories
Design Systems

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.

Categories
Announcements

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

Categories
Styles Systems

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.

Categories
Design

Designing UI Interactions

In this zoom session, we explore some techniques in planning and designing UI interactions.

The design challenge for today was to simulate a typical workflow that happens with a design to development hand-off. We pretended that we were submitting designs for Google’s search interface.

Inconsistencies and degraded experiences often stem from miscommunication or misinterpretation (either from the design side, or the development side). Our goal is to clarify our designs by complementing static mockups with interaction and state diagrams and thoughtful naming of assets (e.g. Figma layers).

This involved being drilling into the details and being thoughtful on every interaction as it relates to user expectations, accessibility, and encouraged interaction behaviours. It also involved being mindful of the next people receiving our design work, and providing them with the context and information they need to be successful.

Categories
Announcements

Designing UI Interactions (Zoom Session Announcements)

Hi all! I’m planning on hosting another design Zoom session. For the session, I’m going to be sharing some techniques in planning and designing UI interactions.

UI interactions can be extremely complex. There can be so many different actions a user can perform. A great example would Mac OS Spotlight or Google’s search bar.

Considering and supporting certain flows are fundamental to making experiences feel intuitive and delightful. Funny enough, it’s common for these details tend to be forgotten about during the creation of these interfaces. It’s almost impossible to effectively communicate these nuances in traditional static design to development hand-offs. Even sophisticated Figma prototypes fall victim to this.

In this Zoom session, we hope to demonstrate how we can improve this workflow, using nothing more than a pen, some paper, and a bit of imagination.


I’m planning on starting the call on Tuesday, October 20th at 1:00PM 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!


Categories
Experiments

Experimenting with Theme.json Creator

In this zoom session, we explore some interesting enhancements for the recently created experimental Gutenberg Theme.json creator.

For context, this tool was inspired by the new theme.json support for Gutenberg. The idea was to provide a UI to tinker, customize, and share Gutenberg configurations.

This was an incredibly informal design/code session. I went into it with a couple of goals:

  • Adding a simple Live Preview
  • Theme switching? (e.g. TwentyTwenty, TwentyNineteen)
  • Explore color tooling!
  • Explore typography scaling

We were able to hack our way to accomplish most of those features. The most interesting and visually impressive feature was adding the ability to drag and drop an image to automatically generate a color palette. Because of the new Preview, we were able to see the color swap live in the browser! Neat.

GIF demonstrating the drag/drop of a photo of strawberries into the Theme.json creator. This generated a series of colours which can be seen in the live preview.

P.S. If you’re curious about the updates from today’s session, you can find the source code here.

Categories
Announcements

Exploring Theme.json Creator (Zoom Session Announcement)

Hi all! I’m planning on hosting another create/code-along Zoom session. For the session, I’m hoping to explore some fun and funky ideas for the recently created Theme.json creator.

The Theme.json creator was an experimental something I put together one afternoon because I felt like it may be helpful with the new theme.json based configurations with Gutenberg. I’m not sure what the long term plan for this particular project would be. So far, it’s been wonderfully helpful from a Design Tools and G2 Components exploratory perspective (the UI was created with G2!).


I’m planning on starting the call on Friday, October 9th at 2:00PM 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!