Add font weight picking mechanism

[jorgefilipecosta]

This PR adds a font-weight picking mechanism.

The mechanism is very simple and allows to use all valid CSS values for font-weight. Themes can disable font-weight picking via theme.json or set default values there.

Question: Should themes be able to restrict what font weights are available? If yes, should the restriction be dependent on a font family?

Screenshots

[github-actions]

Size Change: +451 B (0%)

Total Size: 1.21 MB

Filename	Size	Change
build/block-editor/index.js	132 kB	+287 B (0%)
build/block-editor/style-rtl.css	11.1 kB	+16 B (0%)
build/block-editor/style.css	11.1 kB	+19 B (0%)
build/block-library/index.js	146 kB	+18 B (0%)
build/blocks/index.js	48.1 kB	+11 B (0%)
build/edit-site/index.js	22.6 kB	+100 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.78 kB	0 B
build/api-fetch/index.js	3.45 kB	0 B
build/autop/index.js	2.84 kB	0 B
build/blob/index.js	665 B	0 B
build/block-directory/index.js	8.72 kB	0 B
build/block-directory/style-rtl.css	943 B	0 B
build/block-directory/style.css	942 B	0 B
build/block-library/editor-rtl.css	9.01 kB	0 B
build/block-library/editor.css	9.01 kB	0 B
build/block-library/style-rtl.css	7.9 kB	0 B
build/block-library/style.css	7.89 kB	0 B
build/block-library/theme-rtl.css	792 B	0 B
build/block-library/theme.css	793 B	0 B
build/block-serialization-default-parser/index.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/components/index.js	172 kB	0 B
build/components/style-rtl.css	15.3 kB	0 B
build/components/style.css	15.2 kB	0 B
build/compose/index.js	9.81 kB	0 B
build/core-data/index.js	12.5 kB	0 B
build/data-controls/index.js	772 B	0 B
build/data/index.js	8.77 kB	0 B
build/date/index.js	31.8 kB	0 B
build/deprecated/index.js	768 B	0 B
build/dom-ready/index.js	571 B	0 B
build/dom/index.js	4.46 kB	0 B
build/edit-navigation/index.js	11.2 kB	0 B
build/edit-navigation/style-rtl.css	881 B	0 B
build/edit-navigation/style.css	885 B	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.41 kB	0 B
build/edit-post/style.css	6.39 kB	0 B
build/edit-site/style-rtl.css	3.88 kB	0 B
build/edit-site/style.css	3.88 kB	0 B
build/edit-widgets/index.js	26.3 kB	0 B
build/edit-widgets/style-rtl.css	3.13 kB	0 B
build/edit-widgets/style.css	3.13 kB	0 B
build/editor/editor-styles-rtl.css	480 B	0 B
build/editor/editor-styles.css	482 B	0 B
build/editor/index.js	42.8 kB	0 B
build/editor/style-rtl.css	3.85 kB	0 B
build/editor/style.css	3.85 kB	0 B
build/element/index.js	4.65 kB	0 B
build/escape-html/index.js	735 B	0 B
build/format-library/index.js	7.7 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	2.16 kB	0 B
build/html-entities/index.js	623 B	0 B
build/i18n/index.js	3.57 kB	0 B
build/is-shallow-equal/index.js	712 B	0 B
build/keyboard-shortcuts/index.js	2.52 kB	0 B
build/keycodes/index.js	1.94 kB	0 B
build/list-reusable-blocks/index.js	3.11 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.34 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.42 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.56 kB	0 B
build/primitives/index.js	1.43 kB	0 B
build/priority-queue/index.js	791 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/reusable-blocks/index.js	3.05 kB	0 B
build/rich-text/index.js	13.2 kB	0 B
build/server-side-render/index.js	2.77 kB	0 B
build/shortcode/index.js	1.69 kB	0 B
build/token-list/index.js	1.27 kB	0 B
build/url/index.js	4.06 kB	0 B
build/viewport/index.js	1.84 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.22 kB	0 B

_{compressed-size-action}

[aristath]

Hmmm inherit & initial are OK as words, but the rest of them IMO should not be available both as numeric values and text... Bold is the same as 700 in most cases, or at least that is the CSS convention.
It would make more sense to me as a user to have options formatted like this instead:

[
	{ value: 'inherit', label: __( 'Inherit' ) },
	{ value: 'initial', label: __( 'Initial' ) },
	{ value: '100', label: __( '100 - Thin' ) },
	{ value: '200', label: __( '200 - Extra Light, Ultra Light' ) },
	{ value: '300', label: __( '300 - Light' ) },
	{ value: '400', label: __( '400 - Normal, Book, Regular' ) },
	{ value: '500', label: __( '500 - Medium' ) },
	{ value: '600', label: __( '600 - Semi Bold, Demi Bold' ) },
	{ value: '700', label: __( '700 - Bold' ) },
	{ value: '800', label: __( '800 - Extra Bold, Ultra Bold' ) },
	{ value: '900', label: __( '900 - Black, Heavy' ) },
]

Question: Should themes be able to restrict what font weights are available? If yes, should the restriction be dependent on a font family?

Tricky topic.
If themes & plugins are allowed to add google-fonts, adobe-fonts etc via hooks, then they will definitely need a way to limit the font-weights depending on the font-family selected.
Not all font-families are available on all font-weights, and depending on the webfonts platform used, selecting a non-existing font-weight for a font-family may return an error and the webfont won't get loaded.
So a filter should be available for the weights, accompanied by an event which will trigger on font-family switching.

[aristath]

I was thinking about this one this weekend... It's something we'll definitely need, but then I realized that we may need 2 controls implementations for this!
Traditionally fonts have weights ranging from 100 to 900, with a step of 100. But nowadays we also have Variable Fonts, and they are getting increasingly popular. These fonts don't have "standard" font-weights, and are a lot more versatile.
Google fonts already have a big collection of variable fonts and more are added every day (or current "legacy" fonts are getting converted to variable fonts).
An example of the Literata font (also available on GFonts) can be seen below, there the weight can be any number between 200 and 900.

If I'm using a variable font-family on my site and have found that a font-weight of 350 is what I need for my design, then 300 or 400 will be close, but not quite right. So the dropdown won't do in that case, I'd need a slider - otherwise I'd have to resort to writing custom CSS for that 🤔

[LittleBigThing]

Couldn't choosing the font weight be similar to choosing font size for consistency?

We could have a set of registered weights, optionally with names, per font family. And then there could be a dropdown for custom weights. Custom weights could be disabled by the theme completely, just like for font sizes. Custom weights could be restricted or a range if it is a variable font?

Also, I am not sure either whether using inherit and initial (and too much options) are useful for average users (however they are defined).

[jorgefilipecosta]

Closed in favor of #26444.