✅Cómo Crear un Botón de Gutenberg que Abre un Popup al Hacer Clic

Uno de los casos más útiles al trabajar con Gutenberg es crear un botón que abra un popup personalizado, sin necesidad de instalar plugins. Aquí te muestro cómo hacerlo desde cero: crearás un botón con el editor de bloques de WordPress y un modal con HTML, CSS y JavaScript que será 100% funcional y visualmente atractivo.

Paso 1: Crear el botón con Gutenberg

1. Abre cualquier página o entrada desde el editor de WordPress.
2. Añade un bloque Botón.
3. Cambia el texto a «Abrir Popup».
4. En la configuración del bloque, en la pestaña Avanzado, añade una clase CSS personalizada, por ejemplo: boton-abrir-popup.

Paso 2: Añadir el código del popup en un bloque HTML personalizado

Debajo del botón, añade un bloque HTML personalizado e inserta el siguiente código:

<style>
  #popup-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  #popup-contenido {
    background: #fff;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    text-align: center;
    position: relative;
  }

  #popup-contenido button.cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
  }
</style>

<div id="popup-overlay">
  <div id="popup-contenido">
    <button class="cerrar">×</button>
    <h2>¡Hola!</h2>
    <p>Este es un popup sin plugins hecho con JavaScript y CSS.</p>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function(){
    const boton = document.querySelector('.boton-abrir-popup');
    const popup = document.getElementById('popup-overlay');
    const cerrar = popup.querySelector('.cerrar');

    if (boton && popup && cerrar) {
      boton.addEventListener('click', () => {
        popup.style.display = 'flex';
      });
      cerrar.addEventListener('click', () => {
        popup.style.display = 'none';
      });
      popup.addEventListener('click', (e) => {
        if (e.target === popup) {
          popup.style.display = 'none';
        }
      });
    }
  });
</script>
Lenguaje del código: HTML, XML (xml)

¿Cómo funciona este flujo?

1. El usuario hace clic en el botón Gutenberg.
2. Se activa el popup (overlay) que aparece centrado y bloquea el fondo.
3. Dentro del popup hay un título, un texto y un botón de cerrar (una «×»).
4. El popup se puede cerrar pulsando la «×» o haciendo clic fuera del contenido (sobre el overlay oscuro).

Conclusión

Como ves, crear un popup personalizado con Gutenberg y JavaScript y CSS es muy sencillo y no requiere de plugins externos ni librerías complicadas. Con solo un bloque de botón y un poco de código HTML y JS, puedes tener una solución funcional y ligera que puedes personalizar al máximo. Esta técnica es ideal para mantener tu WordPress optimizado, sin sobrecargarlo con plugins adicionales, y al mismo tiempo darle un toque profesional a tus páginas o landings.