Typography Tools: Tracking

[mtias]

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 roundClamp to match HTML number input stepping behavior #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

[aaronrobertshaw]

The letter spacing control is currently not working: #32577

I noticed this while testing changes removing custom prefixes from theme.json properties that didn't need it.

A fix is included in that PR: #34485

Fixed in #34515

TL;DR When the typography tools were grouped the letter-spacing support key wasn't updated as per the others.

[pablohoneyhoney]

Here's an update on some of the typography components and behaviors.

In particular regarding the Size component. Below there's a bit more detail around aspects not considered before, like variants on number of values (segmented UI for 4 or 5 values, and dropdown for >5), types of values if we want to consider t-shirt, tooltip to contextualize abstracted values, and toggling to input custom values.

Relevant to #34574

[ntsekouras]

👋 - I've started looking at the font size picker and my first issue that is missing the designs is the default value and the reset button. How do these two fit in the control? -cc @pablohoneyhoney

[ciampo]

👋 - I've started looking at the font size picker and my first issue that is missing the designs is the default value and the reset button. How do these two fit in the control? -cc @pablohoneyhoney

It would be great if you could coordinate with @mirka , she's also been looking at this.

[ntsekouras]

Regarding Letter spacing control that seemed important to have units, do we need to revisit something design-wise? I'm not sure if we have a control with +/- symbols and the unit select..

[javierarce]

@ntsekouras:

👋 - I've started looking at the font size picker and my first issue that is missing the designs is the default value and the reset button. How do these two fit in the control? -cc @pablohoneyhoney

Is there an expectation to be able to reset every control or just the font size one?

I think something like the following solution could work for components that span the entire column (in this example, 24 is the default value)

[mtias]

The resetting comes from the tools panel and allows resetting each item. You can see it in this video:

#33744

[javierarce]

The resetting comes from the tools panel and allows resetting each item. You can see it in this video:

Oh, thanks, that makes sense… showing reset buttons for several components would make panels look very busy.

[mirka]

@pablohoneyhoney Are there public Figma links for these mockups, by the way? I see that the components are available, but I'm wondering if there's another mockup file I don't know about.

[noisysocks]

• Letter spacing is missing
• Letter case is missing

I'm trying to work out whether these two controls are supposed to be in Global Styles or not.

I can see that Letter spacing was added to block settings but not Global Styles in #31118. Not sure if that was an intentional omission.

@aaronrobertshaw tells me that Letter case used to exist in Global Styles but was removed because it was felt that this shouldn't be something that is controlled at such a high level.

At any rate it would be good to revisit these decisions cc. @WordPress/gutenberg-design.

[mtias]

They should be available for headings in the global context

[mirka]

• Heading level

As discussed in #42718, this heading level switcher needs to have tabpanel semantics. The easiest way would be to use the existing TabPanel component, but design-wise it won't fit seven items in a single row.

One possibility is to make a new TabPanel component (or style variant) that looks like a 32px height ToggleGroupControl — though there hasn't been a confirmed decision or prioritization on this yet from the design side. We can move forward with this if we can get confirmation that this is sufficient visual affordance for a user to distinguish between a radio and a tabpanel.

[jasmussen]

The tab-panel that looks like a segmented control, if it's super quick to build, seems like we should just knock it out! But with a freeze in a few weeks, of course it should have lower priority than anything that needs to go in 6.1.

[talldan]

As discussed in #42718, this heading level switcher needs to have tabpanel semantics. The easiest way would be to use the existing TabPanel component, but design-wise it won't fit seven items in a single row.

Has there been an accessibility check on making it a TabPanel? If it changes a value, my instinct would be that TabPanel is the wrong thing. Usually tabs don't have such an effect, they're just a way to navigate through information. It may need to be another component that looks like a TabPanel.

[mirka]

If it changes a value, my instinct would be that TabPanel is the wrong thing.

In this case in the Global Styles (Typography ▸ Headings), it isn't changing a value, just flipping between views. (It does look like a value selector on first sight, which is exactly why we need to differentiate 😄)

[jameskoster]

which is exactly why we need to differentiate

I agree with this. If we have 'tabpanels that look like segmented controls' and/or 'segmented controls that look like tabs' then we risk creating an unpredictable UX. A style variation for tabs that is 'secondary' in terms of visual hierarchy might be good to explore. This would be useful in situations where we have nested tabs as well.

[mtias]

The semantic role of different heading levels is close to that of block variations:

So maybe the issue is both visual and hierarchical, and heading level should go above the preview with more context around it.

[mirka]

The semantic role of different heading levels is close to that of block variations

I don't think so. The block variation switcher behaves like a radio — its value is persisted, and the values of its sub-controls are discarded when you change the block variation to another one. The heading level switcher in GS is purely a tabpanel switcher — its value is not persisted, and the values of all their sub-controls are persisted regardless of which tabpanel you last see.

[mtias]

I mean the semantic role in terms of how they are represent from the block API perspective — we have registered heading levels as variations of headings — which means accessing them could be presented as separate blocks or the quick variations selection. This also goes for selecting the right heading element in the block inspector on a block instance.

[bobbingwide]

Re: #42782 I see that the code's been merged so I'm commenting here.

The changes to make the labels uppercase have introduced a problem with Jetpack's Field consent block.

In the block editor, the text is all uppercased, which makes it difficult to edit.

See also bobbingwide/bobbingwide#77

Elsewhere it's been suggested that using text-transform: uppercase is bad for accessibility.
Is it too late to revisit this issue?

[mirka]

Re: #42782 I see that the code's been merged so I'm commenting here.

Replied in #42782 (comment) 👍

[noisysocks]

I've completed most of the items in #34345 (comment) and in the issue description. The remaining items are, I think, fairly marginal and not worth prioritising over #33094 which is the key focus for the editor team.

Here's how the Typography panel now looks in trunk—things are very close to what's in Figma:

Kapture.2022-11-03.at.09.33.46.mp4

I think we can close this overview issue out and use smaller bug/enhancement issues for any further iteration that's required.