`updateEditorSettings` for styles not working in site editor

[tomusborne]

Description

Using updateEditorSettings to update styles is not working while in the site editor. The styles do not update.

Step-by-step reproduction instructions

1. Install the example plugin (created using create-block)
2. Open the regular page editor, and add the "Example Static" block to the page
3. Change the "Background color" value to something like: red

You will see the background of the block turn red, as expected. updateEditorSettings is working in the regular post editor.

To see the issue:

1. Open the Site Editor when using any block theme.
2. Add the "Example Static" block to the page
3. Change the "Background color" value to something like: red

You will see that the change does not do anything.

Here is the Edit component for the example block: https://gist.github.com/tomusborne/3f1f481ff6ca9240943d041104eaee58

Am I doing something wrong here? My expectation is that the updateEditorSettings should work both in the post editor and the site editor (as well as the widget editor, I suppose).

Screenshots, screen recording, code snippet

https://github.com/user-attachments/assets/b9e9f859-d4fa-4444-90c5-f018bf32d5fa

• Edit component: https://gist.github.com/tomusborne/3f1f481ff6ca9240943d041104eaee58
• Example plugin: example-static.zip

Environment info

• WordPress 6.6.1
• Gutenberg (trunk)
• TT4 theme
• Example Static plugin only

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

• [X] Yes

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

• [X] Yes

[Mamaduka]

This looks similar to this issue - https://github.com/WordPress/gutenberg/issues/49409#issuecomment-1512992179.

[tomusborne]

It is similar in that updateEditorSettings isn't working, but in this case it's happening onChange of a component, so everything is already initialized.

The updateEditorSettings function is firing as well, it's just not updating/adding the styles to the editor.

[ktmn]

updateEditorSettings for styles not working in site editor

I remember trying to figure that one out...

In site editor you'll want to use select('core/edit-site').getSettings and dispatch('core/edit-site').updateSettings instead of select('core/editor').getEditorSettings and dispatch('core/editor').updateEditorSettings.

[tomusborne]

@ktmn Thanks for the nudge! Appreciate it. Ended up doing this:

import { useDispatch } from '@wordpress/data';
import { getPath } from '@wordpress/url';

export function useUpdateSettings() {
    const isSiteEditor = getPath( window.location.href )?.includes(
        'site-editor.php'
    );

    const store = useDispatch( isSiteEditor ? 'core/edit-site' : 'core/editor' );

    return {
        updateSettings: isSiteEditor
            ? store.updateSettings
            : store.updateEditorSettings,
    };
}

import { useSelect, select } from '@wordpress/data';
import { getPath } from '@wordpress/url';

export function useGetSettings() {
    return useSelect( () => {
        const isSiteEditor = getPath( window.location.href )?.includes(
            'site-editor.php'
        );
        const store = select( isSiteEditor ? 'core/edit-site' : 'core/editor' );

        return {
            getSettings: isSiteEditor
                ? store.getSettings
                : store.getEditorSettings,
        };
    }, [] );
}

Seems to work nicely in the post and site editors, but still doesn't work in the widget area. Will have to keep digging there.

Thanks again!