Durante la primera sesión de este curso ya explicamos el concepto de bloque reutilizable y vimos cómo se crean estos bloques desde el interfaz del nuevo editor de WordPress. El procedimiento para conseguirlo no puede ser más simple, ya que consiste en situarse sobre el bloque que interese, hacer clic sobre el icono de opciones del bloque (el que tiene forma de tres puntos alineados en vertical) y seleccionar la opción «Añadir a los bloques reutilizables». Una vez realizada esta operación, el bloque ya se puede utilizar tantas veces como se desee, a modo de miniplantilla de contenido.
Cuando se trabaja con bloques reutilizables, lo más habitual es crearlos a partir de un único bloque. Sin embargo, conviene tener en cuenta que un bloque reutilizable puede crearse también a partir de varios bloques diferentes, lo cual permite definir bloques complejos que posteriormente podrán ser reaprovechados cuantas veces sea necesario. La selección de varios bloques se puede realizar mediante el gesto de selección del ratón, o con una acción de selección múltiple de teclado y ratón (pulsando la tecla Mayúsculas a la vez que se hace clic)..
1. Para qué se pueden utilizar los bloques reutilizables
Las posibilidades de los bloques reutilizables son prácticamente ilimitadas, pero sobe todo son útiles cuando hay que utilizar un diseño complejo en diversas ocasiones. Por ejemplo, en los siguientes casos:
- Bloques de llamadas de atención, advertencias, avisos importantes, etc.
- Elementos que solicitan una interacción con el usuario: botones, bloques de llamada a la acción, etc.
- Formularios de contacto y otros tipos de formularios.
- Tablas.
- Diseños en columnas.
- Galerías de imágenes con diseños complejos.
- Titulares vistosos.
- Listados de elementos repetidos: últimas entradas, últimos comentarios, entradas de una o varias categorías, etc.
- Imágenes de cabecera.
- Imágenes de fondo.
- Bloques de código HTML.
- Diseños de páginas de aterrizaje, páginas de inicio y otras páginas complejas.
- etc.
2. Gestión de los bloques reutilizables
Tal como hemos explicado en otros artículos de este curso, la página de gestión de los bloques reutilizables no es directamente accesible desde el backend de WordPress. La única forma de llegar a ella es ir a las opciones generales del editor, pulsar en el icono de los tres puntos verticales, y seleccionar la opción “Gestionar todos los bloques reutilizables” (esta mismo enlace también está disponible al final de la sección de bloques reutilizables del insertador de bloques).
Ahora bien, siempre es posible acceder a la página de gestión de los bloques si se conoce su URL. Para averiguarla, hay que apuntar a la página de gestión de páginas, y sustituir el último elemento de la URL por wp_block. Por tanto, si la URL de gestión de páginas eshttp://blogsfad.educacion.navarra.es/usuarioxxx/wp-admin/edit.php?post_type=page, la URL de gestión de los bloques reutilizables será http://blogsfad.educacion.navarra.es/usuarioxxx/wp-admin/edit.php?post_type=wp_block
Cualquiera de los procedimientos que acabamos de describir resulta farragoso, de modo que hemos buscado una solución para conseguir un acceso más ágil y transparente. Después de cierto tiempo de búsquedas y pruebas, finalmente hemos encontrado la solución gracias a la técnica descrita en el artículo Add Menu Items to the WordPress Admin Menu., cuyo código, convenientemente adaptado a nuestros propósitos, hemos activado mediante el plugin Code Snippets:
function elarequi_add_reusable_blocks_admin_menu_item() {
add_posts_page(__('Bloques reutilizables'), __('Bloques reutilizables'), 'manage_options', 'edit.php?post_type=wp_block');
}
add_action('admin_menu', 'elarequi_add_reusable_blocks_admin_menu_item');
2.2. Edición de los bloques reutilizables
Una vez que se accede a la página de gestión de los bloques reutilizable,se puede editar cualquier bloque de la misma manera que se edita una entrada o página de WordPress. Hay que tener en cuenta, no obstante, que si se modifica un bloque reutilizable, este se modificará en todos los lugares donde se haya insertado. No obstante, existe un procedimiento para modificar un bloque reutilizable sin aplicar los cambios a todos los lugares donde aparezca, que explicaremos más adelante.
3. Creación de un bloque reutilizable
Proponemos a los alumnos y alumnas de este curso que practiquen la técnica de los bloques reutilizables mediante un ejemplo muy sencillo, siguiendo los pasos que detallamos a continuación:
- Crear una entrada en modo borrador. Da igual su título.
- Añadir a dicha entrada un único bloque de la sección Widgets, el de «Ultimas entradas»».
- Este bloque será configurado con las siguientes opciones:
- Disposición en vista de cuadrícula.
- Número de elementos: 4.
- Número de columnas: 2.
- Una vez creado y configurado el bloque (que tendrá un aspecto parecido al que se muestra al final de este epígrafe), este se guardará como un bloque reutilizable, con el nombre «Últimas entradas en cuadrícula».
- Finalmente, este bloque se insertará en al menos un par de las entradas creadas durante la segunda sesión del curso.
- Documentación y recursos
- Gutenberg en situaciones especiales
- Desactivación de Gutenberg
- Problemas del nuevo editor de WordPress
4. Aplicación de estilos al bloque reutilizable
Para modificar el aspecto del bloque que acabamos de crear, le vamos a aplicar un sencillo estilo, mediante el código que incluimos a continuación:
/* Estilo para un bloque azul, recuadrado en gris y con texto blanco */
.bloque-azul {
background-color: aquamarine;
color: black;
border-color: black;
border: 1px;
border-style: solid;
padding: 10px !important;;
}
.bloque-azul a {
color: black;
}
Este estilo deberá activarse desde el personalizador de temas de WordPress, al cual se accede desde el menú Apariencia > Personalizar > CSS adicional. Una vez hecho esto, hay que ir a las propiedades avanzadas del bloque y añadir al campo «¨Clase CSS adicional», el nombre de la clase CSS, sin el punto inicial: bloque-azul. Una vez realizada dicha operación, el bloque tendrá el siguiente aspecto:
- Documentación y recursos
- Gutenberg en situaciones especiales
- Desactivación de Gutenberg
- Problemas del nuevo editor de WordPress
Por supuesto, este es un ejemplo muy modesto y sencillo. Con un manejo creativo de los bloques reutilizables y con buenos conocimientos de CSS, las posibilidades son infinitas.
5. Conversión de un bloque reutilizable a bloque normal
Ya hemos indicado que, si se edita un bloque reutilizable, este queda modificado en todos los los lugares donde ha sido insertado. Para utilizar un bloque reutilizable y al mismo tiempo realizar cambios en él, hay que hacer lo siguiente:
- Insertar el bloque reutilizable de manera normal.
- Una vez insertado, seleccionar la opción «Convertir a bloque normal».
- Realizar los cambios que sean necesarios.
Podemos ver este uso en el ejemplo que ya hemos utilizado un par de veces en esta página. y que de nuevo incluimos a continuación. En este caso, hemos insertado el bloque reutilizable
«Últimas entradas en cuadrícula» y a continuación lo hemos convertido a bloque normal, tras lo cual hemos activado en el bloque la opción de que se muestre la fecha de las entradas:
- Documentación y recursos
- Gutenberg en situaciones especiales
- Desactivación de Gutenberg
- Problemas del nuevo editor de WordPress
No hace falta decir que, si se realiza esta operación, el bloque insertado no se actualizará en caso de que se hagan cambios en el bloque reutilizable.
6. Exportación e importación de bloques
Los bloques reutilizables se pueden exportar e importar desde la página de gestión de este tipo de bloques. Para exportar un bloque, basta con hacer clic en la opción «Exportar como JSON», que aparece al pasar el ratón por encima del nombre del bloque.
Si lo que se desea es importar un bloque, entonces hay que hacer clic en el botón «Importar de JSON». En caso de que se importe un bloque con el mismo nombre de otro que ya existe, el bloque se duplicará, lo cual es muy útil para disponer de dos o más versiones de un mismo bloque con las diferencias que sean necesarias en cada caso.
Mediante las operaciones de exportación e importación de bloques, es posible transferir los bloques de un sitio web a otro, lo cual permite reaprovechar el trabajo de diseño y maximizar así la productividad.
Para los alumnos y alumnas interesados en los aspectos más técnicos de este procedimiento, incluimos a continuación el contenido del fichero de exportación .JSON del bloque «Últimas entradas en cuadrícula»:
{
"__file": "wp_block",
"title": "Últimas entradas en cuadrícula",
"content": "<!-- wp:latest-posts {\"postsToShow\":4,\"postLayout\":\"grid\",\"columns\":2} /-->"
}
7. Conversión de un bloque reutilizable en un widget
Hay algunos plugins que mejoran el trabajo de reaprovechamiento propio de los bloques reutilizables, ya que permiten que estos puedan ser utilizados como widgets. Uno de los que lleva a cabo esta tarea es el plugin Reusable Gutenberg Blocks Widget. Con este plugin, cualquier bloque reutilizable que haya sido definido en un sitio web puede ser utilizado como un widget. Si el tiempo de la tercera sesión lo permite, haremos alguna demostración de su uso.
[…] más que suficiente) y aunque también el usuario dispone de la capacidad para generar sus propios bloques reutilizables, muchos usuarios, especialmente los menos experimentados, pueden verse en dificultades, porque no […]