Atrévete a jugar con los bloques de WordPress

Con el editor nativo, hasta el infinito y más allá.

Actualizado el 25 de Octubre de 2022.

¿Sigues sin llevarte bien con el «nuevo» editor de bloques de WordPress?

Tiene ya casi 4 años, así que nuevo, nuevo, ya no es. Pero digamos que aún no le has tomado confianza, ¿verdad?

En este vídeo y artículo te propongo un juego para cambiar tu relación con el editor de bloques de WordPress. Un juego (casi) de niños para descubrir su potencial, poner a prueba tu creatividad y, sobre todo, divertirte.

• No necesitas saber de código.
• No necesitas saber de diseño.
• Con tener ganas de usarlo y un poco de curiosidad es más que suficiente.

Presentación completa «Atrévete a jugar con el editor de bloques»

Aquí tienes la grabación de la charla que di en la Meetup WordPress Terrassa sobre las posibilidades del editor de bloques nativo de WordPress en su versión 6.1 (Nov 2022).

¿Prefieres leer? Aquí tienes el contenido de la charla resumido en bloques:

Dónde puedes usar el editor de bloques de WordPress

Con la llegada del Full Site Editing a WordPress, la respuesta a esta pregunta es: ¡donde quieras!

• Entradas de blog
• Entradas de CPTs
• Páginas estáticas
  • Landing
  • Contacto
  • Sobre mí/nosotros
  • Home
  • …
• Web completa (Full Site Editing)

Entre los bloques nativos disponibles, puedes encontrar varios bajo la categoría «Tema», como los que introducen el logo, menús o un formulario de comentarios.

Estos bloques están pensados para webs en modo Full Site Editing (edición completa del sitio) ya que, aunque es posible incluir estos bloques en el contenido, se trata de elementos que suelen ir fuera del mismo, en la cabecera, barra lateral o pie de página, entre otros.

Como aún son muchas las webs que usan temas clásicos en lugar del modo Full Site Editing, en este artículo vas a repasar los bloques más comunes para crear contenido, válidos para crear cualquier entrada de blog o página.

Cómo sacarle chispas al editor de bloques de WordPress

En los siguientes vídeos tienes un repaso de los principales bloques de WordPress y cómo editarlos para conseguir el aspecto o diseño que deseas.

1. Añadir bloques

En este vídeo puedes ver cómo añadir bloques desde el editor.

Cuando creas una entrada o página con el editor de WordPress, el primer bloque ya está creado justo debajo del título. 

Si comienzas a escribir en él tomará por defecto el formato de párrafo.

Y con solo pulsar en el intro del teclado irás creando nuevos bloques de forma orgánica, como si escribieras en cualquier editor de textos tipo Word, Pages, etc.

Pero, ¿y si quieres introducir otro tipo de bloque? 

Existen 3 formas de añadir un bloque:  

1. Pinchando el icono + que aparece a la derecha en la pantalla del editor.
2. Pinchando en el icono + situado en la barra superior del editor.
3. Escribiendo una barra inclinada (/) en el bloque de texto.

En los tres casos puedes buscar el bloque que te interesa escribiendo su nombre o navegar visualmente por todos los que ofrece el editor de WordPress.

2. Eliminar bloques

En este vídeo puedes ver cómo eliminar bloques desde el editor.

Tienes la opción de eliminar bloques de forma individual, pinchando en los 3 puntos de la esquina superior del bloque.

Si quieres eliminar varios bloques de una vez te recomiendo seleccionarlos desde la vista de lista, (en la barra superior, el icono con tres líneas en formato lista).

También puedes seleccionar los bloques desde la pantalla principal, pero como puedes ver en el vídeo esta opción aún da algunos problemas (octubre 2022).

3. Mover bloques

Existen varias opciones para mover bloques dentro de una página o post:

Ya estén o no agrupados, puedes:

• Arrastrarlos pinchando en los 6 puntos sobre el bloque o conjunto de bloques (a veces la localización final es poco precisa).
• Moverlos con las flechas hacia arriba o abajo, lo cual tiene limitaciones a nivel de bloques (esta opción salta grupos, no permite introducir el bloque en un grupo u otro bloque existente).
• Arrastrarlos en la vista de lista (mayor precisión y granularidad).

4. Agrupar y desagrupar bloques

En este vídeo puedes ver cómo agrupar y desagrupar bloques de WordPress.

Ya sea desde el editor o vista de lista, solo tienes que seleccionar los bloques que deseas agrupar, pinchar en el icono de 3 puntos que aparece a la derecha sobre los bloques seleccionados y pinchar en «Agrupar» (o «Desagrupar» si quieres deshacerlo).

Podrás mover los bloques dentro del grupo o arrastrarlos si deseas modificar el número de bloques que contiene dicho grupo.

5. Posibilidades de edición en un bloque de grupo

En este vídeo puedes ver las posibilidades de diseño que te da un bloque de grupo.

En el bloque de grupo puedes realizar las siguientes modificaciones:

• Añadir un color de fondo.
• Cambiar el color de los enlaces.
• Cambiar el color, tamaño, espaciado y estilo de letra.
• Modificar las dimensiones del bloque: relleno, margen y espaciado interno del bloque.
• Añadir un borde y radio, cambiando su color y estilo (punteado, rayado o liso).
• Limitar el ancho máximo del contenido.

6. Editar bloques de párrafo y encabezados

En este vídeo puedes ver cómo editar un bloque de párrafo y encabezado, e intercambiar entre ellos.

En el bloque de párrafo y encabezado puedes realizar las siguientes modificaciones:

• Cambiar el color y resaltado de palabras individuales desde el menú superior del bloque.
• Desde la barra lateral derecha:
  • Añadir un color de fondo.
  • Cambiar el color de los enlaces.
  • Cambiar el color, tamaño, espaciado y estilo de letra.
  • Modificar las dimensiones del bloque: relleno, margen del bloque.

Intercambiar entre párrafo y encabezado mantiene el formato, pero no cuando lo intercambias por una lista, por ejemplo, a pesar de que la lista también ofrece opciones similares de edición.

7. Editar listas

En este vídeo puedes ver cómo editar un bloque de lista nativo.

En él puedes elegir:

• Color de texto, fondo y enlace.
• Estilo, tamaño y espaciado de tipografía.
• Relleno y margen.

Tan solo tienes dos opciones de lista, la numerada (ordenada) y la de puntos o bullets (no ordenada).

Aunque la ordenada te permite invertir los números o empezar en otro punto que no sea siempre el 1, la lista no numerada apenas te da opciones, salvo si tienes conocimientos de CSS para aplicar clases según te interese.

¿La alternativa? Instalar el plugin EditorsKit:

Con EditorsKit instalado puedes intercambiar diferentes tipos de lista no ordenada (estrellas, guiones, puntas de flecha…), así como modificar su color.

8. Crear una sección Hero

Así puedes crear tu propia sección Hero:

Puedes elegir entre fondo de color o imagen de fondo, la posición que ocupará el contenido dentro del fondo y el punto de la fotografía que deseas centrar en la pantalla.

Además, podrás definir el alto mínimo que ocupará el bloque, que puede ser la longitud que tú elijas, en píxeles por ejemplo, o un modo de pantalla completa que se ajusta a la altura total de la pantalla desde la que se visualice el bloque en ese momento.

¿Necesitas un poco de inspiración?

Prueba a usar un patrón de bloque ya disponible y modificarlo a tu gusto:

9. Crear y editar columnas

En este vídeo puedes ver todas las opciones que te ofrece el bloque nativo de columnas:

Puedes elegir entre 1, 2, y 3 columnas con distintas proporciones, que podrás modificar a posteriori desde la barra lateral (hasta 6 columnas posibles).

De nuevo, las opciones de edición son muy amplias, no solo en relación al bloque en su conjunto, sino de cada columna por separado, así como el espacio entre ambas columnas tanto en horizontal (escritorio) como en vertical (móvil).

Algunas opciones son:

• Añadir un color de fondo.
• Cambiar el color de los enlaces.
• Cambiar el color, tamaño, espaciado y estilo de letra.
• Modificar las dimensiones: relleno, margen, espaciado entre columnas y espaciado interno.
• Añadir un borde y radio, cambiando su color y estilo (punteado, rayado o liso).
• Limitar el ancho máximo del contenido de cada columna.

10. Añadir iconos sociales

En concreto, el bloque nativo de iconos sociales de WordPress es especialmente versátil:

Puedes modificar:

• Disposición y orientación.
• Color del icono y del fondo.
• Estilo visual: por defecto, solo logotipos o en pastilla).
• Dimensiones: relleno, margen y espaciado entre iconos.
• Con o sin etiquetas.

11. Crear un bloque reutilizable

Si vas a usar un mismo bloque en diferentes puntos de la web y quieres mantenerlo actualizado, los bloques reutilizables son un recurso muy útil.

Una vez que has guardado un bloque en tu lista de reutilizables podrás insertarlo donde lo necesites, cuando lo necesites.

¿Para modificarlo? Tienes dos opciones:

1. Editarlo como bloque reutilizable, desde página de bloque o en el punto donde te encuentres, en cuyo caso se alterarían todas la páginas o entradas donde hayas introducido anteriormente ese bloque.
2. Convertir a bloque normal. De esta forma puedes modificar su contenido sin que cambie en los posts y páginas donde ya lo hayas insertado.

12. Aprovecha los patrones de bloques

¿Sientes que tus diseños de bloques no llegan hasta donde necesitas?

Prueba a navegar por los miles de patrones de bloques que ya hay disponibles en WordPress.

¿Ves alguno que te guste? Solo tienes que pinchar en «Copiar», volver a tu escritorio de WordPress y pegar el contenido en un bloque de párrafo. Voilá!

Y lo mejor de todo es que puedes personalizarlo a tu gusto, o investigar en los detalles de bloque cómo han conseguido aplicar este o ese otro efecto que tanto te ha llamado la atención.

¡Quién sabe lo que puedes descubrir! 😉

Plugins para ampliar las funcionalidades del editor de WordPress

¿Necesitas más opciones? ¿Más versatilidad?

Aquí te dejo una lista de plugins recomendados:

• EditorsKit: amplía las funcionalidades de los bloques nativos sin añadir bloques nuevos.
  • Añade nuevos tipos de lista.
  • Permite ocultar en desktop, tablet o móvil.
  • Da la opción de mostrar u ocultar bloques a usuarios identificados o no.
• Kadence Blocks: un constructor de bloques, buena opción si trabajas con el tema de Kadence.
• GenerateBlocks: un constructor de bloques, buena opción si trabajas con Generate Press.
• Spectra: un constructor de bloques, buena opción si trabajas con Astra.

¿Y ahora?

¡A jugar con el editor de bloques de WordPress! 🎉

Te recomiendo comenzar por el editor nativo. Ya ves que no hace falta añadir mucho más para editar los bloques a tu gusto.

Para un blog sencillo, con EditorsKit + los bloques nativos tienes más que suficiente.

Y si necesitas algo más, elige solo 1 plugin de bloques de los que te recomiendo, aquel que te ofrezca las opciones que necesitas.

¿Dudas? Te leo en los comentarios. 😉