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: Make notices more consistent #58180

Merged
merged 30 commits into from
Jan 26, 2024
Merged

Conversation

mikachan
Copy link
Member

@mikachan mikachan commented Jan 24, 2024

What?

This PR attempts to improve the way notices are handled in the Font Library modal, by passing the notice up to the TabPanelLayout container component.

This PR also includes a change to make the notices manually dismissible, in line with this comment: #55975 (comment)

Please note that local-fonts.js has been renamed upload-fonts.js, as local-fonts.js was just a container with a spacer that imported upload-fonts.js. The spacer is no longer needed, as it looks like it was only there to provide spacing between the notice and the upload component, and this is now handled in TabPanelLayout. See further information here: #58180 (comment).

Why?

This makes all the notices in the modal appear in the same place and means that they are all handled via TabPanelLayout, rather than separately by each component. It also makes the notices easier to update as there is less code to change.

How?

  • Notice component has been removed from FontCollection, InstalledFonts, and LocalFonts
  • Notice component has been added to TabPanelLayout component
  • Notice logic is still the same for FontCollection, InstalledFonts, and LocalFonts, but the state has been moved from the local state of each component to the global Font Library state

Testing Instructions

  1. Open the Font Library modal
  2. Trigger various notices in all the tabs (Library, Upload, Font Collection)
  3. Ensure all notices appear correctly and in the same place

The easiest notice to show is the success notice when a new font is installed. Alternatively, force a notice to show in the TabPanelLayout component, for example by adding this just before the return on line 29:

notice = {
	type: 'success',
	message: 'This is a test notice',
};

Screenshots or screencast

Library Tab

Before After
image image

Upload Tab

Before After
image image

Font Collection Tab

Before After
image image

creativecoder and others added 22 commits January 12, 2024 13:37
…arent (#57867)

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>
…ised API (#57844)

* Add batchInstallFontFaces function and related plumbing.

* Fix resolver name.

* Add embedding and rebuild theme.json settings for fontFamily.

* Handle responses directly, add to collection before activating. Remove unused test.

* Remove getIntersectingFontFaces.

* Check for existing font family before installing.

* Reference src, not uploadedFile key.

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

* Check for existing font family using GET /font-families?slug=.

* Filter already installed font faces (determined by matching fontWeight AND fontStyle)

---------

Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>
* Add batchInstallFontFaces function and related plumbing.

* Fix resolver name.

* Add embedding and rebuild theme.json settings for fontFamily.

* Handle responses directly, add to collection before activating. Remove unused test.

* Remove getIntersectingFontFaces.

* Check for existing font family before installing.

* Reference src, not uploadedFile key.

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

* Check for existing font family using GET /font-families?slug=.

* Filter already installed font faces (determined by matching fontWeight AND fontStyle)

* moved response processing into the resolver for fetchGetFontFamilyBySlug

* Moved response processing for font family installation to the resolver

* Refactored font face installation process to handle errors more cleanly

* Cleanup error handling for font library view

* Add i18n function to error messages

* Add TODO comment for uninstall notice

---------

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Sarah Norris <sarah@sekai.co.uk>
* Fix delete endpoint

* Update fetchUninstallFontFamily to match new format

* Update uninstallFont

* Add uninstall notice back in

* Tidy up comments

* Re-word uninstall notices

* Add spacing to error message

* Refactored how font family values were processed so they would retain their id, which is now used to delete a font family without fetching data via slug

* Rename uninstallFont to uninstallFontFamily

* Throw uninstall errors rather than returning them

---------

Co-authored-by: Jason Crist <jcrist@pbking.com>
…odal/local-fonts.js

Co-authored-by: Jonny Harris <spacedmonkey@users.noreply.github.com>
* Wrap error messages in sprintf

* Use await rather than then

* Add variables for API URLs

* Update packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js

Co-authored-by: Jeff Ong <jonger4@gmail.com>

---------

Co-authored-by: Jeff Ong <jonger4@gmail.com>
# Conflicts:
#	lib/experimental/fonts/font-library/class-wp-rest-font-faces-controller.php
#	lib/experimental/fonts/font-library/class-wp-rest-font-families-controller.php
#	lib/experimental/fonts/font-library/font-library.php
#	lib/load.php
#	packages/edit-site/src/components/global-styles/font-library-modal/context.js
#	packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
#	packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js
#	packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
#	phpunit/tests/fonts/font-library/fontLibraryHooks.php
#	phpunit/tests/fonts/font-library/wpRestFontFacesController.php
#	phpunit/tests/fonts/font-library/wpRestFontFamiliesController.php
Copy link

github-actions bot commented Jan 24, 2024

Size Change: +193 B (0%)

Total Size: 1.7 MB

Filename Size Change
build/block-editor/index.min.js 250 kB +8 B (0%)
build/block-editor/style-rtl.css 15.4 kB +7 B (0%)
build/block-editor/style.css 15.3 kB +7 B (0%)
build/block-library/blocks/embed/editor-rtl.css 322 B +29 B (+10%) ⚠️
build/block-library/blocks/embed/editor.css 322 B +29 B (+10%) ⚠️
build/block-library/editor-rtl.css 12.3 kB +11 B (0%)
build/block-library/editor.css 12.3 kB +10 B (0%)
build/block-library/index.min.js 215 kB +15 B (0%)
build/components/index.min.js 235 kB +224 B (0%)
build/components/style-rtl.css 12 kB -30 B (0%)
build/components/style.css 12 kB -28 B (0%)
build/edit-site/index.min.js 195 kB -63 B (0%)
build/edit-site/style-rtl.css 15.1 kB -13 B (0%)
build/edit-site/style.css 15.2 kB -13 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 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.22 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.38 kB
build/block-editor/content.css 4.38 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
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 126 B
build/block-library/blocks/audio/theme.css 126 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 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.69 kB
build/block-library/blocks/cover/style.css 1.68 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/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 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 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 316 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 452 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 947 B
build/block-library/blocks/gallery/editor.css 952 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 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 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 863 B
build/block-library/blocks/image/editor.css 862 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 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view.min.js 2.01 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 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 103 B
build/block-library/blocks/navigation-link/style.css 103 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.25 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.24 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.1 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-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 666 B
build/block-library/blocks/post-featured-image/editor.css 662 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 354 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 312 B
build/block-library/blocks/query/style.css 308 B
build/block-library/blocks/query/view.min.js 1.1 kB
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 223 B
build/block-library/blocks/quote/theme.css 226 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 614 B
build/block-library/blocks/search/style.css 614 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 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 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.49 kB
build/block-library/blocks/social-links/style.css 1.49 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 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 146 B
build/block-library/blocks/table/theme.css 146 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 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.7 kB
build/block-library/style.css 14.7 kB
build/block-library/theme-rtl.css 688 B
build/block-library/theme.css 693 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.5 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 921 B
build/commands/style.css 918 B
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.71 kB
build/core-data/index.min.js 72.7 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.34 kB
build/customize-widgets/style.css 1.33 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.92 kB
build/date/index.min.js 17.8 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 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 25 kB
build/edit-post/style-rtl.css 5.62 kB
build/edit-post/style.css 5.61 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.39 kB
build/edit-widgets/style.css 4.39 kB
build/editor/index.min.js 61.5 kB
build/editor/style-rtl.css 5.42 kB
build/editor/style.css 5.42 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.93 kB
build/format-library/style-rtl.css 478 B
build/format-library/style.css 477 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/file.min.js 440 B
build/interactivity/image.min.js 2.15 kB
build/interactivity/index.min.js 12.9 kB
build/interactivity/navigation.min.js 1.23 kB
build/interactivity/query.min.js 884 B
build/interactivity/router.min.js 952 B
build/interactivity/search.min.js 610 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.74 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 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 2 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/patterns/index.min.js 5.47 kB
build/patterns/style-rtl.css 540 B
build/patterns/style.css 539 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.07 kB
build/preferences/index.min.js 2.81 kB
build/preferences/style-rtl.css 698 B
build/preferences/style.css 700 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.72 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.4 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.95 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.07 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.72 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 957 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@mikachan
Copy link
Member Author

Thanks @creativecoder!

This has me wondering if this is the wrong UI pattern to use here, or maybe there's a better place to put the notice. 🤔

I'm also unsure about the notice placement and the layout shift, I'm going to take a look at some options in a separate PR.

I've added another commit so that the notice is also reset on each action: e7fb1e8.

mikachan and others added 2 commits January 25, 2024 11:26
# Conflicts:
#	packages/edit-site/src/components/global-styles/font-library-modal/style.scss
#	packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
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.

When the list of font faces require scroll the notification won't be visible.
Should we make the notice float above the elements?

2024-01-25.10-34-22.mp4

@matiasbenedetto
Copy link
Contributor

matiasbenedetto commented Jan 25, 2024

In this case where one of the font collections fail to load the data: should the notification be removed if you switch to another tab?

2024-01-25.10-38-08.mp4

@mikachan
Copy link
Member Author

Thanks @matiasbenedetto!

Should we make the notice float above the elements?

I was going to explore that in a different PR as it's a further deviation from the original design, but I can continue in this PR if you think that's best.

In this case where one of the font collections fail to load the data: should the notification be removed if you switch to another tab?

This should be handled by the tabs onSelect function. It looks like setNotice is causing the collection tab to re-render if there's an error, this should be fixed with 9705a48.

@matiasbenedetto
Copy link
Contributor

I was going to explore that in a different PR as it's a further deviation from the original design.

Yep, it's a good idea to implement it in a follow-up PR.

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 and working well on my tests.
LGTM.

@mikachan
Copy link
Member Author

Something about the notice being above the header within the tab makes the content jump when the notice is inserted more disturbing to me.

@creativecoder I think I have a potential improvement for this in ccf7f40. This moves the notice below the font collection header section, but it's still in the same place for the other tabs:

Library Upload Font Collection
image image image

I think this is most similar to the current implementation, and then we can explore further design options in a separate PR if needed.

@mikachan
Copy link
Member Author

Sorry @matiasbenedetto, I posted an update just as you commented 🙈 It's only a small change and I think it's an improvement.

@matiasbenedetto
Copy link
Contributor

Sorry @matiasbenedetto, I posted an update just as you commented 🙈 It's only a small change and I think it's an improvement.

It looks better, nice improvement 👍

message: e?.message,
duration: 0, // Don't auto-hide.
} );
if ( ! notice ) {
Copy link
Contributor

@pbking pbking Jan 25, 2024

Choose a reason for hiding this comment

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

Do we have to check for notice? I think we could remove this line.

Copy link
Member Author

@mikachan mikachan Jan 26, 2024

Choose a reason for hiding this comment

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

I added this as the fetchFontCollection function keeps re-setting the notice on failure if there is an error with the font collection (e.g. something wrong with the JSON file), and it was causing an infinite loop of setting the error notice, I think because setNotice is a dependency of the useEffect where this function is called, so the notice was causing a re-render. This line fixed the issue (original discussion here). (This is happening on trunk, so I guess this isn't 100% related to this PR.)

Copy link
Contributor

@pbking pbking left a comment

Choose a reason for hiding this comment

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

Left a tiny comment about maybe removing one line. Code looks great and it works exactly like I would hope it to. Nicely done.

@mikachan mikachan merged commit d3a8846 into trunk Jan 26, 2024
56 checks passed
@mikachan mikachan deleted the font-library/update-notices branch January 26, 2024 13:21
@github-actions github-actions bot added this to the Gutenberg 17.7 milestone Jan 26, 2024
westonruter added a commit that referenced this pull request Jan 26, 2024
…zy-hydration

* origin/trunk: (47 commits)
  Interactivity API: Break up long hydration task in interactivity init (#58227)
  Add supports.interactivity to Query block (#58316)
  Font Library: Make notices more consistent (#58180)
  Fix Global styles text settings bleeding into placeholder component (#58303)
  Fix the position and size of the Options menu, (#57515)
  DataViews: Fix safari grid row height issue (#58302)
  Try a fix (#58282)
  Navigation Submenu Block: Make block name affect list view (#58296)
  Apply custom scroll style to fixed header block toolbar (#57444)
  Add support for transform and letter spacing controls in Global Styles > Typography > Elements (#58142)
  DataViews: Fix table view cell wrapper and BlockPreviews (#58062)
  Workflows: Add 'Technical Prototype' to the type-related labels list (#58163)
  Block Editor: Optimize the 'useBlockDisplayTitle' hook (#58250)
  Remove noahtallen from .wp-env codeowners (#58283)
  Global styles revisions: fix is-selected rules from affecting other areas of the editor (#58228)
  Try: Disable text selection for post content placeholder block. (#58169)
  Remove `template-only` mode from editor and edit-post packages (#57700)
  Refactored download/upload logic to support font faces with multiple src assets (#58216)
  Components: Expand theming support in COLORS (#58097)
  Implementing new UX for invoking rich text Link UI  (#57986)
  ...
@creativecoder creativecoder added the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label Jan 29, 2024
cbravobernal pushed a commit that referenced this pull request Jan 30, 2024
* Font Library: add wp_font_face post type and scaffold font face REST API controller (#57656)

* Font Library: create font faces through the REST API (#57702)

* Refactor Font Family Controller (#57785)

* Font Family and Font Face REST API endpoints: better data handling and errors  (#57843)

* Font Families REST API endpoint: ensure unique font family slugs (#57861)

* Font Library: delete child font faces and font assets when deleting parent (#57867)

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

* Font Library: refactor client side install functions to work with revised API (#57844)

* Add batchInstallFontFaces function and related plumbing.

* Fix resolver name.

* Add embedding and rebuild theme.json settings for fontFamily.

* Handle responses directly, add to collection before activating. Remove unused test.

* Remove getIntersectingFontFaces.

* Check for existing font family before installing.

* Reference src, not uploadedFile key.

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

* Check for existing font family using GET /font-families?slug=.

* Filter already installed font faces (determined by matching fontWeight AND fontStyle)

---------

Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>

* Cleanup/font library view error handling (#57926)

* Add batchInstallFontFaces function and related plumbing.

* Fix resolver name.

* Add embedding and rebuild theme.json settings for fontFamily.

* Handle responses directly, add to collection before activating. Remove unused test.

* Remove getIntersectingFontFaces.

* Check for existing font family before installing.

* Reference src, not uploadedFile key.

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

* Check for existing font family using GET /font-families?slug=.

* Filter already installed font faces (determined by matching fontWeight AND fontStyle)

* moved response processing into the resolver for fetchGetFontFamilyBySlug

* Moved response processing for font family installation to the resolver

* Refactored font face installation process to handle errors more cleanly

* Cleanup error handling for font library view

* Add i18n function to error messages

* Add TODO comment for uninstall notice

---------

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Sarah Norris <sarah@sekai.co.uk>

* Font Faces endpoint: prevent creating font faces with duplicate settings (#57903)

* Font Library: Update uninstall/delete on client side (#57932)

* Fix delete endpoint

* Update fetchUninstallFontFamily to match new format

* Update uninstallFont

* Add uninstall notice back in

* Tidy up comments

* Re-word uninstall notices

* Add spacing to error message

* Refactored how font family values were processed so they would retain their id, which is now used to delete a font family without fetching data via slug

* Rename uninstallFont to uninstallFontFamily

* Throw uninstall errors rather than returning them

---------

Co-authored-by: Jason Crist <jcrist@pbking.com>

* Update packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js

Co-authored-by: Jonny Harris <spacedmonkey@users.noreply.github.com>

* Font Library: address JS feedback in #57688 (#57961)

* Wrap error messages in sprintf

* Use await rather than then

* Add variables for API URLs

* Update packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js

Co-authored-by: Jeff Ong <jonger4@gmail.com>

---------

Co-authored-by: Jeff Ong <jonger4@gmail.com>

* Add missing dep in font-demo

* Move notice to top of local-fonts panel

* Add container around spinner

* Move notice to TabPanelLayout

* Remove spacer from LocalFonts

* Move notice and setNotice state to context.js

* Move spacer outside of notice container

* Rename LocalFonts to UploadFonts

* Make notices dismissible

* Reset notices onRemove

* Reset notice when new tab is selected

* Reset notice on each action

* Fix notice re-render on fetchFontCollection

* Move notices below font collection title and description

---------

Co-authored-by: Grant Kinney <creativecoder@users.noreply.github.com>
Co-authored-by: Grant Kinney <hi@grant.mk>
Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>
Co-authored-by: Jonny Harris <spacedmonkey@users.noreply.github.com>
@cbravobernal
Copy link
Contributor

I just cherry-picked this PR to the release/17.6 branch to get it included in the next release: 6715cf5

@cbravobernal cbravobernal removed the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label Jan 30, 2024
youknowriad pushed a commit that referenced this pull request Jan 31, 2024
* Font Library: add wp_font_face post type and scaffold font face REST API controller (#57656)

* Font Library: create font faces through the REST API (#57702)

* Refactor Font Family Controller (#57785)

* Font Family and Font Face REST API endpoints: better data handling and errors  (#57843)

* Font Families REST API endpoint: ensure unique font family slugs (#57861)

* Font Library: delete child font faces and font assets when deleting parent (#57867)

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

* Font Library: refactor client side install functions to work with revised API (#57844)

* Add batchInstallFontFaces function and related plumbing.

* Fix resolver name.

* Add embedding and rebuild theme.json settings for fontFamily.

* Handle responses directly, add to collection before activating. Remove unused test.

* Remove getIntersectingFontFaces.

* Check for existing font family before installing.

* Reference src, not uploadedFile key.

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

* Check for existing font family using GET /font-families?slug=.

* Filter already installed font faces (determined by matching fontWeight AND fontStyle)

---------

Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>

* Cleanup/font library view error handling (#57926)

* Add batchInstallFontFaces function and related plumbing.

* Fix resolver name.

* Add embedding and rebuild theme.json settings for fontFamily.

* Handle responses directly, add to collection before activating. Remove unused test.

* Remove getIntersectingFontFaces.

* Check for existing font family before installing.

* Reference src, not uploadedFile key.

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

* Check for existing font family using GET /font-families?slug=.

* Filter already installed font faces (determined by matching fontWeight AND fontStyle)

* moved response processing into the resolver for fetchGetFontFamilyBySlug

* Moved response processing for font family installation to the resolver

* Refactored font face installation process to handle errors more cleanly

* Cleanup error handling for font library view

* Add i18n function to error messages

* Add TODO comment for uninstall notice

---------

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Sarah Norris <sarah@sekai.co.uk>

* Font Faces endpoint: prevent creating font faces with duplicate settings (#57903)

* Font Library: Update uninstall/delete on client side (#57932)

* Fix delete endpoint

* Update fetchUninstallFontFamily to match new format

* Update uninstallFont

* Add uninstall notice back in

* Tidy up comments

* Re-word uninstall notices

* Add spacing to error message

* Refactored how font family values were processed so they would retain their id, which is now used to delete a font family without fetching data via slug

* Rename uninstallFont to uninstallFontFamily

* Throw uninstall errors rather than returning them

---------

Co-authored-by: Jason Crist <jcrist@pbking.com>

* Update packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js

Co-authored-by: Jonny Harris <spacedmonkey@users.noreply.github.com>

* Font Library: address JS feedback in #57688 (#57961)

* Wrap error messages in sprintf

* Use await rather than then

* Add variables for API URLs

* Update packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js

Co-authored-by: Jeff Ong <jonger4@gmail.com>

---------

Co-authored-by: Jeff Ong <jonger4@gmail.com>

* Add missing dep in font-demo

* Move notice to top of local-fonts panel

* Add container around spinner

* Move notice to TabPanelLayout

* Remove spacer from LocalFonts

* Move notice and setNotice state to context.js

* Move spacer outside of notice container

* Rename LocalFonts to UploadFonts

* Make notices dismissible

* Reset notices onRemove

* Reset notice when new tab is selected

* Reset notice on each action

* Fix notice re-render on fetchFontCollection

* Move notices below font collection title and description

---------

Co-authored-by: Grant Kinney <creativecoder@users.noreply.github.com>
Co-authored-by: Grant Kinney <hi@grant.mk>
Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>
Co-authored-by: Jonny Harris <spacedmonkey@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants