useSettings initially returns undefined in WP 7.0

[cr0ybot]

Description

The issue has been isolated to attempting to destructure the return value of useSettings(). Prior to WP 7.0 this did not seem to be an issue, but now it reliably returns undefined on first render. Original description left intact below:

After installing WordPress 7.0, some custom functionality using useSettings (from @wordpress/block-editor) that was previously working started throwing an error. The exact error is not terribly enlightening:

TypeError: i.useSettings(...)[Symbol.iterator]().next().value is undefined

This is the line that is failing in a demo theme repo: https://github.com/cr0ybot/theme-typography-presets-demo/blob/701933d77ef9dd73b5185bdfe77d940f6cf470ca/src/editor.js#L130

I was able to work around the issue by replacing this:

const [ { typographyPreset: presets } ] = useSettings( [ 'custom' ] );

...with this:

const presets = useSelect( ( select ) => {
	const { getEditorSettings } = select( 'core/editor' );
	const { custom } = getEditorSettings()?.__experimentalFeatures ?? {};
	return custom?.typographyPreset;
}, [] );

Note that I have also tried useSettings( 'custom' ) without the path in an array, it makes no difference.

Step-by-step reproduction instructions

1. Spin up a new WordPress instance
2. Install the typography presets demo theme: https://github.com/cr0ybot/theme-typography-presets-demo
3. Open the default post and observe that all paragraph blocks have encountered an error.

Screenshots, screen recording, code snippet

https://github.com/cr0ybot/theme-typography-presets-demo

Screen.Recording.2026-06-02.at.2.32.37.PM.mov

Environment info

• WordPress 7.0, Gutenberg plugin not installed

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

• Yes

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

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[cr0ybot]

Update: Installing the Gutenberg plugin version 23.2.2 fixes the issue, so it seems the problem may only be in the version released with 7.0.

[himanshupathak95]

Hi @cr0ybot,

I spun a fresh WP 7.0 instance using https://playground.wordpress.net/ and installed the theme exactly, according to the steps mentioned here. I could not reproduce the paragraph block error as you've shown. I have no plug-in activated.
Am I missing something here?

Screen.Recording.2026-06-03.at.11.22.28.mov

[cr0ybot]

@himanshupathak95 Thanks for taking a look. It doesn't look like the typography preset scripts are active in your screen recording, I can see the default "font size" under Typography in the sidebar instead of "typography preset". Did you run npm install and npm run build before zipping up the files for upload? I did the same test in playground and got the same error:

Screen.Recording.2026-06-03.at.8.03.39.AM.mov

[cr0ybot]

@himanshupathak95 I had a heck of a time creating a minimal repro of the issue and I think technically this can be considered user error. I was destructuring the result of useSettings() which, as an asynchronous hook, may return undefined until it resolves. However, I find it strange that this worked fine prior to WP 7.0, and even stranger that installing the Gutenberg plugin resolves the issue.

The minimal repro is here: https://github.com/cr0ybot/theme-typography-presets-demo/tree/useSettings-repro

Specifically, these lines: https://github.com/cr0ybot/theme-typography-presets-demo/blob/908c6f00131c2ef11fdd162c47c6dcdfc16e1108/src/editor.js#L26-L34

I'm updating the title of the issue and the original post to reflect these findings.

[himanshupathak95]

Did you run npm install and npm run build before zipping up the files for upload? I did the same test in the playground and got the same error:

I totally missed this! It throws the error after that.

[t-hamano]

However, I find it strange that this worked fine prior to WP 7.0, and even stranger that installing the Gutenberg plugin resolves the issue.

Oddly enough, I discovered that #76314 resolved this issue. With the latest Gutenberg trunk enabled, reverting that commit confirms the problem reappears.

git revert 7295c00f862776bdcfb3766d1caa51424ee23e23

It's strange that #76314 seems unrelated to this issue at first glance. Also, it's puzzling why useSetting, which doesn't have an undefined check, suddenly stopped working in 7.0. In any case, this issue will be resolved in WordPress 7.1.

[t-hamano]

I was able to work around the issue by replacing this:

const [ { typographyPreset: presets } ] = useSettings( [ 'custom' ] );

...with this:

const presets = useSelect( ( select ) => {
	const { getEditorSettings } = select( 'core/editor' );
	const { custom } = getEditorSettings()?.__experimentalFeatures ?? {};
	return custom?.typographyPreset;
}, [] );

P.S. There is no need for such a large refactoring. Simply changing how useSettings is written should suffice. This style is most frequently used in Gutenberg.

const [ presets ] = useSettings( 'custom.typographyPreset' );

[Mamaduka]

Seems like the loading/syncing has changed, and settings are synced a bit late. We could test this by logging in and seeing how they're populated now vs the old version.

The fix might overlap with this proposal from @jsnajdr - #78799.

[cr0ybot]

@t-hamano Yea you're right about not needing the workaround, that was from before I understood the problem. Now I'm just not doing an immediate destructuring and instead using a null guard: https://github.com/cr0ybot/theme-typography-presets-demo/pull/1/changes#diff-9cb70b5abda24bd38f9b38e0e94a71393277f56f9436e0855f42efa3270b90c6R130-R131

For some reason I have in some code comments from a while back that useSettings( 'custom.typographyPreset' ) does not work, and to use useSettings( 'custom' ) instead. Not sure if something changed there in the past year or so.

Anyways, feel free to close this issue if the problem is resolved for 7.1.