addEventListener 'load' not working on FSE editor.

[grogou]

Description

ref.current.addEventListener('load') not working on FSE editor, but it is working on standard editor.
Nothing on console, just listener don't fire.

Step-by-step reproduction instructions

1. Create custom block and add some load listener on some ref

Screenshots, screen recording, code snippet

No response

Environment info

Wordpress 5.9.1
Gutenberg 12.6.1

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

[t-hamano]

I think a window object would be appropriate for attaching the load event.

And I think useRefEffect would be a good choice based on Make WordPress Core article.

Like this:

import { useRefEffect } from '@wordpress/compose';
import { useBlockProps } from '@wordpress/block-editor';

export default function Edit() {
	const ref = useRefEffect( ( element ) => {
		function someFunc() {
			// do something...
		}

		const { ownerDocument } = element;

		// Relative window object
		const { defaultView } = ownerDocument;

		defaultView.addEventListener( 'load', someFunc );

		return () => {
			// remove event listener.
			defaultView.removeEventListener( 'load', someFunc );
		};
	}, [] );

	const blockProps = useBlockProps( { ref } );

	return (
		<p { ...blockProps }>test</p>
	);
}

[grogou]

@t-hamano thank you for this, but is there some difference between standard editor and FSE editor? and about window listeners, my case is not use window.addEventListener it fire event on ref.

[t-hamano]

@grogou
Unlike a regular editor, the site editor is an iframe editor instance, so when binding events to the windows object, a relative window (defaultView) starting from ref must be used.
(I don't know why the load event is not fired in the site editor when the load event of ref.current is applied...)

[grogou]

@t-hamano thank you it is lot of help.

[grogou]

useRefEffect not working too. So the problem is site editor or idk, is someone know how can this issue will be fixed?

[t-hamano]

Perhaps the event is not attached because the document is already loaded in the site editor (iframe editor instance).

I think it would be better to do the processing directly within useEffect without attaching the event.

import { __ } from '@wordpress/i18n';
import { useEffect, useRef } from '@wordpress/element';
import { useBlockProps } from '@wordpress/block-editor';

export default function Edit() {
	const ref = useRef( null );

	useEffect( () => {
		const { ownerDocument } = ref.current;

		// should show "complete", this means that the document has been loaded.
		console.log( ownerDocument.readyState );

		// Do something directly without using event listener.
	}, [] )

	const blockProps = useBlockProps({ ref });

	return (
		<p { ...blockProps }>
			{ __( 'Test Block – hello from the editor!', 'test-block' ) }
		</p>
	);
}

[annezazu]

Curious if @ryanwelcher has any insights here!

[grogou]

@annezazu anyway this is not working in my side, so if you can suggest anything for this I will by glad for that.
Or if there complex way to understand this cases with "iframes". Where I can read about that something?

Thank you!

[annezazu]

For iframing, I'd recommend checking out this issue @grogou: #33346 Apologies for missing your ping earlier!