Wie füge ich JavaScript zu einem benutzerdefinierten Block von WordPress Gutenberg hinzu?

Mit benutzerdefinierten Blöcken von WordPress versuche ich derzeit, eine Popover-Komponente zu erstellen, die eine Schaltfläche und einen versteckten Inhalt enthält. Der versteckte Inhalt sollte erscheinen, wenn der Benutzer auf die Schaltfläche klickt oder darüber fährt (auf der Frontend der Webseite, nicht im Block-Editor).

Wenn ich jedoch eine hinzufüge onClick oder onHover auf die Schaltfläche, wird der Ereignishandler nicht ausgeführt.

Darüber hinaus versuchen, die zu verwenden useState Hook zum Speichern des Anzeigestatus des Popovers bringt meinen Blockeditor zum Absturz.

Das ist, was mein save Der Methodencode sieht derzeit so aus:

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>
    )
}

Die Antwort auf diese ähnliche (?) Frage scheint darauf hinzudeuten, dass dies nicht möglich ist, da das Frontend nur “statisches HTML” rendert und das Javascript entfernt. Wenn dies der Fall ist, was wäre ein guter Ansatz, um Benutzerinteraktivität (Hover/Klick-Ereignisse oder sogar mögliche http-Anforderungen) im Frontend von benutzerdefinierten WordPress-Blöcken zu erstellen?

Seit WordPress 5.9.0 müssen Sie viewScript verwenden, um die Frontend-JS-Datei in der block.json zu definieren:

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

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

In Ihrer blocks.json-Datei können Sie eine js-Datei definieren, die auf dem Frontend ausgeführt werden soll.

{
  "$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"
}

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

Im Moment konnte ich das Problem lösen, indem ich ein benutzerdefiniertes Skript in das WordPress-Plugin einreihte, das ich für meine benutzerdefinierten Blöcke erstellt habe:

Aber wenn jemand eine bessere Lösung findet, würde mich das sehr interessieren!

index.php: (die Haupt-Plugin-Datei)

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 (das eingereihte Skript)

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 (die Speicherfunktion des benutzerdefinierten Blocks)

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>
    )
}