Font Library: Frontend [Stage 1] (#53884)

* adding files from original branch try/font-library

* importing remaining files

* renaming font library to fonts library

* renaming FontLibraryModal to FontsLibraryModal

* update frontend based on backend changes

* TEMPORAL FIX: Adding Google fonts endpoint a font families list

* update uninstall functionality to latest backend implementation

* fix loadedUrls state

* fixing library not refreshing after uninstall

* move uninstall notification functionality to context

* Add notification on snackbar when installing fonts

* lint js

* renaming FontS Library to Font Library

* Removing google_fonts api endpoint

* Removing Google fonts specific code

* refresh library after local fonts upload

* remove unwanted console.log

* css fix

* removing file key from fontface data sent to the server

* open local fonts tab when click the + button

* remove font slug prefix

* removing empty line

Co-authored-by: Tonya Mork <[email protected]>

* check by source (theme and custom)if fonts are activated

* delete demo related component and function

* remove font family previews

* modal width

* implementing mockups look for library font variants

* reduce margin

* display unintall button disabled when the font can not be uninstalled

* removing preview controls link

* removing unused imports

* lint css

* lint css

* fix import

* deactivate font families before uninstalling them

* flip buttons order

* Moving uninstall button to modal footer

* be able to indicate nested paths on __experimentalSaveSpecifiedEntityEdits

* save only fontFamilies when persisting global styles from font library modal

* Add edits data to the useEntityRecord

* disable save button when there are no changes to be saved

* add notification when font families are updated

* upload local fonts just after selecting them

* Removing upload local fonts tab from modal

* drop zone background color

* remove unused import

* activate fonts just after installed

* fix typo

* hide confirm dialog after deleting font

* remove + button

* fix merging font families functions

* add tests for mergeFontFamilies and mergeFontFaces functions

* add tests  for getFontFaceVariantName

* fix logic bug and add tests for isUrlEnconded function

* fix logic bug in setUIValuesNeeded function

* add tests for  setUIValuesNeeded function

* move utils and utils tests

* remove import not needed

* remove default demo config

* fix typo

Co-authored-by: Brian Alexander <[email protected]>

* update file extensions allowed in file dialog on mac

In macOS Safari and Chrome, using font/* for the system upload dialog allows .ttf and .otf, but doesn't allow .woff/.woff2.

Co-authored-by: Brian Alexander <[email protected]>

* remove extra space

Co-authored-by: Brian Alexander <[email protected]>

* Apply coding standards

* Make font cards buttons

* Fix linter errors

* Fix max depth error

* Revert font lib formatting

* Fix linter errors

* Undo e2e test linter fixes

Not related to this PR

* Remove more e2e test changes

* fixing error persisting activation changes

* improving font previews

* adding unit tests for getPreviewStyle util

* lint fix

* fix accepted file extensions not working properly on firefox

* sort font faces by weight

* move the code of toggleActivatedFont to a another file to reduce their size and make it easier to read

* adding tests for toggleFont

* lint

* avoid resetting theme font families when activating or deactivating font famiies when install or uninstall

* fix issue where fontFace length is zero

* Add deps comment to toggleFont file

* Fix theme and custom undefined errors

* Add initial e2e tests

* Refactor e2e test order

* avoid re-activating all the font faces of a installed font when a new font face is installed

* adding tests for utils functions

* renaming parameters

* adding jsdoc for function

* remove code no longer needed

* avoid potential errors with non existing fontFace array

* Revert "avoid potential errors with non existing fontFace array"

This reverts commit 43dae16.

* fix error uploading several font faces from different font families

* Fix font library modal prop typo

* activate the right font faces (the installed ones instead of the local definitions).

* Font library: load font assets on editor canvas (#54334)

* Font library: load font assets on editor canvas

This change adds loaded font faces to the editor canvas iframe so that they can be used immediately after uploading them.

Re: #51764

* load font families on iframe on activation

* removing addFontFaceToBrowser function and consolidate it with loadFontFaceInBrowser that was doing almost the same

---------

Co-authored-by: Matias Benedetto <[email protected]>

* removing success snackbar notifications

* update  uninstall font family button look

* delete any change to save-button component

* use a simple file id for uploaded files

* Update delete button to be tertiary.

* fix test

* use FONT_LIBRARY_DISABLE constant to disable Font Library and Font Face loading and load Font API instead

* move confirm uninstall dialog to a new component

* adding progress bar while installing fonts

* add early return

* format php

* removing not needed changes to save hub button

---------

Co-authored-by: Tonya Mork <[email protected]>
Co-authored-by: Brian Alexander <[email protected]>
Co-authored-by: Sarah Norris <[email protected]>
Co-authored-by: madhusudhand <[email protected]>
Co-authored-by: Vicente Canales <[email protected]>
Co-authored-by: Vicente Canales <[email protected]>
Co-authored-by: jasmussen <[email protected]>

lib/experimental/fonts/font-library/font-library.php

@@ -55,3 +55,11 @@ function wp_register_font_collection( $config ) {
 		return WP_Font_Library::register_font_collection( $config );
 	}
 }
+
+// @core-merge: This code needs to be removed.
+add_action(
+	'enqueue_block_editor_assets',
+	function () {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalFontLibrary = true', 'before' );
+	}
+);

lib/load.php

@@ -132,8 +132,7 @@ function gutenberg_is_experiment_enabled( $name ) {
  * keeping Fonts API available for sites that are using it.
  */
 if (
-	( defined( 'FONT_LIBRARY_ENABLE' ) && FONT_LIBRARY_ENABLE ) ||
-	( defined( 'FONTS_LIBRARY_ENABLE' ) && FONTS_LIBRARY_ENABLE )
+	! defined( 'FONT_LIBRARY_DISABLED' ) || ! FONT_LIBRARY_DISABLED
 ) {
 	// Loads the Font Library.
 	if ( ! class_exists( 'WP_Font_Library' ) ) {