Unable to load a font file

[alaczek]

Quick summary

I was not able to add a font via WordPress Font Library - the font file was stuck loading with no error messages.

Steps to reproduce

1. Start the Studio app, and create or start an existing site.
2. With a block theme active (Assembler for me) open up the site editor and go to Global Styles.
3. Click on Typography and then Manage Fonts icon.

4. Switch to Upload tab and drag & drop any .ttf font file.

5. The file never finishes loading, although there are no errors.

What you expected to happen

I expected the font file to load properly.

What actually happened

The file never finishes loading, although there are no errors or messages.

Impact

One

Available workarounds?

No but the app is still usable

Platform

Mac Silicon

Logs or notes

Browser: FF 125.0.1

(a side note and very minor but could we clean up the version number ^ ?)

[derekblank]

(a side note and very minor but could we clean up the version number ^ ?)

I've also noted this, I believe it comes from this line where the package version and commit is combined into devVersion:

studio/scripts/prepare-dev-build-version.mjs

Line 24 in 3600d89

const devVersion = `${ packageJson.version.split( '-' )[ 0 ] }-dev.${ currentCommit }`;

I agree it's minor, but maybe we could use the short SHA instead of the full SHA-1 hash, e.g., 1.0.1-dev.6088e3da. Also, probably no need to duplicate displaying the same version number twice in the system dialog, too.

[wojtekn]

@alaczek @derekblank, note that it was a dev build, so it should be okay to have the whole hash there. The release build looks much cleaner, e.g.:

[derekblank]

I investigated the actual font issue, and was able to replicate the testing steps. When uploading a font via Global Styles, the upload request just hangs indefinitely.

I traced the request to the vendor/wp-now version of encodeAsMultipart here:

studio/vendor/wp-now/src/start-server.ts

Lines 65 to 71 in 6619e75

	if ( requestHeaders[ 'content-type' ]?.startsWith( 'multipart/form-data' ) ) {
	const multipart = await encodeAsMultipart( req );
	body = multipart.bytes;
	requestHeaders[ 'content-type' ] = multipart.contentType;
	} else {
	body = await requestBodyToBytes( req );
	}

When logging out the values, the request headers appear to be null. This may be related to updates to vendor/wp-now/encode-as-multipart.ts, and possibly related to this commit where file uploads were updated to conform to the new server request format.

I'll continue to investigate, but just leaving these findings in case others have thoughts or further context.

[wojtekn]

Thanks for checking it @derekblank. It seems it can be fixed by #115.

[derekblank]

Thanks for checking it @derekblank. It seems it can be fixed by #115.

Yep, confirming that applying the fix from #115 allows the request to succeed, and the font is uploaded successfully.

font-loading.mov