Te voy a enseñar cómo crear tus propios bloques reutilizables para el editor de bloques de WordPress, con solo cuatro clics y un poquito de html y css. Sin JS, PHP ni REACT. En escasos minutos, Pim pam. ¡Y con DEMO!
Si todavía no has hecho el salto de utilizar editores visuales como Divi, Elementor y similares a pasarte totalmente al editor de bloques nativo de WordPress (Gutenberg), estás tardando. Es rápido, ágil y es super flexible. No te crece la barba mientras se carga ni mientras se guarda el post o página.
Puede costar un poco al principio acostumbrarse, pero cuando le coges el tranquillo, es una pasada. Y ahora, con los temas «full site editing» (este blog está hecho con el tema twenty-twenty-three, que ya te deja editar absolutamente toda la plantilla, header, footer, listados de posts, archivos de categorías, toooodo) esto es un game-changer total. Te animo a probarlo.
Crear tus propios bloques para el editor
Diseñar e implementar nuestros propios bloques a medida, de entrada puede echar un poco para atrás: Necesitas un entorno de desarrollo local para trabajar con los ficheros, y tienes que escribir código php, js y react, que además tienes que compilar usando herramientas front-end.
Si tu bloque no va a ser dinámico ni complejo (no va a tener automatizaciones con datos de posts etc), y simplemente va a usar pocos datos entrados a mano (fotillo, texto, link, un par de divs), la verdad que hay otros métodos más fáciles.
Muchos desarrolladores usamos el plugin Advanced Custom Fields (ACF) para crear bloques. Bueno, la verdad, usamos ACF hasta para hacer gazpacho. ACF dispone de un método de registro de bloques usando los campos personalizados que es realmente versátil y potente, y más sencillo que el método original con React.
Pero sigue siendo un recurso dirigido a desarrolladores y usuarios avanzados. Además de que en ciertos casos, donde sólo necesitamos hacernos un par de bloquecitos, es un pedazo de plugin muy gordo.
Así que, investigando maneras fáciles de hacer bloques, me encontré con Genesis Custom Blocks, un plugin gratuito (es FREEMIUM; hay versión PRO de pago, que tiene más cosas) que te permite crear en pocos minutos tus propios bloques con sus campitos y plantillas.
Al principio, me echó un poco para atrás lo de «Genesis» porque éste es el nombre de un framework/tema para desarrollar plantillas de WP desde cero con control total, lo que hacemos los developers, pero no los implementadores o usuarios principiantes o intermedios. Y parecía que el plugin era un addon de Genesis Framework y que fuera requisito usar Genesis. ¡Afortunadamente no es así!
Crea tu primer bloque con Genesis Custom Blocks
Una vez instalado y activado el plugin, tendrás un nuevo menú en el panel de administración llamado Custom Blocks. Cuando entres, en su dashboard verás que tienes un primer bloque cread en estado borrador, para que le des a editarlo y lo chafardees. Enseguida verás que está chupado hacer el tuyo.
Tenemos arriba cuatro pestañas: Builder (constructor), Template editor (plantilla), Editor preview (vista previa de cómo saldrá en nuestro edito) y Front-end Preview (una vista previa del editor, luego «in post» puede variar un poco dependiendo de los estilos de nuestro theme)
Usando el builder
El builder tiene dos subpestañas en el centro, que al principio me descolocaron, pero en cuanto lo entendí, me moló que te cagas. Las dos pestañas son «Editor fields» e «Inspector fields». Y podemos crear campos en la que queramos. La única diferencia es, cuando usemos el bloque en modo edición, unos campos aparecerán en el bloque «in situ» en el editor, y otros campos, los «Inspector fields» aparecerán en el panel de la derecha.
Por ejemplo, de tu bloque puedes poner en el mismo bloque los campos de insertar contenido (textito, foto, link), y en el panel derecho, los campos de escoger colorines y estilos, otras opciones…
Esto me parece SUPER, porque me encanta hacer interfaces limpias y ordenaditas, ya verás con mi ejemplo cómo mola.
La interfaz es como el editor de bloques normal, según le vas dando al [ + ] para añadir campos para tu bloque, en el panel derecho te irán apareciendo las opciones de cada campo.
Lo primero es darle nombre al campo, y escoger de qué tipo es. La versión gratis del plugin nos viene con unos cuantos tipos de campo esenciales y estándar: Línea de texto, caja de texto, número, imagen, select/checkboxes, un estupendo campo de escoger color… Aquí te pongo una imagen de los campos disponibles en las versiones free y pro:
¡Cromos de Cine!
Yo he creado un nuevo bloque llamado «cromo de cine». Le he añadido foto, cuatro cajitas de texto para hacer una minificha guay, y luego un textarea para poner actores del reparto así en plan normal, separados por coma.
Puedes por supuesto, reordenar tus campos, establecer diferentes anchuras para que quede todo más recogido, etc.
Aquí puedes ver los campos que le he puesto para que salgan en la edición del bloque dentro del mismo:
Y aquí he puesto los de los estilos para que salgan en el panel derecho, en el inspector, cuando insertemos el bloque:
Una vez tienes tus campos, te haces tu plantillita. Puedes usar su template editor, donde simplemente añadas tu html, y en donde quieras que sea pintado el valor de un campo, usas el formato {{nombre-del-campo}}. Todos mis campos devuelven texto, salvo el campo de la imagen, que devuelve la url de esta. En las opciones del campo imagen puedes escoger en qué tamaño quieres que salga. Los campos de color, devuelven un valor de color estandar HEX (#a1b2c3).
Para usuarios avanzados, también se pueden crear los ficheros de plantilla del bloque en tu tema o tema hijo, hay una api chula y bien documentada para sacar los campos en php de manera bastante sencilla, además de poner condicionales y «cosas».
Yo aquí voy a mostrar la manera «pim pam» y hago la plantilla con el Template Editor. Esta es mi plantilla:
Aquí verás mejor el código html usado:
<article class="cromo" style="background-color:{{color-del-fondo}};color:{{color-del-texto}}">
<figure>
<img loading="lazy" src="{{fotograma}}" width="100%" height="auto"
alt="Fotograma de la película {{titulo-spain}}">
</figure>
<main class="cromo-interior">
<p class="smallcaps">{{generos}} - {{year}}</p>
<h3>{{titulo-spain}} <br> ({{titulo-original}})</h3>
<p><strong>Dirige:</strong> {{director}}</p>
<p><small><strong>Reparto principal:</strong> {{reparto}}</small></p>
</main>
</article>Fíjate que, aunque podemos editar los estilos en la pestañita «CSS», en mi html hay estilos inline usando style=»». Esto es porque aquí puedo usar y recuperar el valor que hayamos metido en los campos de los colores, mientras que en el CSS aparte no se puede. Lo he intentado pero no va, jejeje.
Y luego, pues un poquito de CSS también para la vista del bloque en la página o post:
Puedes coger de aquí mi CSS «chusquero» con !important y todo, pero que sirve para la demo perfectly:
.cromo {
box-shadow:5px 5px 15px -5px rgba(0,0,0,0.5);
max-width:350px!important;
font-size:16px
line-height:1.5;
}
.cromo h3 {
font-weight:bold;
font-size:24px;
line-height:1;
margin:0;
}
.cromo * {
max-width:100%;
}
.cromo figure {
margin:0;
padding:0;
}
.cromo-interior {
padding:0 20px 10px;
}
.smallcaps {
font-size:12px;
text-transform:uppercase;
}Y ya podemos ir al «editor preview» para ver cómo quedaría:
Brutal ¿verdad? Y además aquí tenemos más opciones para nuestro bloque, asignarle un icono, categoría de bloques, palabras clave para encontrarlo fácilmente, asignación de tipos de post donde queramos que se pueda usar… ¡SUPERPRO! ¡Vamos a poner una peli, venga!
Y finalmente, cómo se ve el bloque en el front end: Aquí hay que tener en cuenta de que la vista previa no será 100% clavada al resultado en nuestro theme, pero sirve para tener una preview digna. Te añado captura de la vista previa dentro del plugin(admin), y al lado el bloque tal cual insertado en este mismo post:
Acción, Bélica, Comedia – 1970
Los Violentos de Kelly
( Kelly’s Heroes)
Dirige: Brian G. Hutton
Reparto principal: Clint Eastwood, Donald Sutherland, Telly Savalas, Don Rickles, Carroll O’Connor, Harry Dean Stanton, Gavin MacLeod, Stuart Margolin y Karl-Otto Alberty
Cabe decir, que parece más un punto de libro que un cromo, pero bueno oye, eso ya sabes que lo vas a hacer tú a tu manera y en base a tus necesidades.
Lo importante es que, tenemos ya con muy poquito trabajo un bloque nuestro con sus opcioncitas la mar de chulo.
Voy a hacer otro a ver qué tal queda; lo buenos es que el bloque lo puedo usar en columnas, etc para integrarlo en nuestra maquetación.
Voy a poner Dark Star del Carpenter aquí al lado, que es una joyita;
Comedia, Ciencia Ficción – 1974
Estrella Oscura
(Dark Star)
Dirige: John Carpenter
Reparto principal: Dan O’Bannon, Nick Castle, John Carpenter, Brian Narelle
Y así tal cual para que veas cómo lo he editado in situ (¡Inception!).:
Espero que te haya parecido fácil y que te sea util este plugin y el tutorial. Iba a decir que te subscribieras dándole a la campanita, pero esto no es elyutube, así que agradeceré tanto los comentarios como la difusión de este post. A disfrutarrrrr!
Deja una respuesta