Design Tools Overview

[mtias]

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

• Sidebar Controls & Component System #27331
• Implementing a Component System #27484
• Advancing the Editor Interface #24341
• Updated ColorPicker #34284 ⚠️

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

• Fluid Typography Option #24480 ⚠️
• Tracking: fluid typography  #44888
• Responsive blocks & intrinsic web design #34641

Blocks

• Scrolling Marquee Block #41730
• New Block: Slider Container (CSS based) #43369
• Add Shape Divider block #16351
• Add an Icons block #16484

Layout

• Tracking further improvements to Layout support #57571
• Grid Layout Improvements #57478

Tools

These are general tools relating to background, color, typography, dimensions, gradients, etc.

• Add Box Shadow Component #44651
• Add text indentation support at paragraph block type level #37462
• Dimension Tools and Controls #28356 ⚠️
• Add a block support for dimension settings #26368
• Allow selecting and connecting ref tokens in the UI. #65723
• Tracking: Improve visual feedback on Design Tools #41093
• Site Logo: add width unit support (percentage, viewport units, etc) #49281
• Navigation block: current menu item styles #42299
• Cover: Move color controls to the toolbar #20837
• Tracking: Aspect Ratio #48079
• Make "Background Tools" an easy API and add to Group / Columns #16479
• Gradient Tool: Add Radial Direction Option  #24049
• Standardized way to modify interactive states (:hover, :focus .etc) for blocks #38277, Consider a standardized way to modify hover/focus/active states for blocks #27075
• Duotone: Duotone filter button should always be at the end #31373
• Multi-column Post Excerpt #25459
• Add gradient support to the paragraph TEXT #30982
• Table: Continued enhancement of color options #31261
• Media & Text: Add Full-Height & Alignment Options #32521
• Spacer Block: Update UI to support editing complex height & width #37303
• Make it possible to customize input fields in any block #44671
• Expand Search block customization #22071
• Add options to offset block margins. #24504
• Add patterns as an overlay option in addition to colors and gradients #38577
• Extend theme.json to provide spacing size presets #39371
• Cover: Set custom color when applying initial background image #44167
• Background Editor for Cover block #20193
• Separator: move color tools to the toolbar #20757

---

Done

• Typography Tools: Tracking #34345
• Represent default font size in slider #44229
• Typography Tools: Tracking defaults for blocks #35604
• Image Block: Surface aspect-ratio tool for custom image dimensions #38990
• Add a way to rotate text #20926
• Tracking: ToolsPanel Follow Ups #36165
• Border Controls: Design Refinements #35602
• Order of "supports" panels #35541
• Add background colour transparency to blocks that support background colour #18095
• Allow showing default palettes in addition to theme ones #28416
• Add quick uppercase option #20801
• Block Styles: Show style preview when hovered or focused #33933
• Consolidate typography and text settings panels within the Paragraph block #23767
• How to absorb font size units #25137 Add relative units for font size option #23323
• Add a way to control letter spacing #20796
• Add a way to add inline text background color #20835
• Global Styles: Consider supporting gap #32366
• Refine border style dropdown design #31333
• Allow borders on image, group, cover blocks #21540
• Flex Layout Iterations #33687
• Fixed Position Header and Footer Template Parts #30121
• More Block Tools and APIs for container blocks. #27324
• Contextual Block Padding (Spacing) Controls #33221
• Replicate Figma's "Auto Layout" feature for containing blocks #21494
• Suggestion: Simplify the layout concept #36082

[promocot]

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]

Update: included #33687 in the list.

[apeatling]

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]

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.

[jasmussen]

#39452 details a few improvements to duotone and filters:

• Multiple filters
• Clearing selected filters to theme defaults
• A new Filter icon suggestion

[adamziel]

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

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

[Jabe64]

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

[jameskoster]

Some additional considerations

Needs design / dev:

• Color picker handle issues #49267
• Navigation Overlay customisation via Template Parts #43852
• Add ability to style and/or use a custom icon for responsive menu  #37930
• Global Styles: Add alignment support in global typography styles #48202
• Home Link block: add more shapes & allow inserting anywhere #49282
• Allow Next / Previous Page blocks to entertain an icon-only or text-only display #49266
• Improve consistency of alignment tool placement #49272
• Negative margin in dimension controls #32644

Needs issue:

• Add a shortcut to make containers full-height. vh is not intuitive.
• Enhance the Image → Cover transform flow UX. Surface options (duotone, overlay, etc). Could be connected with patterns.
• Explore more preset designs for Separator block.
• Cropping: add handles to the image boundaries for resizing.
• Aspect ratio control: surface focal point picker when relevant. (Add to Tracking: Aspect Ratio #48079).
• Comment Next Page and Comment Previous Page: allow an icon-only appearance.
• Bug: When the Cover block Matrix control is set to anything other than center the width of child blocks is unexpectedly changed.
• Text-shadow.
• Blur tools, e.g. for Cover backgrounds.