Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typography Tools: Tracking #34345

Closed
50 of 62 tasks
Tracked by #33447
mtias opened this issue Aug 27, 2021 · 36 comments
Closed
50 of 62 tasks
Tracked by #33447

Typography Tools: Tracking #34345

mtias opened this issue Aug 27, 2021 · 36 comments
Assignees
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.

Comments

@mtias
Copy link
Member

mtias commented Aug 27, 2021

Tools:

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

Mockup:
Screen Shot 2021-09-24 at 2 00 42 PM

Components

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
image image image

Integration

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
@mtias mtias added [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Aug 27, 2021
@mtias mtias mentioned this issue Aug 27, 2021
65 tasks
@aaronrobertshaw
Copy link
Contributor

aaronrobertshaw commented Sep 2, 2021

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
Copy link

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

Screen Shot 2021-09-24 at 2 00 42 PM

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.

Size-component

Relevant to #34574

@ntsekouras
Copy link
Contributor

👋 - 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
Copy link
Contributor

ciampo commented Oct 1, 2021

👋 - 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
Copy link
Contributor

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
Copy link
Contributor

javierarce commented Oct 5, 2021

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

image

@mtias
Copy link
Member Author

mtias commented Oct 5, 2021

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

#33744

@javierarce
Copy link
Contributor

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
Copy link
Member

mirka commented Oct 6, 2021

@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
Copy link
Member

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

Global styles typography design

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
Copy link
Member Author

mtias commented Aug 17, 2022

They should be available for headings in the global context

@mirka
Copy link
Member

mirka commented Aug 17, 2022

  • 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
Copy link
Contributor

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
Copy link
Contributor

talldan commented Aug 17, 2022

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
Copy link
Member

mirka commented Aug 17, 2022

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
Copy link
Contributor

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
Copy link
Member Author

mtias commented Aug 19, 2022

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

image

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

@mirka
Copy link
Member

mirka commented Aug 19, 2022

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
Copy link
Member Author

mtias commented Aug 19, 2022

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
Copy link
Contributor

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.

image

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
Copy link
Member

mirka commented Sep 19, 2022

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

Replied in #42782 (comment) 👍

@noisysocks
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.
Projects
None yet
Development

No branches or pull requests