Design Tools Overview #33447
Comments
mtias
added
[Type] Overview
|
Add VW, VH units for a better responsive design for mobile and tablet will be better to use VW, VH, and %, give this opportunity for those who know what to do with it |
|
Update: included #33687 in the list. |
|
The above issues are also tracked and kept in sync via this project where you can see who is working on them, status, and some tracking notes: https://github.com/orgs/WordPress/projects/10 |
|
I'd like to submit #38990 for the issue. The use case is simple: a beautiful circular image is common in patterns, drag a rectangular image in there and it becomes a sad pillshape. The ticket suggests that if the dimensions are preset and object-fit is set, the replacement image would keep the same dimensions and radius. |
|
#39452 details a few improvements to duotone and filters:
|
|
@jasmussen @apeatling Is there any feature here that you think could still land until Wednesday next week to be included in WordPress 6.0 release? To increase visibility, we can add it to the WordPress Editor 6.0 project board. |
|
@adamziel given @aaronrobertshaw's good work on borders, it seems like #35602 and potentially #21540 could still land. |
|
Hi, what about adding Box Shadow options to this list? As mentioned on #44651 ? |
Some additional considerationsNeeds design / dev:
Needs issue:
|
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#32366The text was updated successfully, but these errors were encountered: