Typography Style Presets

[fabiankaegy]

Currently we support a broad set of individual tools to define typography related styles. An editor can individually set the font size, weight, line height, letter spacing, text transform, writing mode etc for individual elements.

This is great and really powerful.

However most of the time a specific type style consists of the consistent application of a bunch of these settings at once. And always having to manually set every single property individually creates several issues.

1. It is error prone to manually enter them each all the time and to remember what settings you use
2. If you want to tweak a type style later you would have to update every single instance manually

---

A solution for this already partially exists for specific element styles. In the global styles interface or in theme.json you can define the type style for all of your different heading levels for example.

However, the visual appearance of an element often differs from the semantically correct meaning of an element. Also there might be more than one possible style variations for a h4 or a paragraph.

Every traditional text formatting tool like Google Docs / Pages / Word etc have the concept of "Text styles" where a user can define various predefined text styles they want to reuse again and again throughout their document.

Having something like that would be really powerful.

As an implementation note. We should make sure that the solution we come up with does not actually set every single individual setting on every instance of this text because that would still not allow us to globally change the appearance of our type styles in one spot

[fabiankaegy]

@WordPress/gutenberg-design Would love to get your input on this.

[cr0ybot]

This is sorely needed. I'm considering trying to build my own interface for this because we need it 2 years ago.

Currently we are adding additional styling based on the has-foo-font-size class from the selected font size. This works, sort of, but there are problems, particularly if two of the font sizes have the same value:

{
  ...
  {
    "name": "Link sm",
    "slug": "link-sm",
    "fluid": false,
    "size": "var(--wp--custom--font-size--275)"
  },
  {
    "name": "Body sm",
    "slug": "body-sm",
    "fluid": false,
    "size": "var(--wp--custom--font-size--275)"
  },
  ...
},

The two font sizes above have an identical value which points to a size set with a custom property. However, they have other font styles applied via CSS like text-decoration via the re3spective font size classes. Unfortunately, when you select "Body sm", the "Link sm" class has-link-sm-font-size is applied.

I understand this behavior, because ideally we would have only one universal set of font sizes. Instead, we should be able to set a collection of style presets which contain any or all of size, font, appearance, line height, letter spacing, decoration, and letter case. As @fabiankaegy suggested, this should not set styles or classes for every item in the set, but should instead set a has-foo-typography-preset class (or whatever you name it) which adds the individual CSS properties and values dynamically.

[cr0ybot]

I've got a proof-of-concept working for a client site build and it's like a dream come true. It even allows for individual typography settings (font size, etc) to override. If I manage to find the time to extricate and abstract this for use in other projects I'll share here or maybe try to help build this in core.

The awkward part of my proof-of-concept is that it's using an object structure in settings.custom.typographyPresets to try to keep compatibility with the theme.json schema, but ideally it would be an array of objects (settings.custom doesn't allow arrays). Therefore the "slug" is the key here and I didn't feel like dealing with camelCase/kebab-case. I also should have perhaps nested the actual styles into a styles object to avoid future collisions with CSS properties.

I am dynamically building a stylesheet to create .has-{slug}-typography-preset selectors and styles similarly to how core does .has-{slug}-font-size etc., and then adding the inspector controls to any block with typography supports. The control itself uses ToolsPanelItem (unfortunately currently an experimental component) and CustomSelectControl, which is also used for the typography "appearance" setting to show different font weights.

This is critical for enterprise WordPress builds with strict design systems.

[fabiankaegy]

@cr0ybot love the movement here 🚀 Again let me know if / how I can help :)

In my implementation I did for a client project, I opted to use a UI that is more similar to the block styles UI. But I worry that scales worse and just takes up too much space... So I prefer your custom select.

It also does a better job at showing the size of the preset. In my case I needed to discard the size in the preview...

I was trying to be inspired by how different fonts are displayed:

[richtabor]

Are these not just block styles that are typography only? Would there be any difference?

[fabiankaegy]

@richtabor they fundamentally are. But block styles are overused and so manny of the blocks that would need these typography styles already have their own block styles. And since a block cannot have multiple block styles active at once I think typography presets are important enough to deserve their own place.

Look at the 2024 theme where the heading block has the "With Asterix" style. Stuff like that would prevent you from having the asterix active at the same time as you choose a typography style.

Also, this API would ideally make it so that any settings you choose would already correctly get reflected in the individual typography settings.