-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Conversation
…arent (#57867) Co-authored-by: Sarah Norris <[email protected]>
…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 <[email protected]> * 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 <[email protected]> Co-authored-by: Jason Crist <[email protected]>
* 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Matias Benedetto <[email protected]> Co-authored-by: Sarah Norris <[email protected]>
* 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 <[email protected]>
…odal/local-fonts.js Co-authored-by: Jonny Harris <[email protected]>
* 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 <[email protected]> --------- Co-authored-by: Jeff Ong <[email protected]>
# 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
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
There was a problem hiding this 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
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. |
There was a problem hiding this 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.
@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 👍 |
message: e?.message, | ||
duration: 0, // Don't auto-hide. | ||
} ); | ||
if ( ! notice ) { |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.)
There was a problem hiding this 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.
…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) ...
* 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Jason Crist <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Matias Benedetto <[email protected]> Co-authored-by: Sarah Norris <[email protected]> * 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 <[email protected]> * Update packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js Co-authored-by: Jonny Harris <[email protected]> * 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 <[email protected]> --------- Co-authored-by: Jeff Ong <[email protected]> * 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 <[email protected]> Co-authored-by: Grant Kinney <[email protected]> Co-authored-by: Jeff Ong <[email protected]> Co-authored-by: Matias Benedetto <[email protected]> Co-authored-by: Jason Crist <[email protected]> Co-authored-by: Jonny Harris <[email protected]>
I just cherry-picked this PR to the release/17.6 branch to get it included in the next release: 6715cf5 |
* 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Jason Crist <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Matias Benedetto <[email protected]> Co-authored-by: Sarah Norris <[email protected]> * 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 <[email protected]> * Update packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js Co-authored-by: Jonny Harris <[email protected]> * 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 <[email protected]> --------- Co-authored-by: Jeff Ong <[email protected]> * 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 <[email protected]> Co-authored-by: Grant Kinney <[email protected]> Co-authored-by: Jeff Ong <[email protected]> Co-authored-by: Matias Benedetto <[email protected]> Co-authored-by: Jason Crist <[email protected]> Co-authored-by: Jonny Harris <[email protected]>
What?
This PR attempts to improve the way notices are handled in the Font Library modal, by passing the
notice
up to theTabPanelLayout
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 fromFontCollection
,InstalledFonts
, andLocalFonts
Notice
component has been added toTabPanelLayout
componentFontCollection
,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
TabPanelLayout
component, for example by adding this just before the return on line 29:Screenshots or screencast
Library Tab
Upload Tab
Font Collection Tab