Design Tools Overview #33447
Projects
Comments
12 tasks
|
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
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
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).)Tools
These are general tools relating to background, color, typography, dimensions, alignment, display, gradients, etc.
Group
Cover
Columns
Separator & Spacer
Buttons
Galleries
Media & Text
Search
Table
Post Title
Post Date
Site Tagline
Featured Image
The text was updated successfully, but these errors were encountered: