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