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

Font Library: move font uploads to a new tab #54655

Merged
merged 5 commits into from
Sep 28, 2023

Conversation

madhusudhand
Copy link
Member

@madhusudhand madhusudhand commented Sep 20, 2023

What?

As suggested by the design, this change moves the font uploads section to a new tab and provides appropriate error messages when upload fails.

It also removes the use of snackbar.

Testing Instructions

  1. Open font library modal from global style -> typography.
  2. Observe that the uploads section is now moved to a new tab.
  3. Try uploading fonts.
  4. Upon error, it should show an error in the same tab and should not invoke snackbar.

Screenshots or screencast

image

Related issues:

Fixes: #54504

@github-actions
Copy link

github-actions bot commented Sep 20, 2023

Size Change: +122 B (0%)

Total Size: 1.62 MB

Filename Size Change
build/edit-site/index.min.js 185 kB +47 B (0%)
build/edit-site/style-rtl.css 14 kB +37 B (0%)
build/edit-site/style.css 14 kB +38 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 964 B
build/annotations/index.min.js 2.71 kB
build/api-fetch/index.min.js 2.29 kB
build/autop/index.min.js 2.11 kB
build/blob/index.min.js 461 B
build/block-directory/index.min.js 7.05 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.28 kB
build/block-editor/content.css 4.27 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/index.min.js 218 kB
build/block-editor/style-rtl.css 15.6 kB
build/block-editor/style.css 15.6 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 138 B
build/block-library/blocks/audio/theme.css 138 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 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 633 B
build/block-library/blocks/button/style.css 632 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 647 B
build/block-library/blocks/cover/editor.css 650 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 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 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 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 311 B
build/block-library/blocks/file/style.css 312 B
build/block-library/blocks/file/view.min.js 321 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 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 957 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 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 340 B
build/block-library/blocks/html/editor.css 341 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.42 kB
build/block-library/blocks/image/style.css 1.41 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.83 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 266 B
build/block-library/blocks/media-text/editor.css 263 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 671 B
build/block-library/blocks/navigation-link/editor.css 672 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 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.01 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 401 B
build/block-library/blocks/page-list/editor.css 401 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-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 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 322 B
build/block-library/blocks/post-featured-image/style.css 322 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 314 B
build/block-library/blocks/post-template/style.css 314 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 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 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/style-rtl.css 375 B
build/block-library/blocks/query/style.css 372 B
build/block-library/blocks/query/view.min.js 609 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 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 613 B
build/block-library/blocks/search/style.css 613 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 471 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 234 B
build/block-library/blocks/separator/style.css 234 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 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 760 B
build/block-library/blocks/site-logo/editor.css 760 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 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.45 kB
build/block-library/blocks/social-links/style.css 1.45 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 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 432 B
build/block-library/blocks/table/editor.css 432 B
build/block-library/blocks/table/style-rtl.css 646 B
build/block-library/blocks/table/style.css 645 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 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 403 B
build/block-library/blocks/template-part/editor.css 403 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 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 191 B
build/block-library/blocks/video/style.css 191 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 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 207 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14 kB
build/block-library/style.css 14 kB
build/block-library/theme-rtl.css 700 B
build/block-library/theme.css 705 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.5 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 947 B
build/commands/style.css 942 B
build/components/index.min.js 247 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12.7 kB
build/core-commands/index.min.js 2.71 kB
build/core-data/index.min.js 70.5 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.51 kB
build/customize-widgets/style.css 1.5 kB
build/data-controls/index.min.js 651 B
build/data/index.min.js 8.87 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 462 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.68 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 35.6 kB
build/edit-post/style-rtl.css 7.92 kB
build/edit-post/style.css 7.91 kB
build/edit-widgets/index.min.js 17 kB
build/edit-widgets/style-rtl.css 4.84 kB
build/edit-widgets/style.css 4.84 kB
build/editor/index.min.js 45.9 kB
build/editor/style-rtl.css 3.58 kB
build/editor/style.css 3.58 kB
build/element/index.min.js 4.87 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.75 kB
build/format-library/style-rtl.css 577 B
build/format-library/style.css 577 B
build/hooks/index.min.js 1.57 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.61 kB
build/interactivity/index.min.js 11.4 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.74 kB
build/keycodes/index.min.js 1.9 kB
build/list-reusable-blocks/index.min.js 2.2 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 964 B
build/nux/index.min.js 2 kB
build/nux/style-rtl.css 775 B
build/nux/style.css 771 B
build/patterns/index.min.js 3.56 kB
build/patterns/style-rtl.css 325 B
build/patterns/style.css 325 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 1.85 kB
build/preferences/index.min.js 1.25 kB
build/primitives/index.min.js 994 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 972 B
build/react-i18n/index.min.js 624 B
build/react-refresh-entry/index.min.js 9.46 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.71 kB
build/reusable-blocks/index.min.js 2.72 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.2 kB
build/router/index.min.js 1.78 kB
build/server-side-render/index.min.js 1.95 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 1.98 kB
build/token-list/index.min.js 587 B
build/url/index.min.js 3.84 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 968 B
build/warning/index.min.js 259 B
build/widgets/index.min.js 7.17 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@madhusudhand madhusudhand marked this pull request as ready for review September 22, 2023 07:49
@madhusudhand madhusudhand added the [Type] Bug An existing feature does not function as intended label Sep 22, 2023
@jasmussen
Copy link
Contributor

This feels clearer to me, given that if you do not permit access to Google though the "Install Fonts" tab, then we'll want to have a top level alternative, which is upload.

I will note that it would be okay to still have the whole modal be a dropzone, and invoke uploading regardless of which tab you are on. That's not a requirement, this is fine too, just noting.

I got a curious error, though. I was uploading this font, and got a green error message simply stating, "There was an error installing the fonts". Screenshot and gif:

error message

upload

  • What was the error, do you know?
  • If we don't know the error, we should not show any error. If we know the error, we should state exactly what went wrong.
  • If it is indeed an error, the notice shouldn't be green. It can be an error or warning.

Note that the font uploaded successfully, as far as I can tell. Was the notice, given it was green for success, meant to actually say something like "Upload successful"? If yes, then we we should ideally avoid such a notice entirely, and instead immediately upon succesfull upload, redirect to the font page itself, with the boxes checked. I.e. this page:

success

Nice work, this should be able to land in short order!

@github-actions
Copy link

github-actions bot commented Sep 22, 2023

Flaky tests detected in d94b1f4.
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/6322031380
📝 Reported issues:

@madhusudhand
Copy link
Member Author

madhusudhand commented Sep 25, 2023

@jasmussen Thanks for the feedback.

I will note that it would be okay to still have the whole modal be a dropzone, and invoke uploading regardless of which tab you are on. That's not a requirement, this is fine too, just noting.

Reverted the dropzone to previous state (whole modal being a dropzone). However, it is not yet supported in any tab page yet due the tab panel structure. I can create a followup ticket to add this behaviour.

Was the notice, given it was green for success, meant to actually say something like "Upload successful"? If yes, then we we should ideally avoid such a notice entirely, and instead immediately upon succesfull upload, redirect to the font page itself, with the boxes checked.

Yes, It is a success message after successful upload. The message was wrong.
As suggested I have removed the notice upon successful upload.
But, with current state of TabPanel component, it is not possible to programmatically switch tabs. I have created #46704 to add support, but unfortunately the v1 is marked for bug fixes only and there is v2 version in progress. Until then it is not possible to switch tabs.

Please suggest if we should use different approach in the interim.

If we don't know the error, we should not show any error. If we know the error, we should state exactly what went wrong.

With the current state of API, we do not have information about the exact error. I have created this followup issue to address it and removed the generic error for now.

@jasmussen
Copy link
Contributor

Sounds good.

Please suggest if we should use different approach in the interim.

If we cannot yet redirect on successful upload, you should at least get the success notice in the interim. But I hope we can build this in short order, it would be good to have for the feature.

@madhusudhand
Copy link
Member Author

If we cannot yet redirect on successful upload, you should at least get the success notice in the interim. But I hope we can build this in short order, it would be good to have for the feature.

Introduced the success notice. I have created #54779 to address this in future once the Tabs v2 gets merged.

image

@madhusudhand madhusudhand added the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label Sep 25, 2023
@mikachan mikachan added the [Feature] Typography Font and typography-related issues and PRs label Sep 25, 2023
@ironprogrammer
Copy link
Contributor

Thanks for the PR, @madhusudhand! Note that in my testing, I didn't see any error messages, only the success message.

Test Report

Environment

  • Hardware: MacBook Pro Apple M1 Pro
  • OS: macOS 13.5.2
  • Browser: Safari 16.6
  • Server: nginx/1.25.2
  • PHP: 7.4.33
  • WordPress: 6.4-alpha-56267-src
  • Theme: twentytwentythree v1.2
  • Active Plugins:
    • gutenberg v16.7.0-rc.1 (this PR)

Actual Results

  • ✅ Uploads dropzone is located on a new tab (see Figure 1).
  • ✅ After successful font upload, "Upload successful" message appears.
  • ✅ No snackbars were observed during font upload testing.
  • ❌ No error displayed when invalid filetype is drag-n-dropped (tried TXT, ZIP, SVG, EOT).
  • ⚠️ No warning feedback when mixed valid/invalid filetypes are drag-n-dropped (e.g. WOFF2 + SVG). Success message appears if any files uploaded successfully (see Figure 2).
  • ⚠️ Previous successful response message persists after failed upload attempt (see Figure 3).

Additional Information

  • ✅ I was able to install Inclusive Sans without issue (see report noted here).

Supplemental Artifacts

[Click to Expand] Figure 1: New Uploads dropzone location.

trac-54655-test

[Click to Expand] Figure 2: Mixed valid/invalid filetypes register as successful.

trac-54655-test-mixed

[Click to Expand] Figure 3: Success message remains following invalid upload attempt.

trac-54655-test-persist

Copy link
Contributor

@ironprogrammer ironprogrammer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking nice, @madhusudhand! One suggestion for the hint text here:

@madhusudhand
Copy link
Member Author

@ironprogrammer Thanks for the detailed feedback.

No error displayed when invalid filetype is drag-n-dropped (tried TXT, ZIP, SVG, EOT).

We do not have specific information as to why a font upload failed from API where an upload could fail for multiple reasons. All the error messaging is to be handled in this followup issue by returning proper error codes from the API.

No warning feedback when mixed valid/invalid filetypes are drag-n-dropped (e.g. WOFF2 + SVG)

For now you would see only a success message because the error notice was removed. It is possible that we will have successful uploads and errors by choosing mix of files. I have put the details on errors in this comment. Please share your thoughts.

Previous successful response message persists after failed upload attempt (see Figure 3).

It is fixed now.

Suggestion to streamline hint text, and move formats list to end of message for readability.

It is updated as per the suggestion.

@mikachan
Copy link
Member

As this PR hasn't been approved or merged yet and the latest version of Gutenberg is due to be released today, I'm going to remove the Backport to Gutenberg RC label. Please let me know if this doesn't sound right!

I'm going to add the Backport to WP Beta/RC label as the Font Library work is a "blessed" task for WordPress 6.4.

@mikachan mikachan added Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta and removed Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) labels Sep 27, 2023
Copy link
Contributor

@matiasbenedetto matiasbenedetto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking good! The problems existing around not displaying an error message when a font upload fails are not in the scope of this PR so let's merge and work on the follow-ups for the endpoints.

@matiasbenedetto matiasbenedetto merged commit 626e1ef into trunk Sep 28, 2023
52 checks passed
@matiasbenedetto matiasbenedetto deleted the font-lib/move-font-uploads branch September 28, 2023 17:56
@github-actions github-actions bot added this to the Gutenberg 16.8 milestone Sep 28, 2023
mikachan pushed a commit that referenced this pull request Sep 29, 2023
* move font uploads to a new tab in the modal

* fix invalid success message and revert the dropzone to modal

* add success notice for font uploads

* make supported file formats message dynamic based on allowed extensions

* update hint text and clear successful message with a fresh upload
@mikachan
Copy link
Member

I just cherry-picked this PR to the commits-for-6.4-beta2 branch to get it included in the next release: 75cb40f

@mikachan mikachan removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Sep 29, 2023
fluiddot pushed a commit that referenced this pull request Oct 2, 2023
* Fix the install of system fonts from a font collection (#54713)

* Fix set upload dir test (#54762)

* Site Editor: Prevent unintended actions on the classic theme (#54422)

* Add action and selector to track access to Patterns page

* Add a URL parameter to check if the Patterns page was accessed directly

* Revert lib changes

* Fix critical error in the Post Editor

* Explicitly add `! isBlockBasedTheme` with `isTemplatePartsMode`

* Fix critical error in the Post Editor

* Patterns: Fix back navigation after pattern creation (#54852)

* Patterns: Fix category control width in site editor (#54853)

* Patterns: Allow non-user patterns under Standard filter (#54756)

* Performance Tests: Separate page setup from test (#53808)

# Conflicts:
#	test/performance/specs/post-editor.spec.js

* Performance Tests: Support legacy selector for expanded elements (#54690)

* Paragraph: Make 'aria-label' consistent with other blocks (#54687)

* Paragraph: Make 'aria-label' consistent with other blocks

* Update tests

* Try using BC labels in performance tests

* Move lightbox render function to filter (#54670)

* syntax refactor repace strpos with str_contains (#54832)

* Font Library: avoid deprected error in test (#54802)

* fix deprecated call

* removing unwanted line

* Fix the ShortcutProvider usage (#54851)

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

* Image: Ensure `false` values are preserved in memory when defined in `theme.json` (#54639)

* Modify conditional when parsing config

* Only drop the value if it's undefined.

---------

Co-authored-by: Michal Czaplinski <mmczaplinski@gmail.com>

* Use "Not synced" in place of "Standard" nomenclature for patterns (#54839)

* Standard -> Not synced

* Fix broken test

---------

Co-authored-by: Glen Davies <glen.davies@automattic.com>

* Format Library: Try to fix highlight popover jumping (#54736)

* Move mime-type collection generation to a function that can be tested… (#54844)

* Move mime-type collection generation to a function that can be tested.  Refactored to use that function.

* linting changes

* Add unit tests to mime type getter

* Fixed linting errors

* test the entire output array and replace assertTrue by assertEquals

* fixing docs

---------

Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>

* Ensure lightbox toggle is shown if block-level setting exists (#54878)

* Block Editor: Update strings in blocks 'RenameModal' component (#54887)

* Footnotes: Add aria-label to return links (#54843)

* Add aria-label to footnotes front-end links.

* Add visual output. Fix PHPCS errors.

* Remove visual changes, fix in follow-up.

* Font Library: Changed the OTF mime type expected value to be what PHP returns (#54886)

* Changed the OTF mime type expected value to be what PHP returns

* add unit test for otf file installation

---------

Co-authored-by: madhusudhand <madhusudhan.dollu@gmail.com>

* Image: Fix layout shift when lightbox is opened and closed (#53026)

* Replace overflow: hidden with JavaScript callback to prevent scrolling

* Disable scroll callback on mobile; add comments; fix scrim styles

The page jumps around when trying to override the scroll behavior
on mobile, so I disabled it altogether. I've also added comments
to clarify this and other decisions made around the scroll handling.

While testing, I realized that the scrim was completely opaque during
the zoom animation, which does not match the design, so I added a new
animation specifically for the scrim to fix that.

* Add handling for horizontally oriented pages

* Move close button so that it's further from scrollbar on desktop

* Fix call to handleScroll() and add touch callback to new render method

* Improve lightbox experience on mobile

To ensure pinch to zoom works as expected when the lightbox
is open on mobile, I added logic to disable the scroll override
when touch is detected. Without this, the scroll override kicks
in whenever one tries to pinch to zoom, and it breaks the experience.

I also revised the styles for the scrim to make it opaque, as having
content visible outside of the lightbox is distracting when
pinching to zoom on a mobile device, and I think having a consistent
lightbox across devices will make for the best user experience.

* Fix spacing

* Add touch directives to block supports

* Fix spacing in block supports

* Rename attribute for clarity

* Update comment

* Update comments

* Fix spacing

---------

Co-authored-by: Ricardo Artemio Morales <ric.morales22@gmail.com>

* Font Library: move font uploads to a new tab (#54655)

* move font uploads to a new tab in the modal

* fix invalid success message and revert the dropzone to modal

* add success notice for font uploads

* make supported file formats message dynamic based on allowed extensions

* update hint text and clear successful message with a fresh upload

* Block custom CSS: Fix incorrect CSS when multiple root selectors (#53602)

* Block custom CSS: Fix incorrect CSS when multiple root selectors

* Fix PHP lint error

* Use `scope_selector` and `append_to_selector` method and update unit test

* Use `scopeSelector` and `appendToSelector` function and update JS unit test

* Update packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

* Update packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

* Update packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

* Update packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

* Update packages/block-editor/src/components/global-styles/utils.js

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

* re-trigger CI

---------

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

* Add new e2e test for creating a pattern (#54855)

* Use list role instead of listbox for patterns (#54884)

* Popover: Fix the styles for components that use emotion within popovers (#54912)

# Conflicts:
#	packages/components/CHANGELOG.md

* Footnotes: use core’s meta revisioning if available (#52988)

# Conflicts:
#	packages/block-library/src/footnotes/index.php

* Remove base url from link control search results  (#54553)

* Expose baseURL setting on Post and Site Editors via block settings

* Strip baseURL from rendered search results

* Only fetch baseURL once in top level component

* Simplify implementation to utilise URL parse functions

* Improve comment wording to avoid referencing undefined var

* Remove superfluous conditional

* Decode URL prior to operations

* Refactor for readability

* Fix where url is not defined

* Revert change to filter util

* Ensure that filterURLForDisplay always receives a string as an arg

* Make e2e test locator less strict

* Prefer pipe

* Force remove trailing slash

* [Site Editor]: Update copy of using  the default template in a page (#54728)

* Remove overflow: hidden from the entity title h1 in the site editor sidebar (#54769)

* Site Editor: Avoid same key warnings in template parts area listings (#54863)

* TemplateAreas use template part clientId as key
* HomeTemplateDetails use template part clientId as key
* Cleanup useSelect hook

* Fix ToolSelector popover variant (#54840)

* Font Library: refactor endpoint permissions (#54829)

* break the checking of user permission and file write permissions

* return error 500 if the request to the install fonts endpoint needs write permissions and wordpress doens't have write permission on the server

* do not ask file write permission on uninstall endpoint

* Standardize the output of install and uninstall fonts endpoints

Co-authored-by: Jason Crist <146530+pbking@users.noreply.github.com>
Co-authored-by: Jeff Ong <5375500+jffng@users.noreply.github.com>

* Handle standardized output from install and uninstall endpoints in the frontend

Co-authored-by: Jason Crist <146530+pbking@users.noreply.github.com>
Co-authored-by: Jeff Ong <5375500+jffng@users.noreply.github.com>

* Update the install and unintall fonts endpoints unit tests for the new standardized output format

Co-authored-by: Jason Crist <146530+pbking@users.noreply.github.com>
Co-authored-by: Jeff Ong <5375500+jffng@users.noreply.github.com>

* fix the refersh call for the library

Co-authored-by: Jason Crist <146530+pbking@users.noreply.github.com>
Co-authored-by: Jeff Ong <5375500+jffng@users.noreply.github.com>

---------

Co-authored-by: Jason Crist <146530+pbking@users.noreply.github.com>
Co-authored-by: Jeff Ong <5375500+jffng@users.noreply.github.com>

* Don’t use TypeScript files in scripts package (#54856)

* Fix Search Block not updating in Nav block (#54823)

* Avoid setState in render

* Attempt at test coverage

* Improve tests and make them work

* Remove word-wrap property (#54866)

---------

Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: Artemio Morales <artemio.morales@a8c.com>
Co-authored-by: Riad Benguella <benguella@gmail.com>
Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Co-authored-by: Michal Czaplinski <mmczaplinski@gmail.com>
Co-authored-by: Rich Tabor <hi@richtabor.com>
Co-authored-by: Glen Davies <glen.davies@automattic.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>
Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com>
Co-authored-by: madhusudhand <madhusudhan.dollu@gmail.com>
Co-authored-by: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com>
Co-authored-by: Ricardo Artemio Morales <ric.morales22@gmail.com>
Co-authored-by: Kai Hao <kevin830726@gmail.com>
Co-authored-by: Adam Silverstein <adamjs@google.com>
Co-authored-by: Dave Smith <getdavemail@gmail.com>
Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
Co-authored-by: Jason Crist <146530+pbking@users.noreply.github.com>
Co-authored-by: Jeff Ong <5375500+jffng@users.noreply.github.com>
Co-authored-by: Pascal Birchler <pascalb@google.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Typography Font and typography-related issues and PRs [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Font Library: replace snackbar error notices with new component
5 participants