Este artículo lo escribí básicamente para poner un poco de orden en mi cabeza ya que hay muchas formas y situaciones específicas para crear bloques de Gutenberg.
Veamos a continuación el diagrama de flujo de datos que he creado y en qué situación nos deja cada situación:
Zona de principiantes
Bloques por defecto y reutilizables.
A día de hoy WordPress tiene por defecto una gran cantidad de bloques de Gutenberg que pueden ayudarte con tus múltiples necesidades para tu Web.
Si uno o varios de estos bloques por defecto pueden servirte para dar solución a tu necesidad utilízalos directamente.
Ten en cuenta que también podrías generar un «bloque reutilizable» para reutilizar (valga la redundancia) este bloque o conjunto de ellos en el mismo o cualquier otro post.
Ten en cuenta que cualquier cambio que realices a un bloque reutilizable se modificará en todas sus instancias.
Aquí te dejo un ejemplo de cómo puedes crear un bloque reutilizable del foro en español de WordPress.
Directorio de patrones o plugins
En caso de que WordPress no tengo bloques por defecto que puedan servirte, bien puedes buscar en el Directorio de patrones (recientemente añadido a la Web de WordPress).
En este directorio solo tendrás que buscar si alguno de los patrones te sirve, para después copiarlo, pegarlo directamente en tu contenido y luego hacer los ajustes que sean necesarios.
Si aún no encuentras lo que estás buscando, lo ideal sería que instales un plugin que implemente lo que estás necesitando para tu Web.
No tengo mucha experiencia en este sector, pero estos son algunos de los más utilizados:
También puedes buscar en el directorio de plugins con la palabra clave «Gutenberg».
Zona de PHP
Si quieres desarrollar tu bloque en forma personalizada y sin mojarte las manos en Javascript, entonces tendrás que buscar alguna solución con PHP.
Crear bloques con Advanced Custom Field
Este plugin me salvó las papas durante mis 6 años de Freelance en España y afortunadamente no se ha quedado atrás desde Gutenberg irrumpió en el ecosistema de WordPress.
Sigue siendo muy fácil de diseñar, programar, ajustar y utilizar. Para ello debes simplemente seguir las instrucciones de su tutorial oficial y en nada tendrás tu bloque de Gutenberg personalizado.
¿Conoces alguna otra librería o plugin con el que puedas realizar bloques de Gutenberg solamente con PHP? Déjame un comentario así luego lo investigo.
Zona de Javascript
Si por narices te toca realizar el bloque de Gutenberg con Javascript, que sepas que aún así hay varias formas de implementarlo.
Variaciones
Utiliza variaciones si necesitas implementar un bloque por defecto de Gutenberg con ciertos valores de configuración predeterminado.
Ten en cuenta que creará un nuevo icono en el listado de bloques de Gutenberg.
Ejemplo de una variación del bloque «Columns» donde añade por defecto un icono y 3 columnas vacías.
wp.blocks.registerBlockVariation(
'core/columns', {
name: 'project-intro',
title: 'Project Intro',
icon: 'portfolio',
scope: ['inserter'],
innerBlocks: [
['core/column'],
['core/column'],
['core/column'],
],
}
);Link a la documentación oficial.
Estilos
Registrar un estilo hará que tu bloque tenga una clase CSS única que puedes utilizar para dar solución a tu necesidad.
A diferencia de las «variaciones», los estilos no crearán un icono nuevo en el listado de bloques. En su lugar mostrará un estilo nuevo en el sidebar del bloque en cuestión.
wp.blocks.registerBlockStyle( 'core/quote', {
name: 'fancy-quote',
label: 'Fancy Quote',
} );
Patrones
Registrando un patrón puedes crear una plantilla con bloques por defecto o personalizados. Una vez que se selecciona desde el listado de bloques solo nos queda modificar sus valores.
También puede especificarse en su código si el usuario puede seguir añadiendo bloques al patrón o bien editar sus valores.
register_block_pattern(
'my-plugin/my-awesome-pattern',
array(
'title' => __( 'Two buttons', 'my-plugin' ),
'description' => _x( 'Two horizontal buttons, the left button is filled in, and the right button is outlined.', 'Block pattern description', 'my-plugin' ),
'content' => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">" . esc_html__( 'Button One', 'my-plugin' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">" . esc_html__( 'Button Two', 'my-plugin' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
)
);Enlace a la documentación oficial de los patrones.
Bloques con renderizado en el servidor
Si tu bloque es muy complejo para implementar todo el código en el editor o su almacenamiento, puedes optar por capturar solamente los valores y luego enviarlos a una plantilla de PHP para su posterior renderizado.
Con esta opción ganarás en facilidad de implementación pero como punto negativo no podrás ver la actualización en tiempo real en el editor.
Enlace a la documentación oficial.
Creación personalizada
Si todos los puntos anteriores no te han valido, entonces no queda más que crear el bloque en forma totalmente personalizada, registrando todos los valores a guardar, indicando cómo se mostrará en el editor y también su posterior almacenamiento y renderizado en el Frontend.
Por mi parte, aprendí a programar esos bloques siguiendo el curso de Javascripforwp.com (no hay enlace de afiliado ocutlo, solo lo recomiendo por el valor que aporta).
Mi charla en WordCamp Pontevedra
Te dejo también este vídeo con la charla sobre las «1001 formas de crear bloques de Gutenberg» que di en la WordCamp de Pontevedra.
Deja una respuesta