Font Library: Make notices more consistent #58180
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…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
mikachan
added
[Type] Enhancement
|
Size Change: +193 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
|
Thanks @creativecoder!
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. |
# 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
|
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 |
|
Thanks @matiasbenedetto!
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.
This should be handled by the tabs |
Yep, it's a good idea to implement it in a follow-up PR. |
matiasbenedetto
approved these changes
Jan 25, 2024
@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:
I think this is most similar to the current implementation, and then we can explore further design options in a separate PR if needed. |
|
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 👍 |
pbking
reviewed
Jan 25, 2024
| message: e?.message, | ||
| duration: 0, // Don't auto-hide. | ||
| } ); | ||
| if ( ! notice ) { |
There was a problem hiding this comment.
Do we have to check for notice? I think we could remove this line.
There was a problem hiding this comment.
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.)
pbking
approved these changes
Jan 25, 2024
This was referenced 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
added
the
Backport to Gutenberg RC
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>
|
I just cherry-picked this PR to the release/17.6 branch to get it included in the next release: 6715cf5 |
cbravobernal
removed
the
Backport to Gutenberg RC
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR attempts to improve the way notices are handled in the Font Library modal, by passing the
noticeup to theTabPanelLayoutcontainer 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?
Noticecomponent has been removed fromFontCollection,InstalledFonts, andLocalFontsNoticecomponent has been added toTabPanelLayoutcomponentFontCollection,InstalledFonts, andLocalFonts, but the state has been moved from the local state of each component to the global Font Library stateTesting Instructions
The easiest notice to show is the success notice when a new font is installed. Alternatively, force a notice to show in the
TabPanelLayoutcomponent, for example by adding this just before the return on line 29:Screenshots or screencast
Library Tab
Upload Tab
Font Collection Tab