Advancing the Editor Interface #24341
Description
Advancing the Editor Interface
Earlier today, I created a Zoom session where I talked about my recent experiences in regards to the Editor's UI.
https://wordpress.slack.com/archives/C02QB2JS7/p1596483182199800
(Thank you @bph , @paaljoachim , @shaunandrews , and @MichaelArestad for dropping by!)
There, I showcased an experimental component library project that embodied spirit of the editor design refresh.
Link to Github Repo
Link to Live Demos
The project is a from-scratch reimagining of @wordpress/components 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.
These components (and their sub-systems) have been uniquely developed to meet the need of integrating seamless into Gutenberg and WordPress. The UI's native-like aesthetic also allows them to be easily customized used outside of the Editor - potentially for 3rd party WordPress plugins and beyond!
The Inspiration
As of November/December of 2019, WordPress Gutenberg has been working on redefining and updating it's design language. It's a movement that refines the experience of the editor, while celebrating the incredible of expressive features unlocked by the humble block.
Since the initial proposal (and rounds of feedback), we began rolling out UI updates to the Editor - starting with the Toolbar. (I was one of the lucky one who helped. What an exciting and experimental experience!). We tried a lot. We iterated a lot. We learned a lot!
The biggest challenge was to apply these updates in systematic way (as far as UI code goes). To do it in a way that made existing implementations more feature-rich and robust, with net-negative regressions as time goes on. A way that simplified implementations for both core contributors and 3rd party block developers.
A way that allowed us to make seemingly simple superficial style changes without arbitrarily and unknowingly breaking 3 UI pieces somewhere else (Haha).
In other words...
To pay the component code the same level of examination and attention to detail as we've done for the Editor's visual designs back in November.
The Systems
The project identifies several core systems that work in concert to tackle the many challenges of crafting user-interfaces:
- A11Y
- Animations + Gestures
- Context
- Styles (Theming)
A11Y
To start, the project relies on Reakit to properly coordinate markup/JS events for a11y needs. Having an robust and reusable A11Y layer helps ensure that it gets correctly implemented across the entire system. (This is just a start!)
Animations + Gestures
Animations are incredibly difficult or orchestrate, maintain, and scale. This library provides highly intelligent, flexible, and easy to use components that help power core experiences (like fade/collapse on remove) or custom experiences like position shuffling!
Context
This system establishes "awareness" for the various components. Depending on where/how they're implemented, they may need to behave differently. Having an interconnected context system natively creates these relationships. This all works without the developer using these components having to do anything.
Styles
An extraordinary amount of consideration was placed on styles, which is often difficult to work with and/or breaks - it's worse when it breaks usability/accessibility. It's extensive (and ultimate) use of CSS variables enables flexible system-wide adjustments.
These systems use a combination of existing battle-tested solutions as well as custom solutions. In order to improve development experience, these systems work were designed to be as "out of the way" as possible. They're available to be used and adjusted through simple interfaces.
Demos
Dark Mode/High Contrast
Creating this components from the ground-up (while identifying and implementing core systems) allows us to have dark mode built-in. Not only that, we can offer a high-contrast mode (which can be used together with dark mode):
Animations
The Animation system provides an easy way to create delightful (high performant) experiences:
Rich Experiences
The goals is to provide a cohesive, expressive, and engaging experience to the Editor (and beyond). This is enabled by offering feature-rich components, out-of-the-box:
Designs
I drew inspiration from the "G2 Designs" Figma file (as well as mockups shared on Github issues + PRs):
https://www.figma.com/file/fnyj380i05vGzuuH60frLQ/G2-Design?node-id=81%3A30
I also drew inspiration from various app + OS interfaces.
More design goal was to create something that felt native-like.
Note: Nothing is set in stone - especially the visual designs. I gave it my best shot ✌️ . Totally open to changes! The more important thing was to work on the various systems to create/render the designs + interactions.
This is just a start!
This experimental/research project was started roughly 2 weeks. The majority of the work involved working on the core systems. (It's still on-going). Thankfully a large portion of the core systems architecture has been solidified, allowing for a rapid explosion in the development of components.
What's Next?
With a base collection of components completed (basically completed), I'm starting to cobble them together to recreate/reimagine Block controls with the Editor:
https://g2-components.xyz/?path=/story/examples-blocks--cover
This enables to me better see how I could better refine the components to accommodate real world (Block) control use-cases.
The libraries have been published to npm (primarily for me to test out the build process, but also to test external integrations).
This means, that anyone is free to give it a try. CodeSandbox is a great platform to tinker with!
https://codesandbox.io/s/wp-g2-yo5gp?file=/src/App.js
Resources / Research
A special thanks to the various folks who have supported me so far! From folks showing enthusiasm/interest in the ideas to folks suggesting features or cool ideas 😎 . Also thanks to all of the projects listed below.
Below is a collection of projects that I've worked on, researched, used, evaluated, or inspected (source code). They're ranked based on my familiarity with them.
Component Libraries
| Name | Description |
|---|---|
| HSDS | Help Scout's Design System. |
| Polaris | Shopify's Design System. |
| Material UI | Community created Google Material library. |
| Chakra UI | Simple, Modular & Accessible UI Components. |
| Ant Design | Open source React UI library. |
| AtlasKit | Atlassian's Design System. |
| Fluent UI | Microsoft's Design System. |
| Rebass | React primitive UI components. |
| Base (Web) | Uber's Design System / Component Library. |
| Evergreen | Segment's Design System / Component Library. |
Style Systems / Compilers
| Name | Description |
|---|---|
| Emotion | High performance CSS-in-JS library. |
| Stylis | A Light–weight CSS Preprocessor. |
| Styled Components | Popular CSS-in-JS library. |
| Theme UI | Standardizing CSS-in-JS systems. |
| PostCSS | CSS post-processing transformer. |
| Compiled | Atlassian's CSS-in-JS solution. |
| Linaria | Zero-runtime CSS in JS library. |
| Treat | Another CSS‑in‑JS with near‑zero runtime. |
| Glamorous | Older CSS-in-JS library. |
| JSS | Alternate CSS-in-JS solution. |
Animation/Gesture Libraries
| Name | Description |
|---|---|
| AnimeJS | JS Animation Engine. |
| React Spring | Spring physics based React animation library. |
| React Use Gesture | Gesture system, complimentary to React Spring. |
| Framer Motion | Framer's animation + gesture library. |
| React Transition Group | Community created transition library. |
| PopMotion / Pose | Simple animation libraries for delightful UI. |
| React Motion | One of the original React animation libraries. |
A11Y Systems
| Name | Description |
|---|---|
| Reakit | Toolkit for building accessible rich web apps. |