Font library: Fix React key prop warnings (#57939)

* 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>

* Fix unique key prop warning when opening modal

* Add key props to FontsGrid children

* 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>

* Add slug/id back to FontCollection

* Change tabsFromCollections inline with Font Collections PR

* Use child.key for key prop in FontsGrid

* 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>

* Font Library REST API endpoints: address initial feedback from feature branch (#57946)

* Font Library: font collection refactor to use the new schema (#57884)

* google fonts collection data provisional url

* rename controller methods

* fix get_items parameters

* fix endpoint return

* rafactor font collection class

* fix tests for the refactored class

* refactor font collections rest controller

* update font collection tests

* update the frontend to use the new endpoint data schema

* format php

* adding linter line ignore rul

* replacing throwing an exception by calling doing_it_wrong

* add translation marks

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

* user ternary operator

* correct translation formatting and comments

* renaming function

* renaming tests

* improve url matching

Co-authored-by: Grant Kinney <creativecoder@users.noreply.github.com>

* return error without rest_ensure_response

* fix contradictory if condition

---------

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Grant Kinney <creativecoder@users.noreply.github.com>

* Remove old WP_REST_Autosave_Fonts_Controller class

---------

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>

packages/edit-site/src/components/global-styles/font-library-modal/fonts-grid.js

@@ -42,9 +42,13 @@ function FontsGrid( { title, children, pageSize = 32 } ) {
 				<div className="font-library-modal__fonts-grid__main">
 					{ items.map( ( child, i ) => {
 						if ( i === itemsLimit - 1 ) {
-							return <div ref={ setLastItem }>{ child }</div>;
+							return (
+								<div key={ child.key } ref={ setLastItem }>
+									{ child }
+								</div>
+							);
 						}
-						return child;
+						return <div key={ child.key }>{ child }</div>;
 					} ) }
 				</div>
 			</VStack>

packages/edit-site/src/components/global-styles/font-library-modal/style.scss

@@ -51,6 +51,7 @@
 
 .font-library-modal__font-card {
 	border: 1px solid #e5e5e5;
+	width: 100%;
 	height: auto;
 	padding: 1rem;
 	margin-top: -1px; /* To collapse the margin with the previous element */