-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Closed
Labels
[Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experiTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Type] Tracking IssueTactical breakdown of efforts across the codebase and/or tied to Overview issues.Tactical breakdown of efforts across the codebase and/or tied to Overview issues.
Description
Tools:
- Font
- Size
- Line Height
- Appearance/Weight/Style
- Letter Spacing
- Letter Case
Components
- Iterate on
ToolsPanel- Dimensions Panel: Add new ToolsPanel component and update spacing supports #32392
- ToolsPanel: Refining the component's behaviour #34257
- InspectorControls: Wrap block support slots in ToolsPanel #34157
- ToolsPanel: Add tools panel item deregistration #34085
- ToolsPanel: Allow SlotFill injection of panel items #34632
- ToolsPanel: Refine component behaviour #34530
- ToolsPanel: Remove / re-register panel items if the panelId changes #34726
- ToolsPanel: switch to plus icon when no controls present in panel body #34107
- ToolsPanel component: refactor to typescript #34028
- ToolsPanelItem: Add panelId check before calling toggle methods #35375
- Block Supports: Switch dimensions inspector controls slot to bubble virtually #34725
- ToolsPanel: improve unit tests #35057
- ToolsPanel: move away from hardcoded classnames #35058
- Switch to using
Gridcomponents for layout - Audit and improve
ToolsPanel's a11y #38059
- Use
ToolsPanelto render typography tools.- Fix display of existing font size and line-height controls when in
ToolsPanel( PR: #35451 ) - Typography Tools: Tracking defaults for blocks #35604
- Fix display of existing font size and line-height controls when in
- Storybook: Add story for TypographyPanel #35293
- Package an exportable, reusable
TypographyPanelcomponent using the components that are already available (similarly to what done for theDimensionsPanel). Use this component as a "living reference" for iterating on each component - Font size controls:
- When picking a font size from a list of predefined sizes, show either a ToggleGroup control (< 6 sizes) or a dropdown control (>= 6 sizes) (see screenshots below and this early WIP prototype)
-
ToggleGroupControl: asses if it fulfills all design/UX requirements -
CustomSelectControlmay be used for the custom dropdown- Fix initialValue computation when not passing an explicit value (PR Components: fix selected value computation in
CustomSelectControlwhen no initialvalueis set #34490) - Convert to TS + Emotion?
- Add unit tests?
- Asses current look vs design (the needed design may not currently be possible, since the contents of each select option can currently only be specified as a string of text)
- Asses API design (e.g. options passed as a prop vs
CustomSelectControlOptioncomponent)?
- Fix initialValue computation when not passing an explicit value (PR Components: fix selected value computation in
-
- When picking a custom font size (instead of picking for a list of predefs), show an input + slider
- FontSizePicker: Improve size/alignment of controls #23908
- Asses if
FontSizePicker(and thereforeUnitControlandRangeControl) need any amends / design updates
- Remove reset button and rely on
ToolsPanelreset functionality
- When picking a font size from a list of predefined sizes, show either a ToggleGroup control (< 6 sizes) or a dropdown control (>= 6 sizes) (see screenshots below and this early WIP prototype)
-
NumberControl:- Columns slider: Number of columns reset to 1 when using Tab+Shift #34363 (related PR Remove shift-stepping from range in RangeControl #35020)
- Components: support
step="any"inNumberControlandRangeControl#34816 (related PR Support "any" step in NumberControl and RangeControl #34542) - components: Add baseline validation to NumberControl #33291 (related PRs: Fix NumberControl validation #34128 and Update
NumberControlstepping to match HTML number input stepping #34566) - Components: update the rounding logic for
shiftkey increments inNumberControlandRangeControl#34817 - agree on next steps (e.g. update design)
-
ToggleGroupControl -
FontAppearanceControl - Update styling
- Sub-project: Typography panel: Component upsizing #36230
- UnitControl: Update unit dropdown design #42000
- CustomSelectControl: Make chevron consistent with SelectControl #40049
- Update spin buttons in
NumberControl - Components: Update control labels to the new uppercase styles #42782
- Update
COLORS.ui.border? (The mockups specify #bbb, a color that seems to be nonexistent in the current codebase. Unclear how this ties into the existing color scheme)
When using predefined font-size value, the font size controls change depending on how many values need to be displayed
| Predef (< 6 sizes) | Predef (>= 6 sizes) | Custom font size |
|---|---|---|
![]() |
![]() |
![]() |
Integration
- Ensure added features (like drop cap) are added at the bottom of the panel.
- Letter Spacing Control for Site Title and Site Tagline is not visible in Sidebar #32577
- Consolidate typography and text settings panels within the Paragraph block #23767
- Add a way to control letter spacing #20796
- Replace usages of typography panel across blocks and make it consistent:
Design
- Decide on how letter casing is to be presented.
- Decide on a good name for the "appearance" control (weight, style).
- Consider whether responsive options can be exposed in the UI: Fluid Typography Option #24480
Metadata
Metadata
Labels
[Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experiTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Type] Tracking IssueTactical breakdown of efforts across the codebase and/or tied to Overview issues.Tactical breakdown of efforts across the codebase and/or tied to Overview issues.



