Splitting work on design tools into its own tracking issue and out of #20331, which we are reserving for infrastructure and global styles specifically.
Goal
Design tools encompass all tools related to the appearance of blocks and ranges from colors, typography, alignments, and positioning, to filters like duotone, cropping, and background media. This issue is primarily focused on the creation of shared tools and its consistent application across blocks. Sometimes blocks do require specific functionality which won't generally be part of this overview.
Another important goal of design tools is ensuring a wide range of exquisitely crafted patterns are possible; that best practices are not only possible but encouraged; and that customizing blocks is a consistent and natural experience.
Challenges
The current main challenges revolve around having a robust base component system that allows creating good and accessible design tools; excellent integration with theme.json mechanics; and the ability to naturally handle different viewports.
Tasks
Components
Different Viewports
This has been amply debated in the history of Gutenberg. The current motivation is to lean on intrinsic web design principles as much as possible to eliminate the need for explicit media query handling which can be not only intimidating for users but fragile in the context of patterns unless they use container queries. This is an opportunity to embrace an emerging way of designing for the web that could be more resilient and expressive from a design perspective.
To be brief, these principles revolve around CSS features like flex and grid to ensure elements know how they need to flow
and stack within containers without further instructions, leveraging properties like mixmax and calc for setting layout boundaries, etc. Ideally controls like font size, even if exposed as single values to users in the UI, are built as functions behind the scenes to accommodate different viewport ranges. (Access to the underlying mechanisms is still important for theme and pattern authors. Some of this is already supported through theme.json: min( max( Xpx, Yvw), Zpx).)
Blocks
Layout
Tools
These are general tools relating to background, color, typography, dimensions, gradients, etc.
Done
Splitting work on design tools into its own tracking issue and out of #20331, which we are reserving for infrastructure and global styles specifically.
Goal
Design tools encompass all tools related to the appearance of blocks and ranges from colors, typography, alignments, and positioning, to filters like duotone, cropping, and background media. This issue is primarily focused on the creation of shared tools and its consistent application across blocks. Sometimes blocks do require specific functionality which won't generally be part of this overview.
Another important goal of design tools is ensuring a wide range of exquisitely crafted patterns are possible; that best practices are not only possible but encouraged; and that customizing blocks is a consistent and natural experience.
Challenges
The current main challenges revolve around having a robust base component system that allows creating good and accessible design tools; excellent integration with
theme.jsonmechanics; and the ability to naturally handle different viewports.Tasks
Components
ColorPicker#34284Different Viewports
This has been amply debated in the history of Gutenberg. The current motivation is to lean on intrinsic web design principles as much as possible to eliminate the need for explicit media query handling which can be not only intimidating for users but fragile in the context of patterns unless they use container queries. This is an opportunity to embrace an emerging way of designing for the web that could be more resilient and expressive from a design perspective.
To be brief, these principles revolve around CSS features like flex and grid to ensure elements know how they need to flow
and stack within containers without further instructions, leveraging properties like
mixmaxandcalcfor setting layout boundaries, etc. Ideally controls like font size, even if exposed as single values to users in the UI, are built as functions behind the scenes to accommodate different viewport ranges. (Access to the underlying mechanisms is still important for theme and pattern authors. Some of this is already supported throughtheme.json:min( max( Xpx, Yvw), Zpx).)Blocks
Layout
Tools
These are general tools relating to background, color, typography, dimensions, gradients, etc.
reftokens in the UI. #65723Done
gap#32366