Font Family control component causing fatal error when rendering a block

[gregWierzba]

Description

I found an issue in Wodpress Font Family control component.

The problem is that is we don't pass default value of the fontFamilies attribute, the Font Family control gets preset values from the WP's internal getSettings hook, and the the value of typography.fontFamilies returned from this hook looks like :

{theme: [{font_family_1_attrs}, {font_family_2_attrs}, ...]}
but, when you look in the source code here, you can see that there's a bug, they're not accessing the .theme from inside the blockLevelFontFamilies object and that's what's causing the issue.

That causes fatal error in rendering block, when On Block settings panel, you click + on typography:

gutenberg/packages/block-editor/src/components/font-family/index.js

Line 20 in 672c443

fontFamilies = blockLevelFontFamilies;

Step-by-step reproduction instructions

Can be reproduced with recent version of WPML

1. create a post
2. add language switcher block
3. On Block settings panel, click + on typography

Screenshots, screen recording, code snippet

Now its:

if ( ! fontFamilies ) {
	fontFamilies = blockLevelFontFamilies;
}

Should be

if ( ! fontFamilies ) {
	fontFamilies = blockLevelFontFamilies.theme; 
}

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[annezazu]

@matiasbenedetto is this something you can take a look at?

[matiasbenedetto]

Hi @gregWierzba, thanks for submitting this ticket.
I couldn't reproduce this issue just by using the Gutenberg plugin.

Now its:
if ( ! fontFamilies ) {
fontFamilies = blockLevelFontFamilies;
}

Should be

if ( ! fontFamilies ) {
fontFamilies = blockLevelFontFamilies.theme;
}

This change doesn't seem right because font families can live in .custom, too.

I'm not sure about which translation plugin you are using to test. Could you please link it?
Can this problem be plugin-specific?
Could you add a screencast featuring the issue?
Could you add to the ticket description the version of WordPress and Gutenberg you are running?

[zeopix]

Hello @matiasbenedetto thanks for checking this,

Here the code that is triggering this in our plugin:

          <FontFamilyControl
          value={...}
          onChange={...}
          />

We do not specify fontFamilies attribute at all, because we just want to offer the theme presets (and now the custom fonts).

It crashes in WP 6.5-beta2.

In WP 6.4, the variable blockLevelFontFamilies value was:

  {
      "fontFamily": "\"Inter\", sans-serif",
      "name": "Inter",
      "slug": "body",
      ...
  }

In WP 6.5-beta2:

{
    "theme": [
        {
            "fontFamily": "\"Inter\", sans-serif",
            "name": "Inter",
            "slug": "body",
            ...
        },
       ...
    ],
   "custom"...
}

So, a block that uses FontFamily without specifying any value, will not work.

This can be seen in the WPML Language Switcher Block.

I've done some tests in my environment, adding some custom fonts. Replacing the lines that @gregWierzba mentioned, by the following:

	if ( ! fontFamilies ) {
		const { theme, custom } = blockLevelFontFamilies;
		fontFamilies = theme !== undefined ? theme : [];
		if ( custom !== undefined ) {
			fontFamilies = [ ...fontFamilies, ...custom ];
		}
	}

Works well for me, the block does not crash and uses the theme fonts plus custom ones as fallback.

Does this make sense to you?

EDIT:
added PR.

[Molovicmilos]

Hi @gregWierzba , @zeopix and others,

This is my first comment in this repository, so I'll keep it brief.

I frequently use the FontFamilyControl in my custom plugin as follows:

import { __experimentalFontFamilyControl as FontFamilyControl } from "@wordpress/block-editor";

This worked perfectly with Gutenberg version 17.7, but the component broke starting from version 17.8.0. Since then, I haven't been able to update the plugin.

Here’s one potential solution:

const custom = useSettings("typography.fontFamilies")[0]?.custom ?? [];
const theme = useSettings("typography.fontFamilies")[0]?.theme ?? [];
const fontFamilies = [...custom, ...theme];

However, I'm concerned that future WordPress core updates might break my plugin again.

I believe the best approach would be to merge fontFamilies in the font-family/index.js similarly to how it’s done in the typography-panel.js file.

This approach ensures that the fontFamilies will be an array that can be mapped over - LN29.

[Molovicmilos]

Regarding the above comment maybe I should mention the #59846.

[t-hamano]

I determined that this issue was caused by #58951. As I remember, this PR caused the font family to merge all origins.

I believe the best approach would be to merge fontFamilies in the font-family/index.js similarly to how it’s done in the typography-panel.js file.

I also think this approach is correct.