Font Library: Add headings to user font lists and group them

[t-hamano]

Fixes #55220 Part of #58403 See this comment: https://github.com/WordPress/gutenberg/issues/58403#issuecomment-1932358501

What?

This PR achieves the following two things in the font library modal.

• ~~Add a heading to the list of user-installed fonts~~ Added by #59036
• Turn fonts into list items ~~and link them to headings~~

Why?

~~User-installed fonts don't have the title, so Users don't know what that font list means.~~ Also, since the font list is actually just a list of button elements, users using screen readers cannot understand how many fonts there are.

How?

Group the font list as follows.

<h2>XXX Fonts</h2>
<ul>
	<li>
		<button>...</button>
	</li>
	<li>
		<button>...</button>
	</li>
</ul>

[!NOTE] ~~By using fieldset and legend, we should be able to properly associate the heading with the content. But maybe these elements should be inside the form element. I would appreciate it if you could give me advice on whether this implementation violates a11y.~~

Testing Instructions for Keyboard

• Launch a screen reader such as NVDA or VoiceOver.
• Open the font library modal just by using the keyboard.
• When you focus on the beginning of the font list: You should hear something like this: `Library property page list with X items {fontName} graphic X/X variants active button

Screenshots or screencast

https://github.com/WordPress/gutenberg/assets/54422211/919415e2-4dc4-43b8-b11b-9da9efe76b1e

[github-actions[bot]]

Size Change: +103 B (0%)

Total Size: 1.74 MB

Filename	Size	Change
build/edit-site/index.min.js	224 kB	+38 B (0%)
build/edit-site/style-rtl.css	13.7 kB	+32 B (0%)
build/edit-site/style.css	13.7 kB	+33 B (0%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	955 B
build/annotations/index.min.js	2.27 kB
build/api-fetch/index.min.js	2.32 kB
build/autop/index.min.js	2.1 kB
build/blob/index.min.js	578 B
build/block-directory/index.min.js	7.26 kB
build/block-directory/style-rtl.css	1.03 kB
build/block-directory/style.css	1.03 kB
build/block-editor/content-rtl.css	4.43 kB
build/block-editor/content.css	4.43 kB
build/block-editor/default-editor-styles-rtl.css	395 B
build/block-editor/default-editor-styles.css	395 B
build/block-editor/index.min.js	256 kB
build/block-editor/style-rtl.css	15.5 kB
build/block-editor/style.css	15.5 kB
build/block-library/blocks/archives/editor-rtl.css	61 B
build/block-library/blocks/archives/editor.css	60 B
build/block-library/blocks/archives/style-rtl.css	90 B
build/block-library/blocks/archives/style.css	90 B
build/block-library/blocks/audio/editor-rtl.css	150 B
build/block-library/blocks/audio/editor.css	150 B
build/block-library/blocks/audio/style-rtl.css	122 B
build/block-library/blocks/audio/style.css	122 B
build/block-library/blocks/audio/theme-rtl.css	133 B
build/block-library/blocks/audio/theme.css	133 B
build/block-library/blocks/avatar/editor-rtl.css	116 B
build/block-library/blocks/avatar/editor.css	116 B
build/block-library/blocks/avatar/style-rtl.css	104 B
build/block-library/blocks/avatar/style.css	104 B
build/block-library/blocks/block/editor-rtl.css	305 B
build/block-library/blocks/block/editor.css	305 B
build/block-library/blocks/button/editor-rtl.css	415 B
build/block-library/blocks/button/editor.css	414 B
build/block-library/blocks/button/style-rtl.css	627 B
build/block-library/blocks/button/style.css	626 B
build/block-library/blocks/buttons/editor-rtl.css	337 B
build/block-library/blocks/buttons/editor.css	337 B
build/block-library/blocks/buttons/style-rtl.css	332 B
build/block-library/blocks/buttons/style.css	332 B
build/block-library/blocks/calendar/style-rtl.css	239 B
build/block-library/blocks/calendar/style.css	239 B
build/block-library/blocks/categories/editor-rtl.css	113 B
build/block-library/blocks/categories/editor.css	112 B
build/block-library/blocks/categories/style-rtl.css	124 B
build/block-library/blocks/categories/style.css	124 B
build/block-library/blocks/code/editor-rtl.css	53 B
build/block-library/blocks/code/editor.css	53 B
build/block-library/blocks/code/style-rtl.css	121 B
build/block-library/blocks/code/style.css	121 B
build/block-library/blocks/code/theme-rtl.css	124 B
build/block-library/blocks/code/theme.css	124 B
build/block-library/blocks/columns/editor-rtl.css	108 B
build/block-library/blocks/columns/editor.css	108 B
build/block-library/blocks/columns/style-rtl.css	421 B
build/block-library/blocks/columns/style.css	421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css	125 B
build/block-library/blocks/comment-author-avatar/editor.css	125 B
build/block-library/blocks/comment-content/style-rtl.css	92 B
build/block-library/blocks/comment-content/style.css	92 B
build/block-library/blocks/comment-template/style-rtl.css	199 B
build/block-library/blocks/comment-template/style.css	198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css	123 B
build/block-library/blocks/comments-pagination-numbers/editor.css	121 B
build/block-library/blocks/comments-pagination/editor-rtl.css	222 B
build/block-library/blocks/comments-pagination/editor.css	209 B
build/block-library/blocks/comments-pagination/style-rtl.css	235 B
build/block-library/blocks/comments-pagination/style.css	231 B
build/block-library/blocks/comments-title/editor-rtl.css	75 B
build/block-library/blocks/comments-title/editor.css	75 B
build/block-library/blocks/comments/editor-rtl.css	840 B
build/block-library/blocks/comments/editor.css	839 B
build/block-library/blocks/comments/style-rtl.css	637 B
build/block-library/blocks/comments/style.css	636 B
build/block-library/blocks/cover/editor-rtl.css	671 B
build/block-library/blocks/cover/editor.css	674 B
build/block-library/blocks/cover/style-rtl.css	1.7 kB
build/block-library/blocks/cover/style.css	1.69 kB
build/block-library/blocks/details/editor-rtl.css	65 B
build/block-library/blocks/details/editor.css	65 B
build/block-library/blocks/details/style-rtl.css	86 B
build/block-library/blocks/details/style.css	86 B
build/block-library/blocks/embed/editor-rtl.css	312 B
build/block-library/blocks/embed/editor.css	312 B
build/block-library/blocks/embed/style-rtl.css	410 B
build/block-library/blocks/embed/style.css	410 B
build/block-library/blocks/embed/theme-rtl.css	133 B
build/block-library/blocks/embed/theme.css	133 B
build/block-library/blocks/file/editor-rtl.css	326 B
build/block-library/blocks/file/editor.css	327 B
build/block-library/blocks/file/style-rtl.css	280 B
build/block-library/blocks/file/style.css	281 B
build/block-library/blocks/file/view.min.js	324 B
build/block-library/blocks/footnotes/style-rtl.css	201 B
build/block-library/blocks/footnotes/style.css	199 B
build/block-library/blocks/form-input/editor-rtl.css	227 B
build/block-library/blocks/form-input/editor.css	227 B
build/block-library/blocks/form-input/style-rtl.css	343 B
build/block-library/blocks/form-input/style.css	343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css	340 B
build/block-library/blocks/form-submission-notification/editor.css	340 B
build/block-library/blocks/form-submit-button/style-rtl.css	69 B
build/block-library/blocks/form-submit-button/style.css	69 B
build/block-library/blocks/form/view.min.js	471 B
build/block-library/blocks/freeform/editor-rtl.css	2.61 kB
build/block-library/blocks/freeform/editor.css	2.61 kB
build/block-library/blocks/gallery/editor-rtl.css	956 B
build/block-library/blocks/gallery/editor.css	960 B
build/block-library/blocks/gallery/style-rtl.css	1.72 kB
build/block-library/blocks/gallery/style.css	1.72 kB
build/block-library/blocks/gallery/theme-rtl.css	108 B
build/block-library/blocks/gallery/theme.css	108 B
build/block-library/blocks/group/editor-rtl.css	394 B
build/block-library/blocks/group/editor.css	394 B
build/block-library/blocks/group/style-rtl.css	103 B
build/block-library/blocks/group/style.css	103 B
build/block-library/blocks/group/theme-rtl.css	78 B
build/block-library/blocks/group/theme.css	78 B
build/block-library/blocks/heading/style-rtl.css	189 B
build/block-library/blocks/heading/style.css	189 B
build/block-library/blocks/html/editor-rtl.css	336 B
build/block-library/blocks/html/editor.css	337 B
build/block-library/blocks/image/editor-rtl.css	878 B
build/block-library/blocks/image/editor.css	878 B
build/block-library/blocks/image/style-rtl.css	1.6 kB
build/block-library/blocks/image/style.css	1.59 kB
build/block-library/blocks/image/theme-rtl.css	133 B
build/block-library/blocks/image/theme.css	133 B
build/block-library/blocks/image/view.min.js	1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css	357 B
build/block-library/blocks/latest-comments/style.css	357 B
build/block-library/blocks/latest-posts/editor-rtl.css	213 B
build/block-library/blocks/latest-posts/editor.css	212 B
build/block-library/blocks/latest-posts/style-rtl.css	478 B
build/block-library/blocks/latest-posts/style.css	478 B
build/block-library/blocks/list/style-rtl.css	88 B
build/block-library/blocks/list/style.css	88 B
build/block-library/blocks/media-text/editor-rtl.css	306 B
build/block-library/blocks/media-text/editor.css	305 B
build/block-library/blocks/media-text/style-rtl.css	505 B
build/block-library/blocks/media-text/style.css	503 B
build/block-library/blocks/more/editor-rtl.css	431 B
build/block-library/blocks/more/editor.css	431 B
build/block-library/blocks/navigation-link/editor-rtl.css	668 B
build/block-library/blocks/navigation-link/editor.css	669 B
build/block-library/blocks/navigation-link/style-rtl.css	193 B
build/block-library/blocks/navigation-link/style.css	192 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	296 B
build/block-library/blocks/navigation-submenu/editor.css	295 B
build/block-library/blocks/navigation/editor-rtl.css	2.26 kB
build/block-library/blocks/navigation/editor.css	2.26 kB
build/block-library/blocks/navigation/style-rtl.css	2.26 kB
build/block-library/blocks/navigation/style.css	2.25 kB
build/block-library/blocks/navigation/view.min.js	1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css	395 B
build/block-library/blocks/nextpage/editor.css	395 B
build/block-library/blocks/page-list/editor-rtl.css	377 B
build/block-library/blocks/page-list/editor.css	377 B
build/block-library/blocks/page-list/style-rtl.css	175 B
build/block-library/blocks/page-list/style.css	175 B
build/block-library/blocks/paragraph/editor-rtl.css	235 B
build/block-library/blocks/paragraph/editor.css	235 B
build/block-library/blocks/paragraph/style-rtl.css	335 B
build/block-library/blocks/paragraph/style.css	335 B
build/block-library/blocks/post-author/style-rtl.css	175 B
build/block-library/blocks/post-author/style.css	176 B
build/block-library/blocks/post-comments-form/editor-rtl.css	96 B
build/block-library/blocks/post-comments-form/editor.css	96 B
build/block-library/blocks/post-comments-form/style-rtl.css	508 B
build/block-library/blocks/post-comments-form/style.css	508 B
build/block-library/blocks/post-content/editor-rtl.css	74 B
build/block-library/blocks/post-content/editor.css	74 B
build/block-library/blocks/post-date/style-rtl.css	61 B
build/block-library/blocks/post-date/style.css	61 B
build/block-library/blocks/post-excerpt/editor-rtl.css	71 B
build/block-library/blocks/post-excerpt/editor.css	71 B
build/block-library/blocks/post-excerpt/style-rtl.css	141 B
build/block-library/blocks/post-excerpt/style.css	141 B
build/block-library/blocks/post-featured-image/editor-rtl.css	734 B
build/block-library/blocks/post-featured-image/editor.css	732 B
build/block-library/blocks/post-featured-image/style-rtl.css	342 B
build/block-library/blocks/post-featured-image/style.css	342 B
build/block-library/blocks/post-navigation-link/style-rtl.css	215 B
build/block-library/blocks/post-navigation-link/style.css	214 B
build/block-library/blocks/post-template/editor-rtl.css	99 B
build/block-library/blocks/post-template/editor.css	98 B
build/block-library/blocks/post-template/style-rtl.css	409 B
build/block-library/blocks/post-template/style.css	408 B
build/block-library/blocks/post-terms/style-rtl.css	96 B
build/block-library/blocks/post-terms/style.css	96 B
build/block-library/blocks/post-time-to-read/style-rtl.css	69 B
build/block-library/blocks/post-time-to-read/style.css	69 B
build/block-library/blocks/post-title/style-rtl.css	100 B
build/block-library/blocks/post-title/style.css	100 B
build/block-library/blocks/preformatted/style-rtl.css	125 B
build/block-library/blocks/preformatted/style.css	125 B
build/block-library/blocks/pullquote/editor-rtl.css	135 B
build/block-library/blocks/pullquote/editor.css	135 B
build/block-library/blocks/pullquote/style-rtl.css	354 B
build/block-library/blocks/pullquote/style.css	353 B
build/block-library/blocks/pullquote/theme-rtl.css	174 B
build/block-library/blocks/pullquote/theme.css	174 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css	122 B
build/block-library/blocks/query-pagination-numbers/editor.css	121 B
build/block-library/blocks/query-pagination/editor-rtl.css	221 B
build/block-library/blocks/query-pagination/editor.css	211 B
build/block-library/blocks/query-pagination/style-rtl.css	288 B
build/block-library/blocks/query-pagination/style.css	284 B
build/block-library/blocks/query-title/style-rtl.css	63 B
build/block-library/blocks/query-title/style.css	63 B
build/block-library/blocks/query/editor-rtl.css	486 B
build/block-library/blocks/query/editor.css	486 B
build/block-library/blocks/query/view.min.js	958 B
build/block-library/blocks/quote/style-rtl.css	237 B
build/block-library/blocks/quote/style.css	237 B
build/block-library/blocks/quote/theme-rtl.css	233 B
build/block-library/blocks/quote/theme.css	235 B
build/block-library/blocks/read-more/style-rtl.css	140 B
build/block-library/blocks/read-more/style.css	140 B
build/block-library/blocks/rss/editor-rtl.css	149 B
build/block-library/blocks/rss/editor.css	149 B
build/block-library/blocks/rss/style-rtl.css	289 B
build/block-library/blocks/rss/style.css	288 B
build/block-library/blocks/search/editor-rtl.css	184 B
build/block-library/blocks/search/editor.css	184 B
build/block-library/blocks/search/style-rtl.css	690 B
build/block-library/blocks/search/style.css	689 B
build/block-library/blocks/search/theme-rtl.css	114 B
build/block-library/blocks/search/theme.css	114 B
build/block-library/blocks/search/view.min.js	478 B
build/block-library/blocks/separator/editor-rtl.css	146 B
build/block-library/blocks/separator/editor.css	146 B
build/block-library/blocks/separator/style-rtl.css	239 B
build/block-library/blocks/separator/style.css	239 B
build/block-library/blocks/separator/theme-rtl.css	194 B
build/block-library/blocks/separator/theme.css	194 B
build/block-library/blocks/shortcode/editor-rtl.css	323 B
build/block-library/blocks/shortcode/editor.css	323 B
build/block-library/blocks/site-logo/editor-rtl.css	805 B
build/block-library/blocks/site-logo/editor.css	805 B
build/block-library/blocks/site-logo/style-rtl.css	204 B
build/block-library/blocks/site-logo/style.css	204 B
build/block-library/blocks/site-tagline/editor-rtl.css	86 B
build/block-library/blocks/site-tagline/editor.css	86 B
build/block-library/blocks/site-title/editor-rtl.css	116 B
build/block-library/blocks/site-title/editor.css	116 B
build/block-library/blocks/site-title/style-rtl.css	57 B
build/block-library/blocks/site-title/style.css	57 B
build/block-library/blocks/social-link/editor-rtl.css	184 B
build/block-library/blocks/social-link/editor.css	184 B
build/block-library/blocks/social-links/editor-rtl.css	676 B
build/block-library/blocks/social-links/editor.css	675 B
build/block-library/blocks/social-links/style-rtl.css	1.48 kB
build/block-library/blocks/social-links/style.css	1.48 kB
build/block-library/blocks/spacer/editor-rtl.css	350 B
build/block-library/blocks/spacer/editor.css	350 B
build/block-library/blocks/spacer/style-rtl.css	48 B
build/block-library/blocks/spacer/style.css	48 B
build/block-library/blocks/table/editor-rtl.css	395 B
build/block-library/blocks/table/editor.css	395 B
build/block-library/blocks/table/style-rtl.css	639 B
build/block-library/blocks/table/style.css	639 B
build/block-library/blocks/table/theme-rtl.css	152 B
build/block-library/blocks/table/theme.css	152 B
build/block-library/blocks/tag-cloud/style-rtl.css	251 B
build/block-library/blocks/tag-cloud/style.css	253 B
build/block-library/blocks/template-part/editor-rtl.css	431 B
build/block-library/blocks/template-part/editor.css	431 B
build/block-library/blocks/template-part/theme-rtl.css	107 B
build/block-library/blocks/template-part/theme.css	107 B
build/block-library/blocks/term-description/style-rtl.css	111 B
build/block-library/blocks/term-description/style.css	111 B
build/block-library/blocks/text-columns/editor-rtl.css	95 B
build/block-library/blocks/text-columns/editor.css	95 B
build/block-library/blocks/text-columns/style-rtl.css	166 B
build/block-library/blocks/text-columns/style.css	166 B
build/block-library/blocks/verse/style-rtl.css	99 B
build/block-library/blocks/verse/style.css	99 B
build/block-library/blocks/video/editor-rtl.css	552 B
build/block-library/blocks/video/editor.css	555 B
build/block-library/blocks/video/style-rtl.css	185 B
build/block-library/blocks/video/style.css	185 B
build/block-library/blocks/video/theme-rtl.css	133 B
build/block-library/blocks/video/theme.css	133 B
build/block-library/classic-rtl.css	179 B
build/block-library/classic.css	179 B
build/block-library/common-rtl.css	1.11 kB
build/block-library/common.css	1.11 kB
build/block-library/editor-elements-rtl.css	75 B
build/block-library/editor-elements.css	75 B
build/block-library/editor-rtl.css	12.2 kB
build/block-library/editor.css	12.2 kB
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/index.min.js	218 kB
build/block-library/reset-rtl.css	472 B
build/block-library/reset.css	472 B
build/block-library/style-rtl.css	14.8 kB
build/block-library/style.css	14.8 kB
build/block-library/theme-rtl.css	707 B
build/block-library/theme.css	713 B
build/block-serialization-default-parser/index.min.js	1.12 kB
build/block-serialization-spec-parser/index.min.js	2.87 kB
build/blocks/index.min.js	51.7 kB
build/commands/index.min.js	15.2 kB
build/commands/style-rtl.css	953 B
build/commands/style.css	951 B
build/components/index.min.js	220 kB
build/components/style-rtl.css	11.9 kB
build/components/style.css	11.9 kB
build/compose/index.min.js	12.8 kB
build/core-commands/index.min.js	2.77 kB
build/core-data/index.min.js	72.5 kB
build/customize-widgets/index.min.js	11 kB
build/customize-widgets/style-rtl.css	1.36 kB
build/customize-widgets/style.css	1.36 kB
build/data-controls/index.min.js	640 B
build/data/index.min.js	9 kB
build/date/index.min.js	17.9 kB
build/deprecated/index.min.js	451 B
build/dom-ready/index.min.js	324 B
build/dom/index.min.js	4.65 kB
build/edit-post/classic-rtl.css	578 B
build/edit-post/classic.css	578 B
build/edit-post/index.min.js	16.8 kB
build/edit-post/style-rtl.css	4.06 kB
build/edit-post/style.css	4.05 kB
build/edit-widgets/index.min.js	17.6 kB
build/edit-widgets/style-rtl.css	4.17 kB
build/edit-widgets/style.css	4.16 kB
build/editor/index.min.js	80.3 kB
build/editor/style-rtl.css	7.19 kB
build/editor/style.css	7.2 kB
build/element/index.min.js	4.83 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	8.07 kB
build/format-library/style-rtl.css	493 B
build/format-library/style.css	492 B
build/hooks/index.min.js	1.55 kB
build/html-entities/index.min.js	448 B
build/i18n/index.min.js	3.58 kB
build/interactivity/debug.min.js	16.2 kB
build/interactivity/file.min.js	447 B
build/interactivity/image.min.js	1.67 kB
build/interactivity/index.min.js	13 kB
build/interactivity/navigation.min.js	1.17 kB
build/interactivity/query.min.js	740 B
build/interactivity/router.min.js	2.79 kB
build/interactivity/search.min.js	618 B
build/is-shallow-equal/index.min.js	527 B
build/keyboard-shortcuts/index.min.js	1.3 kB
build/keycodes/index.min.js	1.46 kB
build/list-reusable-blocks/index.min.js	2.11 kB
build/list-reusable-blocks/style-rtl.css	851 B
build/list-reusable-blocks/style.css	851 B
build/media-utils/index.min.js	2.92 kB
build/modules/importmap-polyfill.min.js	12.2 kB
build/notices/index.min.js	948 B
build/nux/index.min.js	1.57 kB
build/nux/style-rtl.css	748 B
build/nux/style.css	744 B
build/patterns/index.min.js	6.47 kB
build/patterns/style-rtl.css	595 B
build/patterns/style.css	595 B
build/plugins/index.min.js	1.8 kB
build/preferences-persistence/index.min.js	2.06 kB
build/preferences/index.min.js	2.85 kB
build/preferences/style-rtl.css	710 B
build/preferences/style.css	712 B
build/primitives/index.min.js	975 B
build/priority-queue/index.min.js	1.52 kB
build/private-apis/index.min.js	1 kB
build/react-i18n/index.min.js	623 B
build/react-refresh-entry/index.min.js	9.47 kB
build/react-refresh-runtime/index.min.js	6.78 kB
build/redux-routine/index.min.js	2.7 kB
build/reusable-blocks/index.min.js	2.73 kB
build/reusable-blocks/style-rtl.css	256 B
build/reusable-blocks/style.css	256 B
build/rich-text/index.min.js	10 kB
build/router/index.min.js	1.88 kB
build/server-side-render/index.min.js	1.96 kB
build/shortcode/index.min.js	1.39 kB
build/style-engine/index.min.js	2.03 kB
build/token-list/index.min.js	582 B
build/url/index.min.js	3.74 kB
build/vendors/inert-polyfill.min.js	2.48 kB
build/vendors/react-dom.min.js	41.7 kB
build/vendors/react.min.js	4.02 kB
build/viewport/index.min.js	957 B
build/warning/index.min.js	249 B
build/widgets/index.min.js	7.23 kB
build/widgets/style-rtl.css	1.17 kB
build/widgets/style.css	1.17 kB
build/wordcount/index.min.js	1.02 kB

_{compressed-size-action}

[github-actions[bot]]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: t-hamano <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: colorful-tones <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: annezazu <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[afercia]

I'm all for adding headings and using an unordered list. Headings clearly identify sections of content, both visually and semantically. Screenshot fo the headings hierarchy reported by teh headingsMap browser extensiont:

[t-hamano]

Thank you everyone for your advice. This PR will greatly conflict with #58794, which replaces infinite scroll with pagination. Both are accessibility improvements, but #58794 is probably a higher priority. Therefore, I plan to resolve the conflict with this PR after #58794 is merged.

[t-hamano]

Since #58794 was merged, changes were made again to match the latest trunk. The following points, which are the objectives of this PR, should still be maintained.

• Add a title to the user font
• User font title and theme font title are h2 elements
• Properly mark up the font list with the ul element
• @colorful-tones 's feedback regarding margins has also been applied.

[github-actions[bot]]

Flaky tests detected in b68a6f1676c4f52e89c523d44457dc6a6991f629. Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7895054595 📝 Reported issues:

• #58980 in /test/e2e/specs/editor/blocks/navigation-list-view.spec.js

[t-hamano]

I added #55220, which this PR solves, to the WP6.5 project board and also gave this PR a backport label.

WP6.5 will probably see a lot of backporting regarding the font library. In order to avoid conflicts during the backport process, I think we need to backport as much as possible when there are changes to the code related to the font library.

[t-hamano]

Updated again: The font library was significantly refactored in trunk, so I resolved the conflict again and updated all PR descriptions.

[annezazu]

@WordPress/gutenberg-design can you all review this? I can see reviews were requested but a review hasn't quite been done. This overlaps nicely with what we've seen with grouping templates https://github.com/WordPress/gutenberg/pull/57711 so I imagine this is another overlapping area.

[t-hamano]

Note: A discussion started in Slack about whether the Font Library should be shipped to the core. If the Font Library will not ship to WP6.5, we may want to remove the backport label.

[jasmussen]

I'm personally okay to move forward with this as an immediate fix, but I think there's a larger challenge with how the font library is coming together at the moment that needs clarification.

It's easy to think that this new Font Library should be the only source of managing everything related to fonts, both across files and font stacks and theme fonts. But it can never be that one canonical source; some typographic styles will have to live in global styles, etc. So unless we get clarity about the role of the font library, this will become increasingly messy, as also discussed here related to where you manage font stacks.

A cleaner delineation, which is also how this was designed, is to have the Font Library behave similarly to the Media Library: it's a place where you add, remove, manage files, and perhaps a little metadata. This delineation immediately provides clear answers to questions like these: where should font stacks be managed? Where should theme vs. user fonts live? Global styles, because the font library is only ever fonts you install yourself.

[t-hamano]

Remove the backport label and also exclude it from the project board. See this comment.

[t-hamano]

@jasmussen Thank you for your opinion.

I agree that there is a larger challenge to be solved when it comes to the font library. After several rounds of conflict resolution regarding this PR, we finally settled on just improving accessibility, and as a result, no changes were made to the design. I should have told you that design feedback is no longer required 😅

[t-hamano]

@jasmussen @colorful-tones @afercia Could you review this PR? The content of the PR has not changed, but the conflict has been resolved again 🙏