Study WordPress Style Engine, Design Library and System in progress

[eliot-akira]

Figma files

• Core WordPress Design System - In Progress
• WordPress Design Library
• Design Handbook - Tools: Figma

WordPress admin redesign

• Advancing the WordPress Design System
• Admin Design Kickoff

We have an opportunity to take customisation and even private labelling to the next level.

How might we design WordPress in such a way that it can be tailored and rebranded to a point where it feels like an entirely new product focused on a specific use case?

Gutenberg

• Phase 3: WordPress admin redesign  WordPress/gutenberg#53322

Due to the customisable and extendable nature of WordPress admin its important it has a strong system at its core.

We should aim to iterate on the existing WordPress components package which can evolve into a fully fledged, themeable system with accessibility baked in that plugin authors can refer to and make use of. This also includes variables for generated color scales (ideally with a high contrast option), spacing, shadows etc.

Tokens/Variables - Variables make up the foundation of the system and give admin its character. Our set of primitive components need to work in dense environments like the editor, as well as environments that need more breathing room and focus like admin.

..If we want to lean heavily into customisation, and support themes including dark, we may need to extend the system and take a more programmatic approach.

• Theme package for generating admin themes WordPress/gutenberg#54541

Introduces a theme package that aims to standardise how we name, generate and use the css variables that make up the foundation of an admin theme.

Theme provider - This also includes a very lightweight theme provider that is used to generate theme variables which are included in a CSS class added to document head.

• Admin redesign: Settings WordPress/gutenberg#63624

In the context of the wider admin redesign, a scalable, portable, and responsive design pattern for settings pages is crucial. This issue outlines some foundational principles and design conventions for such a pattern.

• Design system - Colour scales WordPress/gutenberg#53612
• Design system - Page layout WordPress/gutenberg#53617

Block themes and styles

• Block Editor Handbook / Explanations / Architecture / Styles in the Editor
• Theme.json Version 3 Reference (latest)
• Theme.json - Available Styles Options
• Block API - Supports

Block Supports is the API that allows a block to declare support for certain features. Opting into any of these features will register additional attributes on the block and provide the UI to manipulate that attribute.

• Style Engine: @wordpress/style-engine

The Style Engine aims to provide a consistent API for rendering styling for blocks across both client-side and server-side applications.

Initially, it will offer a single, centralized agent responsible for generating block styles, and, in later phases, it will also assume the responsibility of processing and rendering optimized frontend CSS.

• Consolidate global and block style rendering and enqueuing
• Explore pre-render CSS rule processing with the intention of deduplicating other common and/or repetitive block styles
• Extend the scope of semantic class names and/or design token expression, and encapsulate rules into stable utility classes