search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.25k stars 4.09k forks source link

Design Tools Overview #33447

Open mtias opened 3 years ago

mtias commented 3 years ago

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

promocot commented 3 years ago

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

mtias commented 2 years ago

Update: included #33687 in the list.

apeatling commented 2 years ago

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

jasmussen commented 2 years ago

I'd like to submit https://github.com/WordPress/gutenberg/issues/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.

jasmussen commented 2 years ago

39452 details a few improvements to duotone and filters:

adamziel commented 2 years ago

@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.

jasmussen commented 2 years ago

@adamziel given @aaronrobertshaw's good work on borders, it seems like #35602 and potentially #21540 could still land.

Jabe64 commented 1 year ago

Hi, what about adding Box Shadow options to this list? As mentioned on #44651 ?

jameskoster commented 1 year ago

Some additional considerations

Needs design / dev:

Needs issue: