Font manager

.eslintrc.js

@@ -201,6 +201,9 @@ module.exports = {
 		'plugin:eslint-comments/recommended',
 	],
 	globals: {
+		File: 'readonly',
+		fetch: 'readonly',
+		FileReader: 'readonly',
 		wp: 'off',
 	},
 	settings: {

lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php

@@ -301,4 +301,4 @@ public function get_theme_items( $request ) {
 
 		return $response;
 	}
-}
+}

lib/compat/wordpress-6.3/class-gutenberg-rest-global-styles-controller-6-3.php

@@ -48,4 +48,175 @@ protected function prepare_links( $id ) {
 
 		return $links;
 	}
+
+
+	protected function get_font_file_extension ( $mime ) {
+		$extensions = array(
+			'font/ttf' => 'ttf',
+			'font/woff' => 'woff',
+			'font/woff2' => 'woff2',
+		);
+		if ( isset( $extensions[ $mime] ) ) {
+			return $extensions[ $mime ];
+		}
+		throw new Exception('Mime type not allowed');
+	}
+
+	protected function base64_decode_file($data) {
+		if(preg_match('/^data\:([a-zA-Z]+\/[a-zA-Z]+);base64\,([a-zA-Z0-9\+\/]+\=*)$/', $data, $matches)) {
+			return [
+					'mime' => $matches[1],
+					'data' => base64_decode($matches[2]),
+			];
+		}
+		return false;
+	}
+
+	protected function delete_custom_fonts () {
+		$fonts_dir = $this->get_fonts_dir();
+		$files = glob( $fonts_dir['basedir'] . '/*' );
+		foreach ( $files as $file ) {
+			if ( is_file( $file ) ) {
+				unlink( $file );
+			}
+		}
+	}
+
+	protected function delete_font_asset ( $font_face ) {
+		$fonts_dir = $this->get_fonts_dir();  
+		foreach ( $font_face['src'] as $url ) {
+			// TODO: make this work with relative urls too
+			$filename = basename( $url );
+			$filepath = $fonts_dir['basedir'] . $filename;
+			if ( file_exists( $filepath ) ) {
+				return unlink(
+					$filepath
+				);
+			}
+		}
+		return false;
+	}
+
+	protected function get_fonts_dir () {
+		$theme_data = wp_get_theme();
+		$theme_slug = $theme_data->get('TextDomain');
+		$upload_dir = wp_upload_dir();
+		$fonts_dir = $upload_dir['basedir'] . DIRECTORY_SEPARATOR . 'fonts' . DIRECTORY_SEPARATOR . $theme_slug . DIRECTORY_SEPARATOR;
+		$font_path = $upload_dir['baseurl']."/fonts/".$theme_slug."/".$file_name;
+		return array (
+			'basedir' => $fonts_dir,
+			'baseurl' => $font_path,
+		);
+	}
+
+	protected function write_font_face ( $font_face ) {
+		$font_asset = $this->base64_decode_file( $font_face['base64'] );
+
+		$file_extension = $this->get_font_file_extension( $font_asset[ 'mime' ] );
+        $file_name = $font_face['fontFamily'].'_'.$font_face['fontStyle'].'_'.$font_face['fontWeight'].'.'.$file_extension;
+
+		$fonts_dir = $this->get_fonts_dir();  		
+		wp_mkdir_p( $fonts_dir['basedir'] );
+		file_put_contents( $fonts_dir['basedir'] . $file_name, $font_asset['data'] );
+
+		$new_font_face =  $font_face;
+		unset( $new_font_face['shouldBeDecoded'] );
+		unset( $new_font_face['base64'] );
+		$font_url = $fonts_dir['baseurl'] . $file_name;
+		$new_font_face['src'] = array ( $font_url );
+
+		return $new_font_face;
+	}
+
+	protected function prepare_font_families_for_database( $font_families ) {
+		$prepared_font_families = array();
+
+		foreach ( $font_families as $font_family ) {
+			if ( isset ( $font_family['fontFace'] ) ) {
+				$new_font_faces = array();
+				foreach ( $font_family['fontFace'] as $font_face ) {
+					$updated_font_face = $font_face;
+					if ( isset( $updated_font_face['shouldBeDecoded'] ) ) {
+						$updated_font_face = $this->write_font_face( $font_face );
+					}
+					if ( !isset ( $font_face['shouldBeRemoved'] ) ) {
+						$new_font_faces[] = $updated_font_face;
+					} else {
+						$this->delete_font_asset( $font_face );
+					}
+				}
+
+				$font_family['fontFace'] = $new_font_faces;
+			}
+			if ( ! isset ( $font_family[ 'shouldBeRemoved' ] ) ) {
+				$prepared_font_families[] = $font_family;
+			}
+
+		}
+
+		return $prepared_font_families;
+	}
+
+	/**
+	 * Prepares a single global styles config for update.
+	 *
+	 * @since 5.9.0
+	 * @since 6.2.0 Added validation of styles.css property.
+	 *
+	 * @param WP_REST_Request $request Request object.
+	 * @return stdClass Changes to pass to wp_update_post.
+	 */
+	protected function prepare_item_for_database( $request ) {
+		$changes         = new stdClass();
+		$changes->ID     = $request['id'];
+		$post            = get_post( $request['id'] );
+		$existing_config = array();
+		if ( $post ) {
+			$existing_config     = json_decode( $post->post_content, true );
+			$json_decoding_error = json_last_error();
+			if ( JSON_ERROR_NONE !== $json_decoding_error || ! isset( $existing_config['isGlobalStylesUserThemeJSON'] ) ||
+				! $existing_config['isGlobalStylesUserThemeJSON'] ) {
+				$existing_config = array();
+			}
+		}
+		if ( isset( $request['styles'] ) || isset( $request['settings'] ) ) {
+			$config = array();
+			if ( isset( $request['styles'] ) ) {
+				$config['styles'] = $request['styles'];
+				if ( isset( $request['styles']['css'] ) ) {
+					$validate_custom_css = $this->validate_custom_css( $request['styles']['css'] );
+					if ( is_wp_error( $validate_custom_css ) ) {
+						return $validate_custom_css;
+					}
+				}
+			} elseif ( isset( $existing_config['styles'] ) ) {
+				$config['styles'] = $existing_config['styles'];
+			}
+			if ( isset( $request['settings'] ) ) {
+				$config['settings'] = $request['settings'];
+			} elseif ( isset( $existing_config['settings'] ) ) {
+				$config['settings'] = $existing_config['settings'];
+			}
+
+			if ( isset ( $config['settings']['typography']['fontFamilies']['custom'] ) ) {
+				$new_fonts = $this->prepare_font_families_for_database( $config['settings']['typography']['fontFamilies']['custom'] );
+				$config['settings']['typography']['fontFamilies']['custom'] = $new_fonts;
+			} else {
+				$this->delete_custom_fonts();
+			}
+
+			$config['isGlobalStylesUserThemeJSON'] = true;
+			$config['version']                     = WP_Theme_JSON_Gutenberg::LATEST_SCHEMA;
+			$changes->post_content                 = wp_json_encode( $config );
+		}
+		// Post title.
+		if ( isset( $request['title'] ) ) {
+			if ( is_string( $request['title'] ) ) {
+				$changes->post_title = $request['title'];
+			} elseif ( ! empty( $request['title']['raw'] ) ) {
+				$changes->post_title = $request['title']['raw'];
+			}
+		}
+		return $changes;
+	}
 }

packages/block-editor/src/components/global-styles/typography-utils.js

@@ -7,6 +7,7 @@
 /**
  * Internal dependencies
  */
+import { _x } from '@wordpress/i18n';
 import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
 
 /**
@@ -85,3 +86,20 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 
 	return defaultSize;
 }
+
+export const FONT_STYLES = {
+	normal: _x( 'Regular', 'font style' ),
+	italic: _x( 'Italic', 'font style' ),
+};
+
+export const FONT_WEIGHTS = {
+	100: _x( 'Thin', 'font weight' ),
+	200: _x( 'Extra Light', 'font weight' ),
+	300: _x( 'Light', 'font weight' ),
+	400: _x( 'Regular', 'font weight' ),
+	500: _x( 'Medium', 'font weight' ),
+	600: _x( 'Semi Bold', 'font weight' ),
+	700: _x( 'Bold', 'font weight' ),
+	800: _x( 'Extra Bold', 'font weight' ),
+	900: _x( 'Black', 'font weight' ),
+};

packages/edit-site/package.json

@@ -27,6 +27,7 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@react-spring/web": "^9.4.5",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/block-editor": "file:../block-editor",

packages/edit-site/src/components/global-styles/add-font-face-item.js

@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, plusCircle, check } from '@wordpress/icons';
+import { Tooltip, Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FontFaceItem from './font-face-item';
+import { useFontFamilies } from './hooks';
+
+function readFileAsBase64( file ) {
+	return new Promise( ( resolve, reject ) => {
+		const reader = new FileReader();
+		reader.onload = () => {
+			resolve( reader.result );
+		};
+		reader.onerror = reject;
+		reader.readAsDataURL( file );
+	} );
+}
+
+async function downloadAndEncode( url ) {
+	try {
+		// Send an HTTP GET request to the URL
+		const response = await fetch( url );
+		// Check the status code of the response
+		if ( ! response.ok ) {
+			throw new Error(
+				`HTTP error: ${ response.status } ${ response.statusText }`
+			);
+		}
+		// Get the response as a blob
+		const blob = await response.blob();
+		const metadata = { type: blob.type };
+		const file = new File( [ blob ], 'font-file', metadata );
+		const base64 = await readFileAsBase64( file );
+		return base64;
+	} catch ( error ) {
+		return null;
+	}
+}
+
+function AddFontFace( { fontFace, isExistingFace } ) {
+	const { handleAddFontFace, handleRemoveFontFace } = useFontFamilies();
+
+	async function handleAdd( fontFamily, fontWeight, fontStyle, url ) {
+		const base64 = await downloadAndEncode( url );
+		if ( ! base64 ) {
+			// TODO: show error message
+			return;
+		}
+		const newFontFace = {
+			fontFamily,
+			fontWeight,
+			fontStyle,
+			base64,
+		};
+		handleAddFontFace( newFontFace );
+	}
+
+	return (
+		<FontFaceItem
+			key={ `${ fontFace.fontWeight }-${ fontFace.fontStyle }` }
+			fontFace={ fontFace }
+			actionTrigger={
+				! isExistingFace ? (
+					<Tooltip text={ __( 'Add font face' ) } delay={ 0 }>
+						<Button
+							style={ { padding: '0 8px' } }
+							onClick={ () =>
+								handleAdd(
+									fontFace.fontFamily,
+									fontFace.fontWeight,
+									fontFace.fontStyle,
+									fontFace.url
+								)
+							}
+						>
+							<Icon icon={ plusCircle } size={ 20 } />
+						</Button>
+					</Tooltip>
+				) : (
+					<Tooltip text={ __( 'Remove Font Face' ) } delay={ 0 }>
+						<Button
+							style={ { padding: '0 8px' } }
+							onClick={ () =>
+								handleRemoveFontFace(
+									fontFace.fontFamily,
+									fontFace.fontWeight,
+									fontFace.fontStyle
+								)
+							}
+						>
+							<Icon icon={ check } size={ 20 } />
+						</Button>
+					</Tooltip>
+				)
+			}
+		/>
+	);
+}
+
+export default AddFontFace;