Font Library: font collection refactor to use the new schema

lib/experimental/fonts/font-library/class-wp-font-collection.php

@@ -21,13 +21,59 @@
 class WP_Font_Collection {
 
 	/**
-	 * Font collection configuration.
+	 * The unique slug for the font collection.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var string
+	 */
+	private $slug;
+
+	/**
+	 * The name of the font collection.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var string
+	 */
+	private $name;
+
+	/**
+	 * Description of the font collection.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var string
+	 */
+	private $description;
+
+	/**
+	 * Source of the font collection.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var string
+	 */
+	private $src;
+
+	/**
+	 * Array of font families in the collection.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var array
+	 */
+	private $font_families;
+
+	/**
+	 * Categories associated with the font collection.
 	 *
 	 * @since 6.5.0
 	 *
 	 * @var array
 	 */
-	private $config;
+	private $categories;
+
 
 	/**
 	 * WP_Font_Collection constructor.
@@ -40,22 +86,38 @@ class WP_Font_Collection {
 	 */
 	public function __construct( $config ) {
 		if ( empty( $config ) || ! is_array( $config ) ) {
-			throw new Exception( 'Font Collection config options is required as a non-empty array.' );
+			throw new Exception( 'Font Collection config options are required as a non-empty array.' );
 		}
 
-		if ( empty( $config['slug'] ) || ! is_string( $config['slug'] ) ) {
-			throw new Exception( 'Font Collection config slug is required as a non-empty string.' );
-		}
+		$this->validate_config( $config );
 
-		if ( empty( $config['name'] ) || ! is_string( $config['name'] ) ) {
-			throw new Exception( 'Font Collection config name is required as a non-empty string.' );
-		}
+		$this->slug          = $config['slug'];
+		$this->name          = $config['name'];
+		$this->description   = $config['description'] ?? '';
+		$this->src           = $config['src'] ?? '';
+		$this->font_families = $config['font_families'] ?? array();
+		$this->categories    = $config['categories'] ?? array();
+	}
 
-		if ( ( empty( $config['src'] ) || ! is_string( $config['src'] ) ) && ( empty( $config['data'] ) ) ) {
-			throw new Exception( 'Font Collection config "src" option OR "data" option is required.' );
+	/**
+	 * Validates the config array.
+	 *
+	 * Ensures that required keys are present and valid.
+	 *
+	 * @param array $config Configuration array.
+	 * @throws Exception If required keys are missing.
+	 */
+	private function validate_config( $config ) {
+		$required_keys = array( 'slug', 'name' );
+		foreach ( $required_keys as $key ) {
+			if ( empty( $config[ $key ] ) ) {
+				throw new Exception( "Font Collection config {$key} is required as a non-empty string." );
+			}
 		}
 
-		$this->config = $config;
+		if ( empty( $config['src'] ) && empty( $config['font_families'] ) ) {
+			throw new Exception( 'Font Collection config "src" option OR "font_families" option are required.' );
+		}
 	}
 
 	/**
@@ -73,56 +135,59 @@ public function __construct( $config ) {
 	 */
 	public function get_config() {
 		return array(
-			'slug'        => $this->config['slug'],
-			'name'        => $this->config['name'],
-			'description' => $this->config['description'] ?? '',
+			'slug'        => $this->slug,
+			'name'        => $this->name,
+			'description' => $this->description,
 		);
 	}
 
 	/**
-	 * Gets the font collection config and data.
+	 * Gets the font collection content.
 	 *
-	 * This function returns an array containing the font collection's unique ID,
-	 * name, and its data as a PHP array.
+	 * Load the font collection data from the src if it is not already loaded.
 	 *
 	 * @since 6.5.0
 	 *
-	 * @return array {
-	 *     An array of font collection config and data.
+	 * @return array|WP_Error {
+	 *     An array of font collection contents.
 	 *
-	 *     @type string $slug          The font collection's unique ID.
-	 *     @type string $name        The font collection's name.
-	 *     @type string $description The font collection's description.
-	 *     @type array  $data        The font collection's data as a PHP array.
+	 *     @type array $font_families      The font collection's font families.
+	 *     @type string $categories        The font collection's categories.
 	 * }
+	 *
+	 * A WP_Error object if there was an error loading the font collection data.
 	 */
-	public function get_config_and_data() {
-		$config_and_data         = $this->get_config();
-		$config_and_data['data'] = $this->load_data();
-		return $config_and_data;
+	public function get_content() {
+		// If the font families are not loaded, and the src is not empty, load the data from the src.
+		if ( empty( $this->font_families ) && ! empty( $this->src ) ) {
+			$data = $this->load_contents_from_src();
+			if ( is_wp_error( $data ) ) {
+				return $data;
+			}
+		}
+
+		return array(
+			'font_families' => $this->font_families,
+			'categories'    => $this->categories,
+		);
 	}
 
 	/**
-	 * Loads the font collection data.
+	 * Loads the font collection data from the src.
 	 *
 	 * @since 6.5.0
 	 *
 	 * @return array|WP_Error An array containing the list of font families in font-collection.json format on success,
 	 *                        else an instance of WP_Error on failure.
 	 */
-	public function load_data() {
-
-		if ( ! empty( $this->config['data'] ) ) {
-			return $this->config['data'];
-		}
-
+	private function load_contents_from_src() {
 		// If the src is a URL, fetch the data from the URL.
-		if ( str_contains( $this->config['src'], 'http' ) && str_contains( $this->config['src'], '://' ) ) {
-			if ( ! wp_http_validate_url( $this->config['src'] ) ) {
+		if ( str_contains( $this->src, 'http' ) && str_contains( $this->src, '://' ) ) {
+			if ( ! wp_http_validate_url( $this->src ) ) {
 				return new WP_Error( 'font_collection_read_error', __( 'Invalid URL for Font Collection data.', 'gutenberg' ) );
 			}
 
-			$response = wp_remote_get( $this->config['src'] );
+			$response = wp_remote_get( $this->src );
 			if ( is_wp_error( $response ) || 200 !== wp_remote_retrieve_response_code( $response ) ) {
 				return new WP_Error( 'font_collection_read_error', __( 'Error fetching the Font Collection data from a URL.', 'gutenberg' ) );
 			}
@@ -133,15 +198,22 @@ public function load_data() {
 			}
 			// If the src is a file path, read the data from the file.
 		} else {
-			if ( ! file_exists( $this->config['src'] ) ) {
+			if ( ! file_exists( $this->src ) ) {
 				return new WP_Error( 'font_collection_read_error', __( 'Font Collection data JSON file does not exist.', 'gutenberg' ) );
 			}
-			$data = wp_json_file_decode( $this->config['src'], array( 'associative' => true ) );
+			$data = wp_json_file_decode( $this->src, array( 'associative' => true ) );
 			if ( empty( $data ) ) {
 				return new WP_Error( 'font_collection_read_error', __( 'Error reading the Font Collection data JSON file contents.', 'gutenberg' ) );
 			}
 		}
 
+		if ( empty( $data['font_families'] ) ) {
+			return new WP_Error( 'font_collection_contents_error', __( 'Font Collection data JSON file does not contain font families.', 'gutenberg' ) );
+		}
+
+		$this->font_families = $data['font_families'];
+		$this->categories    = $data['categories'] ?? array();
+
 		return $data;
 	}
 }

lib/experimental/fonts/font-library/class-wp-rest-font-collections-controller.php

@@ -42,8 +42,8 @@ public function register_routes() {
 			array(
 				array(
 					'methods'             => WP_REST_Server::READABLE,
-					'callback'            => array( $this, 'get_font_collections' ),
-					'permission_callback' => array( $this, 'update_font_library_permissions_check' ),
+					'callback'            => array( $this, 'get_items' ),
+					'permission_callback' => array( $this, 'get_fonts_collection_permissions_check' ),
 				),
 			)
 		);
@@ -54,8 +54,8 @@ public function register_routes() {
 			array(
 				array(
 					'methods'             => WP_REST_Server::READABLE,
-					'callback'            => array( $this, 'get_font_collection' ),
-					'permission_callback' => array( $this, 'update_font_library_permissions_check' ),
+					'callback'            => array( $this, 'get_item' ),
+					'permission_callback' => array( $this, 'get_fonts_collection_permissions_check' ),
 				),
 			)
 		);
@@ -69,24 +69,27 @@ public function register_routes() {
 	 * @param WP_REST_Request $request Full details about the request.
 	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
 	 */
-	public function get_font_collection( $request ) {
+	public function get_item( $request ) {
 		$slug       = $request->get_param( 'slug' );
 		$collection = WP_Font_Library::get_font_collection( $slug );
+
 		// If the collection doesn't exist returns a 404.
 		if ( is_wp_error( $collection ) ) {
 			$collection->add_data( array( 'status' => 404 ) );
-			return $collection;
+			return rest_ensure_response( $collection );
 		}
-		$config_and_data = $collection->get_config_and_data();
-		$collection_data = $config_and_data['data'];
+
+		$config   = $collection->get_config();
+		$contents = $collection->get_content();
 
 		// If there was an error getting the collection data, return the error.
-		if ( is_wp_error( $collection_data ) ) {
-			$collection_data->add_data( array( 'status' => 500 ) );
-			return $collection_data;
+		if ( is_wp_error( $contents ) ) {
+			$contents->add_data( array( 'status' => 500 ) );
+			return rest_ensure_response( $contents );
 		}
 
-		return new WP_REST_Response( $config_and_data );
+		$collection_data = array_merge( $config, $contents );
+		return rest_ensure_response( $collection_data );
 	}
 
 	/**
@@ -96,27 +99,27 @@ public function get_font_collection( $request ) {
 	 *
 	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
 	 */
-	public function get_font_collections() {
+	public function get_items( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
 		$collections = array();
 		foreach ( WP_Font_Library::get_font_collections() as $collection ) {
-			$collections[] = $collection->get_config_and_data();
+			$collections[] = $collection->get_config();
 		}
 
-		return new WP_REST_Response( $collections, 200 );
+		return rest_ensure_response( $collections, 200 );
 	}
 
 	/**
-	 * Checks whether the user has permissions to update the Font Library.
+	 * Checks whether the user has permissions to use the Fonts Collections.
 	 *
 	 * @since 6.5.0
 	 *
 	 * @return true|WP_Error True if the request has write access for the item, WP_Error object otherwise.
 	 */
-	public function update_font_library_permissions_check() {
+	public function get_fonts_collection_permissions_check() {
 		if ( ! current_user_can( 'edit_theme_options' ) ) {
 			return new WP_Error(
-				'rest_cannot_update_font_library',
-				__( 'Sorry, you are not allowed to update the Font Library on this site.', 'gutenberg' ),
+				'rest_cannot_read',
+				__( 'Sorry, you are not allowed to use the Font Library on this site.', 'gutenberg' ),
 				array(
 					'status' => rest_authorization_required_code(),
 				)

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

@@ -134,7 +134,8 @@ function wp_unregister_font_collection( $collection_id ) {
 	'slug'        => 'default-font-collection',
 	'name'        => 'Google Fonts',
 	'description' => __( 'Add from Google Fonts. Fonts are copied to and served from your site.', 'gutenberg' ),
-	'src'         => 'https://s.w.org/images/fonts/16.7/collections/google-fonts-with-preview.json',
+	// TODO: This URL needs to be updated to the wporg hosted one prior to the Gutenberg 17.6 release.
+	'src'         => 'https://raw.githubusercontent.com/WordPress/google-fonts-to-wordpress-collection/main/releases/gutenberg-17.6/google-fonts.json',
 );
 
 wp_register_font_collection( $default_font_collection );

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

@@ -394,16 +394,16 @@ function FontLibraryProvider( { children } ) {
 		const response = await fetchFontCollections();
 		setFontCollections( response );
 	};
-	const getFontCollection = async ( id ) => {
+	const getFontCollection = async ( slug ) => {
 		try {
 			const hasData = !! collections.find(
-				( collection ) => collection.id === id
-			)?.data;
+				( collection ) => collection.slug === slug
+			)?.font_families;
 			if ( hasData ) return;
-			const response = await fetchFontCollection( id );
+			const response = await fetchFontCollection( slug );
 			const updatedCollections = collections.map( ( collection ) =>
-				collection.id === id
-					? { ...collection, data: { ...response?.data } }
+				collection.slug === slug
+					? { ...collection, ...response }
 					: collection
 			);
 			setFontCollections( updatedCollections );