initializeEditor doesn’t work

[htmgarcia]

Description

reinitializeEditor was deprecated and initializeEditor doesn’t work as used to be.
Can we still use this method to modify editor settings after wp.domReady?

The error I get in console when calling initializeEditor is:
"Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it."

wp.editPost.initializeEditor( 'editor', 'post', 99, modified_settings, [] );

Step-by-step reproduction instructions

1. Use WP 6.2 RC-4
2. In wp-config.php set define( 'SCRIPT_DEBUG', true );
3. Open a post edit
4. Open browser console
5. Execute the line of code below replacing 99 with the ID of the post you're editing, and modified_settings with the return of wp.data.select('core/editor').getEditorSettings()

wp.editPost.initializeEditor( 'editor', 'post', 99, modified_settings, [] );

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.2 RC-4 with and without Gutenberg 15.4

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

[Mamaduka]

Hi, @htmgarcia

Can you provide more details on why you're using the initializeEditor?

Plugins shouldn't use the method; the only reason it's publicly exported is for WP to initialize the post editor.

[htmgarcia]

Hi @Mamaduka,
I use initializeEditor to modify allowedBlockTypes. I wonder if there is an alternative method to achieve the same result? Tried updateEditorSettings with no luck.

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[Mamaduka]

@jsnajdr, I remember you debugged the update settings race conditions for React 18 update (#46467 (comment)). Do you have any recommended way for dispatching this action from third-party plugins?

[jsnajdr]

Tried updateEditorSettings with no luck.

@htmgarcia I think this is a timing issue. When the initializeEditor function is called with a settings parameter, it mounts the editor React UI with the EditorProvider component, and there is an effect in that component that synchronizes the settings to the data store, calling updateEditorSettings:

gutenberg/packages/editor/src/components/provider/index.js

Lines 108 to 110 in bc39f39

	useEffect( () => {
	updateEditorSettings( settings );
	}, [ settings ] );

That effect doesn't run synchronously, but a little bit later. If your plugin calls updateEditorSettings too soon, as it probably does, your changes will be overwritten by that effect.

So, the solution is to call updateEditorSettings only after that effect runs. But I don't know at this moment how to do it simply, reliably and elegantly.

[htmgarcia]

So, the solution is to call updateEditorSettings only after that effect runs. But I don't know at this moment how to do it simply, reliably and elegantly.

Hi @jsnajdr,
thanks for jumping into the conversation. In the meanwhile I wrapped updateEditorSettings with a time delay:

setTimeout( function() {
    wp.data.dispatch('core/editor').updateEditorSettings({ allowedBlockTypes: ['core/paragraph','core/heading'] });
}, 3000 );

[jsnajdr]

In the meanwhile I wrapped updateEditorSettings with a time delay:

Yes that works, although it's bad that you're forced to do things like this.

I'm exploring a solution where initializeEditor would update the settings immediately, instead of postponing it to an effect.

Not this:

function initializeEditor( settings ) {
  render( <Editor settings={ settings } /> );
}

function Editor( { settings } ) {
  useEffect( () => {
    updateEditorSettings( settings );
  }, [ settings ] );
}

But this:

function initializeEditor( settings ) {
  dispatch( editorStore ).updateEditorSettings( settings );
  render( <Editor /> );
}

Then, when your plugin wants to call updateEditorSettings, initializeEditor has already run and updated the settings. There is no scheduled effect that would overwrite your changes.

In practice it's not so simple and there's some amount of complexity to untangle, but in principle it should work.

[htmgarcia]

@jsnajdr your proposal sounds promising. I really appreciated!

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.