addEventListener 'click' is not working on FSE editor.

[miumerfarooq]

Description

addEventListener 'click' is not working on FSE editor. But it works on Frontend.
I just create a simple button and want to alert it, but it gives an error on page load in FSE editor.

Step-by-step reproduction instructions

1. create simple block using npx @wordpress/create-block name-of-block
2. run npm start
3. the visit your site
4. add the following code(Which I mentioned bellow) to the edit.js , save.js, script.js and name-of-block.php files.
5. create a post and then check the console, you will see the error(Which I mentioned bellow)

Screenshots, screen recording, code snippet

script.js
document.querySelector("button#click__Me").addEventListener("click", function() { alert("Hello, World!"); });

edit.js
export default function Edit() { return ( <div { ...useBlockProps() }> <button id='click__Me'>Click me!</button> </div> ); }

save.js
export default function save() { return ( <div { ...useBlockProps.save() }> <button id='click__Me'>Click me!</button> </div> ); }

alert.php
function alert_scripts() { $blockPath = '/src/script.js'; wp_enqueue_script( 'alert', plugins_url( $blockPath , __FILE__ ), [ 'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ], filemtime( plugin_dir_path( __FILE__ ) . $blockPath ), true ); } add_action( 'enqueue_block_assets', 'alert_scripts' );

Screenshot

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.

Yes

[Mamaduka]

Hi, @Umer-Farooq10

I believe this is happening because, in Site Editor, blocks are loaded in the iframed editor. So the iframe (where your block is loaded) and admin page (where script.js is loaded) will have different document and window. You can read this dev note for more details - https://make.wordpress.org/core/2021/06/29/blocks-in-an-iframed-template-editor/.

How to fix

Have you tried using the viewScript supported by the Blocks API and the create-block package?

Since it's a natively supported script, the WP will load it correctly, even for iframed editors.

[miumerfarooq]

I read what you suggest but I didn't get anything.
I don't know how to use useEffect and useRefEffect hook. In which file should I use it.
Can you please send me an example of the code that I mentioned above using useEffect and useRefEffect Hook?

[t-hamano]

The following issue may be helpful.

• addEventListener 'load' not working on FSE editor. #39114
• Scroll event doesn't working #38692

[t-hamano]

@Umer-Farooq10
I believe this issue is not a bug, but a question about how to write code.
Therefore, I would like to close this issue, but feel free to re-open it if you have any problems.