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 <tonya.mork@automattic.com>

* 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 <824344+ironprogrammer@users.noreply.github.com>

* 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 <824344+ironprogrammer@users.noreply.github.com>

* remove extra space

Co-authored-by: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>

* 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 43dae169d80290f00486dbbe729e70042c731e8a.

* 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: WordPress/gutenberg#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 <matias.benedetto@gmail.com>

* 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 <tonya.mork@automattic.com>
Co-authored-by: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>
Co-authored-by: Sarah Norris <sarah@sekai.co.uk>
Co-authored-by: madhusudhand <madhusudhan.dollu@gmail.com>
Co-authored-by: Vicente Canales <vicente.canales@automattic.com>
Co-authored-by: Vicente Canales <1157901+vcanales@users.noreply.github.com>
Co-authored-by: jasmussen <joen@automattic.com>

Source: WordPress/gutenberg@933abd6

build/edit-site/index.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-api-fetch', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-commands', 'wp-components', 'wp-compose', 'wp-core-commands', 'wp-core-data', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-editor', 'wp-element', 'wp-escape-html', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-media-utils', 'wp-notices', 'wp-patterns', 'wp-plugins', 'wp-polyfill', 'wp-preferences', 'wp-primitives', 'wp-private-apis', 'wp-reusable-blocks', 'wp-router', 'wp-url', 'wp-viewport', 'wp-widgets', 'wp-wordcount'), 'version' => '897627903f40f4e039f9');
+<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-api-fetch', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-commands', 'wp-components', 'wp-compose', 'wp-core-commands', 'wp-core-data', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-editor', 'wp-element', 'wp-escape-html', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-media-utils', 'wp-notices', 'wp-patterns', 'wp-plugins', 'wp-polyfill', 'wp-preferences', 'wp-primitives', 'wp-private-apis', 'wp-reusable-blocks', 'wp-router', 'wp-url', 'wp-viewport', 'wp-widgets', 'wp-wordcount'), 'version' => '7bab1efc2e92573e0390');

gutenberg.php

@@ -14,7 +14,7 @@
 
 ### BEGIN AUTO-GENERATED DEFINES
 define( 'GUTENBERG_VERSION', '16.6.0' );
-define( 'GUTENBERG_GIT_COMMIT', '2877de5af0fe5d794cdf4df333badb7b47fddd11' );
+define( 'GUTENBERG_GIT_COMMIT', '933abd68e0af907b29c4a28cd8f1ae577174d681' );
 ### END AUTO-GENERATED DEFINES
 
 gutenberg_pre_init();

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' ) ) {