Cómo crear bloques personalizados con Genesis Custom Blocks

Genesis Custom Blocks es un plugin que permite crear bloques personalizados para Gutenberg sin necesidad de programar JavaScript. En esta guía aprenderás a desarrollar tus propios bloques paso a paso utilizando campos personalizados y plantillas PHP.

Aunque forma parte del ecosistema Genesis, puede utilizarse con cualquier tema de WordPress.

Guía actualizada en 2026. Este tutorial muestra cómo crear bloques con Genesis Custom Blocks para Gutenberg. Aunque actualmente WordPress dispone de herramientas modernas basadas en Block API y block.json, Genesis Custom Blocks sigue siendo una buena forma de aprender los fundamentos de la creación de bloques personalizados.

Instalar Genesis Custom Blocks

Una vez el plugin instalado y activado nos apare un nuevo item en el menú lateral izquierdo del administrador.

¿Dónde instalar los ficheros del bloque?

Bien, ya tenemos nuestro plugin instalado, ahora tenemos que saber donde colocar los ficheros necesarios para crear el bloque. Los crearemos mas adelante.

En la documentación nos indica donde tenemos que colocar los ficheros necesarios para crear el bloque. Nos dice que tenemos que crear la carpeta ‘blocks‘ en la raíz del proyecto, en esta carpeta irán todos los bloque personalizados, es decir los bloques que creemos.

Por cada bloque que vallamos a crear, dentro de la carpeta ‘blocks‘, tendremos de crear una nueva carpeta que contendrá al menos dos ficheros, ‘block.php‘ y ‘block.css‘, si necesitáramos alguna funcionalidad extra podemos añadir un fichero .js, no es el caso en los dos sencillos ejemplos que veremos.

Creando un bloque de botón

Queremos crear un bloque de botón personalizado, al analizarlo veremos que necesitamos un texto en el botón y un enlace indicando la url a la cuál nos llevará al hacer click en él.
Más adelante lo tenemos que plasmar en el fichero .php.

Vamos al administrador y hacemos click en ‘Bloques personalizados – Añadir nuevo‘, esto nos abre una pantalla donde nos pide un nombre para ese bloque, podemos poner ‘Bloque de botón’, a la derecha de la pantalla vemos que tenemos unas opciones.

Tenemos el ‘Slug‘ del bloque.
Cuidado con las tildes, al menos en el idioma español pues no los considera y elimina esa letra.
Podemos modificar ese ‘slug‘ y colocar ‘bloque-boton‘.

En ‘Icons‘ elegimos un icono que identifique al bloque, hacemos click y lo elegirlo dentro del desplegable.

En ‘Category‘ colocamos la categoría a la que pudiese pertenecer el bloque, si no lo identifica las categorías que vienen por defecto podemos crear una nueva.

Las ‘Keywords‘ son palabras o trozos de palabras que nos servirán para buscar el bloque dentro del listado de bloques. podemos poner por ejemplo ‘Genesis’

En ‘Post Types‘ podemos marcar donde deseamos colocar el bloque.
En nuestro caso, en entradas, páginas y en el cpt libros.

Creando los campos del bloque

Tenemos esto.

Al hacer click en el botón más tenemos.

A la derecha de la imagen anterior, estando en el panel de administración tenemos una barra donde se define el campo.

Field Label, corresponde al nombre del campo. Pondremos ‘URL Enlace’.

Field Name (slug), lo necesitaremos cuando tengamos que llamar a este campo. Lo llamaremos url-boton

Field Type, corresponde a al tipo de bloques, seleccionamos URL.

Después tenemos otros campos donde podemos dar ayuda al usuario WordPress que rellene los datos.

Por ejemplo, en el Texto del marcador de posición podemos poner ‘Url de destino’.

Para crear el campo del texto del enlace creamos un nuevo campo, ponemos como nombre ‘Texto del enlace‘ y como ‘slug’ ponemos ‘texto-enlace’. El resto de campos los rellenamos como en el campo anterior.

Una vez publicado o guardado como borrador nos sugiere una ruta dentro de nuestro proyecto, tal como se ve en la imagen inferior.

Quizás sea mejor como ruta ‘wp_content/themes/tu-tema/blocks/bloque-boton/block.php‘

Creación de la carpeta y ficheros necesarios

Creamos la carpeta y los dos ficheros mencionados al principio, es decir, creamos la carpeta ‘bloque-boton‘ y dentro de ella los ficheros ‘block.php‘ y ‘block.css‘

Ficheros .php y .css

Dijimos anteriormente que la plantilla debe de contener un texto en el botón y un enlace indicando la url a la cuál nos llevará al hacer click en él.
Además en el fichero .css meteremos los estilos necesarios para ver botón según nuestro diseño.

   
   <?php
   $texto = block_value('boton-texto');
   $url   = block_value('boton-url');
   ?>

   <?php if ($url && $texto) : ?>

      <div class="bloque-boton-wrapper">
          <a 
             href="<?php echo esc_url($url); ?>"
             class="btn-dinamico">
             <?php echo esc_html($texto); ?>
         </a>
      </div>

      <?php else : ?>

      <?php if ( is_admin() ) : ?>
        <p style="padding:10px;background:#f5f5f5;
            border:1px dashed #ccc;">
            Configura el texto y la URL del botón.
        </p>
      <?php endif; ?>

   <?php endif; ?>

Ahora, estando en el administrador y en la plantilla donde queremos colocar nuestro nuevo bloque de botón solo tendremos que localizarlo en los bloques disponible y al hacerlo nos aparecerá algo así, debemos de colocar los datos necesarios:

Al hacer click sobre cualquier parte exterior al bloque del botón y si el proceso ha sido correcto tendremos este botón disponible:

Galería de imágenes con enlaces

En este segundo ejemplo veamos como crear una galería de imágenes donde cada imagen tendrá un enlace que bien puede ser a otra página del mismo proyecto o a un sitio exterior. Algo así:

Los campos que necesitamos para cada ítem de la galería serán: La imagen, el texto del enlace y la url del enlace, es decir necesitamos tres campos por cada ítem de la galería.

Vamos al administrador y hacemos click en ‘Bloques personalizados – Añadir nuevo‘, esto nos abre una pantalla donde nos pide un nombre para ese bloque, podemos poner ‘Galería de Imágenes Personalizadas’, a la derecha de la pantalla vemos que tenemos unas opciones.
Una vez estas opciones rellenadas tenemos esto.

<div class="columnas">
   <figure>
      <a href="<?php block_field( 'url-button-one' ); ?>" alt="">
          <img src="<?php block_field( 'image-one' ); ?>">
          <div class="capa">
              <h2>
                  <?php  block_field( 'text-button-one' ); ?>
              </h2>
          </div>
      </a>
   </figure>
   <figure>
      <a href="<?php block_field( 'url-button-two' ); ?>" alt="">
          <img src="<?php block_field( 'image-two' ); ?>">
          <div class="capa">
              <h2>
                  <?php  block_field( 'text-button-two' ); ?>
              </h2>
          </div>
      </a>
   </figure>
   <figure>
      <a href="<?php block_field( 'url-button-three' ); ?>" alt="">
          <img src="<?php block_field( 'image-three' ); ?>">
          <div class="capa">
              <h2>
                  <?php  block_field( 'text-button-three' ); ?>
              </h2>
          </div>
      </a>
   </figure>
   <figure>
      <a href="<?php block_field( 'url-button-four' ); ?>" alt="">
          <img src="<?php block_field( 'image-four' ); ?>">
          <div class="capa">
              <h2>
                  <?php  block_field( 'text-button-four' ); ?>
              </h2>
          </div>
      </a>
   </figure>
</div>

.columnas {
    width: 100%;
}
.columnas a {
  color: #fff;
}
.columnas figure {
  position: relative;
  margin: 16px;
}
.columnas figure .capa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  transition: all 1s ease-out;
  opacity: 1;
  display: grid;
  justify-content: center;
  align-items: center;
}
.columnas figure .capa h2 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  .columnas {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 3rem;
  }
  .columnas figure {
    width: 100%;
    margin: 0;
    margin-right: 0;
  }
  .columnas figure .capa {
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: all 1s ease-out;
  }
  .columnas figure:hover .capa,
  .columnas figure:active .capa {
      opacity: 1;
      visibility: visible;
  }
}

Creamos los ficheros necesarios si aún no le hemos hecho,.
Estando en el administrador y en la plantilla que deseemos colocar el bloque, lo buscamos y colocamos, veremos algo así por cada ítem que tengamos.

Subimos las imágenes, colocamos el texto y el enlace por cada imagen.

Publicamos o guardamos y ya lo tenemos, si vas al navegador y si todo ha ido bien nos aparecerá la galería tal cual la hemos diseñado.

¿block_value() o block_field()? Diferencias

Genesis Custom Blocks ofrece dos funciones principales para mostrar datos:

block_field()

Imprime directamente el valor:

block_field(‘titulo’);

Problemas:
   • No devuelve el valor.
   • No podemos validarlo.
   • No podemos aplicar escapes personalizados.
   • Menor control.

block_value() (Te lo recomiendo)

Devuelve el valor para que lo podamos manipular.

$titulo = block_value(‘titulo’);
echo esc_html($titulo);

Ventajas:
   • Separación entre lógica y vista.
   • Permite validaciones.
   • Permite fallback.
   • Mejor mantenimiento.
   • Mayor seguridad.

En desarrollos profesionales se recomienda usar siempre block_value().

Buenas prácticas de seguridad en bloques personalizados

Escapa según el contexto:

Escapa siempre aunque lo hallas colocado tú.

Conclusión: ¿Vale la pena usar Genesis Custom Blocks?

Si quieres crear bloques personalizados en WordPress usando PHP de forma rápida y estructurada, Genesis Custom Blocks es una herramienta excelente.

Nos permite:

   • Crear bloques reutilizables.
   • Separar lógica y presentación.
   • Mantener código limpio.
   • Escalar proyectos profesionales.

Si además aplicas buenas prácticas como usar block_value( ) y escapar correctamente la salida, tendrás bloques seguros, optimizados y fáciles de mantener.

Como has visto, Genesis Custom Blocks permite crear bloques personalizados para Gutenberg de forma sencilla utilizando campos personalizados y plantillas PHP. Además, si aplicas buenas prácticas como el uso de block_value() y el escapado correcto de la salida, podrás desarrollar bloques seguros, optimizados y fáciles de mantener.

Puedes ampliar conocimientos visitando

Manual del editor de bloques
Referencia de la API de Bloques
Creación de bloques para WordPress
Documentación de block.json

También te puede interesar

• Personalizar WPForms con CSS
• Font Awesome en WordPress
• Introducción a Gutenberg

Salir del blog