Tools:

• Font
• Size
• Line Height
• Appearance/Weight/Style
• Letter Spacing
• Letter Case

Mockup:

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 Grid components for layout
  • Audit and improve ToolsPanel's a11y #38059
• Use ToolsPanel to 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
• Storybook: Add story for TypographyPanel #35293
• Package an exportable, reusable TypographyPanel component using the components that are already available (similarly to what done for the DimensionsPanel). 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
    • CustomSelectControl may be used for the custom dropdown
      • Fix initialValue computation when not passing an explicit value (PR Components: fix selected value computation in CustomSelectControl when no initial value is 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 CustomSelectControlOption component)?
  • 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 therefore UnitControl and RangeControl) need any amends / design updates
  • Remove reset button and rely on ToolsPanel reset functionality
• 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" in NumberControl and RangeControl #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 NumberControl stepping to match HTML number input stepping #34566)
  • Components: update the rounding logic for shift key increments in NumberControl and RangeControl #34817
  • agree on next steps (e.g. update design)
• ToggleGroupControl
  • ToggleGroupControlOption: aria-label cannot be overwritten #35381
  • ToggleGroupControl: Missing border when initial value is undefined #35382
  • ToggleGroupControl: Visual state of an undefined value is inconsistent #35383
• FontAppearanceControl
  • FontAppearanceControl: Remove fieldset wrapper #35461
• 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:
  • Post Navigation Link: Add typography settings #34381

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