This is a follow up to the Sidear Controls & Component System post/proposal.

🔗 Quick Links

Projects

• Implementing Core Systems

Information

• Walkthrough video
• Project blog

Code

• Conceptual UI Components Project

📚 Back Story

Over the past couple of months, I've been focused on designing, architecting, and refining a Component System that could serve as the "next-generation" for our humble @wordpress/components library.

This project was a personal initiative that was inspired by my experience + passion in working in Design Systems/UI on my experiences with Gutenberg - specifically in the Design Tools/Global Styles space.

I had originally wrote about it in this post, "Advancing the Editor Interface"
#24341

When I started this project, I didn't know if it was going to be viable - although of course, that was my hope.
Over time, thanks to the interest, support, and collaboration of other folks, it turned out that we may have created something special and that this may actually have a shot!

🗺 Project Walkthrough + Integration ideas

This next-gen. Components project is a lot.
There's a lot of things happening and there's a lot of code.

For those who are interested, I've recorded a video (1 hour long) where I go into detail the important systems and mechanics that make up the entire project, as well as the ideas and plans I have for integrating it successfully into Gutenberg.

https://g2components.wordpress.com/2020/12/02/walkthrough-integration-ideas/

For those who'd like to know more (or see the history of ideas), I created a dedicated blog for this project.
https://g2components.wordpress.com/

(I try to update it at least once a week)

✌️ Gutenberg Integration (aka. "Phase 2")

"Phase 1" was preparing the project to be introduced into Gutenberg. That meant a lot of refactors and adding of essential features and enhancements. We (being @saramarcondes and myself) wrapped this up last week! (:tada:)

Here comes the fun part. Time to (finally) add the code into Gutenberg!

To coordinate this, I'll be creating a dedicated Project board along with issues to track the primary tasks for integration.

"Phase 2" could be thought of as 2 chunks:

1. Bringing over the packages (aka. core systems) needed to power the Component layer
2. Bringing over the Components

I've created a spreadsheet that indicates these tasks mapping to a schedule/timeline:
https://docs.google.com/spreadsheets/d/1gfzznyJtTr3hHoGkGRdeBRjhuZVMRalF9NuLrxkl4Nk/edit#gid=0

We can use this issue as the main top level issue to discuss and coordinate the various phases.

A big thanks to those who've been following along this journey!
As always, feedback is always welcome.

A lot of the core systems and mechanics were made (much) better thanks to feedback from you folks.

Examples including:

• The creation of custom themes for the theming systems
• Z-Index registration for the Style systems
• Improvements to component/environment awareness in the Context systems
• Component composition + state coordination
• Super fast performance rendering
• Improved color management in the Style system
• And much much more!