How do I add JavaScript to a Wordpress Gutenberg custom block?

Question

Using Wordpress custom blocks, I'm currently trying to create a popover component that contains a button and a hidden content. The hidden content should appear when the user clicks on or hovers over the button (on the frontend of the website, not in the block editor).

However, when I add an onClick or onHover to the button, the event handler is not executed.

Additionally, trying to use the useState hook to store the display state of the popover crashes my block editor.

This is what my save method code currently looks like:

export default function save() {

    const [shouldDisplay, setShouldDisplay] = useState(false);

    const handleClick = () => {
        console.log('Click confirmed.');
        setShouldDisplay(!shouldDisplay);
    }

    return (
        <div {...useBlockProps.save()}>
            {/* Button with onClick handler */}
            <button onClick={() => handleClick()}>Show hidden content!</button>

            {/* Hidden content */}
            { shouldDisplay && <div class="popover-content">...</div> }
        </div>
    )
}

The answer to this similar(?) question seems to suggest it is not possible as the frontend just renders "static html" and strips off the javascript. If that is the case, what would be good approach to create user interactivity (hover/click events or even possible http requests) in the frontend of Wordpress custom blocks?

Answer 1

Since WordPress 5.9.0 you have to use viewScript to define the frontend JS file in the block.json:

{ "viewScript": "file:./view.js" }

See the reference: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#script

Answer 2

In your blocks.json file you can define a js file to be executed on the front end.

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "create-block/xxxxx",
  "version": "x.x.x",
  "title": "xxxx",
  "category": "xxxx",
  "description": "xxxx",
  "attributes": {
    "example":{
      "type":"string"
    },
  "supports": {
    "html:": true
  },
  "textdomain": "xxxxx",
  "editorScript": "file:./xxxx.js",
  "editorStyle": "file:./xxxx.css",
  "script": "file:./index.js", <--
  "style": "file:./xxxx-xxxx.css"
}

Reference https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#script

Answer 3

For now I have been able to solve the issue by enqueueing a custom script in the Wordpress plugin I have created for my custom blocks:

But if anyone finds a better solution I would be very interested to know!

index.php: (the main plugin file)

function my_blocks_popover_enqueue_script()
{   
    wp_enqueue_script( 'my_blocks_popover_script', plugin_dir_url( __FILE__ ) . 'popover/scripts/index.js' );
}
add_action('wp_enqueue_scripts', 'my_blocks_popover_enqueue_script');

index.js (the enqueued script)

document.addEventListener("DOMContentLoaded", function () {
    document
        .querySelectorAll(".my-blocks-popover__trigger")
        .forEach(function (el) {
            const dropdown = el.querySelector(".my-blocks-popover__dropdown");

            el.addEventListener("mouseover", (_e) => {
                dropdown.classList.add("my-blocks-popover__dropdown--show");
            });

            el.addEventListener("mouseout", (_e) => {
                dropdown.classList.remove("my-blocks-popover__dropdown--show");
            });
        });
});

save.js (the custom block's save function)

export default function save() {

    return (
        <div class="my-blocks-popover__trigger" {...useBlockProps.save()}>
            <button class="my-blocks-popover__button">Show hidden content!</button>
            <div class="my-blocks-popover__dropdown">...</div>
        </div>
    )
}