Usando bloques personalizados de Wordpress, actualmente estoy tratando de crear un componente emergente que contiene un botón y un contenido oculto. El contenido oculto debería aparecer cuando el usuario hace clic o se desplaza sobre el botón (en la interfaz del sitio web, no en el editor de bloques ).
Sin embargo, cuando agrego onClick o onHover al botón, el controlador de eventos no se ejecuta.
Además, tratar de usar el useState para almacenar el estado de visualización del popover bloquea mi editor de bloques.
Así es como se ve actualmente el código de mi método de save :
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> ) }La respuesta a esta pregunta similar (?) Parece sugerir que no es posible, ya que la interfaz simplemente muestra "html estático" y elimina el javascript. Si ese es el caso, ¿cuál sería un buen enfoque para crear interactividad del usuario (eventos de desplazamiento/clic o incluso posibles solicitudes http) en la interfaz de los bloques personalizados de Wordpress?
En su archivo blocks.json puede definir un archivo js para que se ejecute en la interfaz.
{ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 2, "name": "create-block/xxxxx", "version": "xxx", "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" }Referencia https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#script
Por ahora, he podido resolver el problema poniendo en cola un script personalizado en el complemento de Wordpress que he creado para mis bloques personalizados:
Pero si alguien encuentra una solución mejor, ¡me interesaría saberlo!
index.php : (el archivo del complemento principal)
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 (el script en cola)
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 (la función de guardado del bloque personalizado)
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> ) }