Cómo usar el editor de bloques de WordPress (+ 10 consejos avanzados)

Si actualmente gestionas un sitio web de WordPress o te estás planteando crear uno, probablemente hayas oído hablar del editor de bloques. Esta potente herramienta está integrada en el núcleo de WordPress, lo que permite a propietarios y desarrolladores crear su sitio completo desde cero sin necesidad de usar código.

¡Pero aún queda mucho por descubrir sobre el editor de bloques! Veamos qué es, cuáles son sus ventajas y desventajas, y cómo utilizarlo.

¿Qué es el editor de bloques de WordPress?

El editor de bloques es un revolucionario editor de sitios web que se lanzó como parte de la versión 5.0 de WordPress para sustituir al Editor clásico. Permite tanto a principiantes como a usuarios avanzados crear páginas, plantillas y sitios web completos arrastrando y soltando elementos en su lugar, ¡sin necesidad de usar código!

Cada elemento recibe el nombre de bloque y puede ser cualquier cosa, desde párrafos o imágenes hasta columnas, tablas de precios, feeds de redes sociales y mucho más. Para diseñar una página, una entrada u otra sección del sitio web, solo tienes que arrastrar y soltar los bloques en su lugar y, después, aplicar un estilo a cada uno mediante un sencillo panel de ajustes.

Es mucho más que un editor de páginas estándar. Los propietarios y desarrolladores de sitios web pueden usar bloques para personalizar encabezados, pies de página, barras laterales, páginas de archivo, páginas de pago y de carrito, y mucho más. De verdad, hace que el diseño web esté al alcance de todo el mundo.

Antes de entrar en materia, definamos algunos términos:

• Bloques. Elementos individuales que se pueden añadir al contenido. Por ejemplo, imágenes, párrafos, encabezados, vídeos, columnas y mucho más.
• Patrones de bloques. Grupos de bloques preseleccionados que puedes usar para crear secciones completas de contenido. Por ejemplo, banners, diseños de entradas, distribuciones en columnas y mucho más.
• Plantillas. En esencia, estructuras que definen el diseño y la disposición de tipos de contenido específicos. Las entradas, los productos y las páginas de categorías son ejemplos de contenido que tienen sus propias plantillas.
• Partes de plantilla. Una parte de tu sitio que aparece en la mayoría o en todas tus páginas. Por ejemplo, encabezados, pies de página y la sección de comentarios.
• Editor del sitio. Una herramienta que lleva la funcionalidad de los bloques a otras áreas de tu sitio, incluidas las plantillas y las partes de plantilla. Debes tener instalado un tema de bloques de WordPress para usar el Editor del sitio.

Ventajas y desventajas del editor de bloques

Como todo, el editor de bloques tiene ventajas y desventajas. Veámoslas.

Ventajas del editor de bloques

1. Te ayuda a trabajar más rápido y de forma más eficiente

El editor de bloques es increíblemente potente y cuenta con muchas funciones integradas diseñadas específicamente para mejorar tu flujo de trabajo. Estas son algunas funciones del editor de bloques que hacen que diseñar, publicar y editar sea mucho más rápido:

• Bloques reutilizables. Puedes guardar un bloque y utilizarlo una y otra vez en tu sitio web. Después, cuando edites ese bloque, se actualizará en todas sus instancias. Por ejemplo, puedes crear una llamada a la acción e insertarla en todas tus páginas de destino mientras las creas. Y, si necesitas cambiar el enlace del botón, se actualizará en todas las páginas.
• Patrones de bloques. Los patrones de bloques son grupos predefinidos de bloques disponibles de forma predeterminada en WordPress o mediante plugins de terceros. Te permiten insertar rápidamente secciones completas de páginas de una sola vez, como encabezados y diseños con varias columnas. Solo tienes que añadirlos a una página, personalizar los colores y ¡listo!
• Atajos de teclado. Te permiten mantener las manos en el teclado durante todo el tiempo que añades y editas contenido en tu sitio. Navega por distintos bloques, guarda cambios, inserta bloques, aplica estilos al texto y mucho más.
• Creación sencilla de entradas de blog. Puedes arrastrar y soltar contenido directamente en el editor de bloques, que lo convertirá automáticamente en los bloques adecuados. ¡Esto puede ahorrarte muchísimo tiempo! Por ejemplo, si escribes una entrada en Google Docs, puedes pegarla íntegramente en WordPress y conservará los encabezados, las imágenes, los enlaces y mucho más. ¡No hace falta añadir los gráficos y demás elementos uno por uno!
• Establecer estilos globalmente. Define colores, fuentes, espaciado y otras especificaciones de diseño que se apliquen a los bloques de todo tu sitio (si utilizas un tema de bloques). Así no tendrás que editar cada página por separado y les facilitarás las cosas a los miembros de tu equipo o a los clientes que añadan contenido a tu sitio.

2. Permite a los principiantes crear sitios complejos y atractivos sin escribir código

La interfaz basada en bloques del editor de bloques hace que sea accesible para cualquier tipo de usuario, incluidos los principiantes absolutos. Como con cualquier herramienta, hay una pequeña curva de aprendizaje, pero puedes aprovechar la útil documentación oficial del editor de bloques de WordPress, los tutoriales y los recursos de la comunidad para aprender a utilizarlo.

Después puedes usar el editor de bloques para arrastrar los elementos hasta su lugar y tomar decisiones de diseño, como elegir el color y el espaciado, desde un sencillo panel de ajustes. No necesitas editar código ni utilizar shortcodes que pueden complicarse rápidamente.

Y puedes ir aún más allá aplicando ese mismo concepto al encabezado, el pie de página, la barra lateral y las plantillas de página. Esto significa que incluso los principiantes pueden personalizar por completo todos los aspectos de su sitio: páginas de pago, páginas de búsqueda, páginas de archivo y mucho más.

Los patrones de bloques son otra función fantástica para principiantes. Son grupos predefinidos de bloques que puedes añadir rápidamente para crear secciones completas de una página, como tablas de precios, secciones principales y galerías de imágenes.

3. Permite personalizar realmente todo el sitio

A diferencia de muchas otras soluciones, el editor de bloques de WordPress te permite personalizar de verdad todos los aspectos de tu sitio mediante sus funciones. ¡Ve más allá del diseño de páginas y entradas! Estos son solo algunos de los elementos del sitio que puedes crear con bloques:

• Cabeceras
• Pies de página
• Páginas de resultados de búsqueda
• Archivos (como categorías de entradas y productos)
• Páginas 404
• Plantillas de entradas de blog
• Plantillas de productos
• Secciones de comentarios

Esta es una gran oportunidad para crear un sitio web que destaque de verdad, con un diseño y unas funcionalidades que se adapten a tus necesidades concretas. Por ejemplo, podrías modificar la plantilla de producto para incluir un vídeo de tu producto en acción, una tabla de tallas o un aviso sobre alérgenos que aparezca en todos los artículos de tu tienda. También podrías añadir una llamada a la acción que se agregue automáticamente al final de todas las entradas de tu blog. ¡Las posibilidades son infinitas!

4. Mejora el rendimiento del sitio web

El uso del editor de bloques también puede mejorar la velocidad y el rendimiento de tu sitio. No solo te permite prescindir de los pesados maquetadores de páginas, sino que también reduce el número de plugins que necesitas instalar para acceder a determinadas funcionalidades. Por ejemplo, en lugar de instalar un plugin para galerías de imágenes, puedes insertar fácilmente un bloque Galería en tu página y darle el estilo que prefieras.

Además, el código que genera el editor de bloques es más ligero y limpio que el de los plugins de maquetación de páginas. Esto significa que, cuando creas el mismo diseño de página con el editor de bloques en lugar de un maquetador de páginas, la página debería cargarse más rápido de forma predeterminada.

5. Hay muchas integraciones con plugins de terceros

Como el editor de bloques viene incluido de forma predeterminada con WordPress, funciona con temas y plugins populares. Esto también significa que los desarrolladores de terceros suelen adaptar sus soluciones para que funcionen con el editor de bloques. 

Hay muchos plugins excelentes que añaden bloques y patrones de bloques a tu biblioteca. Por ejemplo, Jetpack incluye bloques para formularios, pagos, feeds de redes sociales, captación de correos electrónicos y mucho más. 

WooCommerce añade bloques para mostrar productos, reseñas, filtros y prácticamente todo lo que puedas necesitar para crear una tienda online eficaz.

6. Mejora constantemente

¡Lo mejor está por llegar! Hay un equipo de desarrolladores y voluntarios que trabajan constantemente para publicar nuevas funciones y mejoras, y también para garantizar que WordPress sea seguro y accesible. 

Mantente al día de las últimas novedades aquí.

Desventajas del editor de bloques

Por supuesto, el editor de bloques puede no ser la solución adecuada para todos los sitios web. Estas son algunas de sus desventajas:

1. Puede que tengas que cambiar de tema o reconstruir partes de tu sitio actual

Muchos maquetadores de páginas y temas son compatibles con el editor de bloques y facilitan el cambio al editor de bloques. Sin embargo, no siempre es así. Es posible que tengas que reconstruir algunas partes de tu sitio para pasar a un sistema basado completamente en bloques.

Si quieres aprovechar el Editor del sitio, también tendrás que utilizar un tema de bloques. Esto significa que, si actualmente no utilizas un tema de bloques, tendrás que cambiar a un tema nuevo. Dependiendo de tu situación, esto puede requerir bastante trabajo. Sin embargo, ¡en la mayoría de los casos merece mucho la pena!

2. Puede que tengas que pasar por una curva de aprendizaje

Toda tecnología nueva conlleva cierta curva de aprendizaje, independientemente de tu nivel de experiencia. Así que, si tienes previsto crear un sitio nuevo con el editor de bloques o convertir tu sitio actual a bloques, tendrás que reservar tiempo para aprender a utilizar el sistema. 

Por suerte, hay muchos recursos excelentes disponibles para ayudarte, entre ellos:

• Aprende WordPress: Repleto de tutoriales y cursos que te guían por todos los detalles del editor de bloques
• Documentación del editor de bloques: Una guía de soporte con instrucciones e imágenes
• WordPress Playground: Un sitio gratuito y en blanco donde puedes experimentar con el editor de bloques y familiarizarte con él antes de hacer cambios importantes en tu sitio activo

Cómo acceder al editor de bloques y utilizarlo

Ahora que sabes un poco más sobre el editor de bloques, es hora de empezar y aprender a utilizarlo.

La interfaz del editor de bloques

Empecemos por presentar los componentes del editor de bloques. Esto es lo que verás al crear una página, una entrada u otro elemento del sitio. En la siguiente imagen hemos identificado algunos de los componentes principales, que veremos enseguida:

Este es un desglose de estos elementos:

• Insertador de bloques: Aquí puedes seleccionar y añadir bloques. Puedes ver una lista de bloques y patrones disponibles, organizados por tipo de bloque, y arrastrarlos directamente desde este panel. Abre y cierra el Insertador de bloques con el botón situado en la parte superior izquierda.
• Bloques: Esta pestaña muestra todos los bloques disponibles.
• Patrones: Esta pestaña muestra todos los patrones de bloques disponibles.
• Barra de búsqueda de bloques: Úsala para buscar un bloque o patrón específico.
• Herramientas: Este botón ofrece distintas opciones para seleccionar, desplazarte y editar bloques.
• Deshacer/Rehacer: Deshaz una acción realizada en el editor de bloques o reházla.
• Detalles: Aquí se proporciona información sobre la página o entrada, como el número de palabras y caracteres, el tiempo de lectura y el número de párrafos, encabezados y bloques.
• Vista de lista: Una herramienta que te ayuda a desplazarte por los bloques y el contenido. Consulta todos los bloques de la página, muévelos y cambia entre ellos de forma rápida y sencilla.
• Panel de ajustes: Accede a los ajustes de la página o entrada, o de cada bloque individual. Aquí puedes hacer cambios en elementos de diseño como el espaciado, los colores y mucho más.
• Más opciones: Cambia el tipo de vista, pasa al editor de código para editar en HTML y personaliza otros aspectos de tu experiencia con el editor de bloques.
• Añadir un bloque nuevo: Haz clic en este icono para añadir un bloque nuevo según la ubicación del icono en la página.

Uso de bloques

Ahora que sabes un poco dónde se encuentran los elementos importantes del editor de bloques, te mostraremos cómo añadir y editar bloques. En este tutorial crearemos una entrada de blog. Los conceptos serán similares tanto si trabajas en una entrada como en una página u otro elemento de tu sitio.

En este caso, irás a Entradas → Añadir nueva en el panel de administración de WordPress. Esto abrirá automáticamente el editor de bloques para una entrada nueva. Empieza añadiendo un título en la parte superior de la entrada.

A continuación, haz clic en el botón azul + de la esquina superior izquierda para abrir el insertador de bloques. Aquí verás una lista de los bloques disponibles. Están organizados por tipo, pero también puedes usar la barra de búsqueda para encontrar uno específico. Si pasas el cursor sobre un bloque, se mostrará más información y una vista previa de cómo se verá en funcionamiento.

Empecemos añadiendo un bloque de párrafo. Puedes buscarlo en el insertador de bloques y arrastrarlo al área de contenido principal de la derecha, o simplemente empezar a escribir donde aparece «Escribe / para elegir un bloque». 

Cuando coloques el cursor dentro del texto, aparecerá encima un nuevo menú con opciones de estilo. De izquierda a derecha, son las siguientes:

• Párrafo: haz clic aquí para convertir el bloque en otro tipo de bloque. Por ejemplo, puedes transformarlo en un encabezado.
• Arrastrar: mueve el bloque donde quieras en relación con los demás bloques de la página.
• Mover arriba/abajo: mueve el bloque un espacio hacia arriba o hacia abajo en la página.
• Alinear: alinea el texto a la izquierda, al centro o a la derecha.
• Negrita: aplica negrita al texto que selecciones dentro del párrafo.
• Cursiva: aplica cursiva al texto que selecciones dentro del párrafo.
• Enlace: convierte en un enlace el texto que selecciones.
• Más: consulta opciones adicionales para resaltar o tachar texto, convertir un número en subíndice y mucho más.
• Opciones: accede a funciones adicionales, como hacer que el bloque sea reutilizable, duplicarlo, bloquearlo y mucho más.  

Haz los ajustes que quieras en el texto del párrafo. Después, selecciona cualquier parte del bloque y haz clic en el icono de la esquina superior derecha. Se abrirá el panel de ajustes.

En la parte superior de este panel verás pestañas para Entrada y Bloque. Por ahora, centrémonos en la pestaña Bloque. Este panel muestra opciones específicas del bloque que has seleccionado, en este caso, el bloque de párrafo. 

En la sección Color puedes establecer un color para el texto, el fondo y los enlaces, solo para ese párrafo. Incluso puedes crear tu propio degradado. Por ejemplo, puedes hacer que un párrafo destaque del resto de la entrada usando un fondo verde oscuro y texto blanco.

En la sección Tipografía puedes configurar las opciones de fuente. Aunque el tamaño aparece de forma predeterminada, puedes hacer clic en los tres puntos verticales para desbloquear más opciones, como la familia tipográfica y el espaciado entre letras. En este ejemplo, decidimos cambiar el texto a una fuente serif y añadir más espacio entre las líneas de texto, lo que se denomina interlineado. 

En Dimensiones puedes ajustar el relleno y los márgenes alrededor del texto, aumentando o reduciendo el espacio según sea necesario. 

Y en Avanzado puedes añadir un anclaje HTML para enlazar a la sección desde otro punto de la entrada, o establecer una clase CSS con fines de estilo.

Ahora que el bloque de párrafo tiene el aspecto que queremos, vamos a añadir dos columnas a la entrada: una con una imagen y otra con un segundo párrafo. Añade un bloque de columnas a tu página y selecciona la distribución de columnas que quieras. Esta vez elegiremos 33/66, es decir, una división de ⅓ y ⅔. 

Verás que puedes seleccionar cada columna individualmente para aplicarle estilos y añadir bloques. 

En la columna izquierda, haz clic en el icono + y selecciona un bloque de imagen.

Aquí puedes subir una imagen desde tu dispositivo, seleccionar una existente de la biblioteca de medios o insertar una desde una URL. Decidimos añadir una imagen de una tarta Selva Negra desde la biblioteca de medios. Al hacer clic en el bloque de imagen, aparecerá una nueva barra de ajustes, igual que con el bloque de párrafo, pero con opciones ligeramente diferentes. Por ejemplo, podrás recortar la imagen, añadir texto sobre ella, aplicar un filtro y mucho más.

Si haces clic en el icono de la esquina superior derecha, verás el panel de ajustes del bloque de imagen. Allí puedes añadir texto alternativo, crear esquinas redondeadas, cambiar el tamaño de la imagen, añadir un borde y mucho más. En este caso, hemos redondeado las esquinas de la imagen con un radio de 22 px.

A continuación, añadimos otro bloque de párrafo a la derecha, en la columna de ⅔. Observa que puedes seleccionar cada columna individual para editarla o seleccionar el bloque completo de dos columnas. Cuando se seleccionan ambas columnas, aparecen delineadas en azul.

Esto te permite tomar decisiones para ambas columnas a la vez mediante la barra de herramientas que aparece. Aquí establecimos la alineación vertical en «Alinear al centro» para que el texto y la imagen quedaran alineados.

¡Y eso es todo! Puedes seguir desarrollando la entrada tanto como quieras, eligiendo entre una amplia variedad de bloques disponibles. Cada uno incluye sus propios ajustes y opciones; no dudes en probarlos hasta conseguir exactamente el aspecto que buscas.

Antes de publicar la entrada, probablemente quieras previsualizarla para ver qué aspecto tiene en la parte pública de tu sitio. Haz clic en el botón Vista previa de la esquina superior derecha y, después, en Vista previa en una pestaña nueva. Así tendrás una idea aún más precisa de cómo se verá la entrada cuando la publiques.

¡Si estás listo, ahora puedes hacer clic en Publicar para publicar la entrada!

Uso de patrones de bloques

Como recordatorio, los patrones son secciones de página prediseñadas que hacen que crear una entrada o una página sea rápido y sencillo. Volvamos a la entrada que creamos en la sección anterior y veamos cómo añadir un patrón.

Vas a hacer clic de nuevo en el icono azul + de la esquina superior izquierda para abrir el insertador de bloques. Esta vez, haz clic en la pestaña Patrones. De forma predeterminada, se abrirá una lista de patrones destacados.

Puedes usar el menú desplegable, que actualmente está configurado en Destacados, y elegir otras categorías de patrones, como Botones, Columnas y WooCommerce. También puedes usar la barra de búsqueda de la parte superior para encontrar un patrón específico. 

En este caso, seleccionemos Galería y arrastremos el patrón titulado Imágenes desalineadas con descripciones a nuestra entrada. Esto añadirá un recurso de imágenes atractivo al contenido.

Verás que el patrón está compuesto por varios bloques: dos bloques de Imagen, dos bloques de Párrafo y un bloque Espaciador. Al igual que hicimos antes, puedes editar cada bloque por separado o editar el patrón completo. Puedes editar todos los detalles del patrón para personalizarlo por completo o simplemente sustituir las imágenes y el texto por tu propio contenido.

Empieza seleccionando una de las imágenes. Después, haz clic en Reemplazar. Aquí puedes elegir entre subir una imagen o seleccionar una de la biblioteca de medios. Cuando hayas añadido tu imagen, haz lo mismo con el otro marcador de posición.

A continuación, haz clic en uno de los bloques de Párrafo y sustituye el texto por el tuyo. Puedes hacer los cambios que quieras, igual que hiciste antes con el bloque de Párrafo.

¡Y eso es todo! Ahora tienes una bonita sección de página que solo te ha llevado unos minutos crear.

Uso de plantillas y partes de plantilla

De nuevo, las plantillas son estructuras que definen el diseño y la disposición de tipos de contenido como entradas, páginas de productos y archivos. Las partes de plantilla son elementos globales reutilizables, como las cabeceras y los pies de página. Puedes editar ambos elementos con el Editor del sitio.

Para usar el Editor del sitio, debes tener un tema de bloques activo en tu sitio. En el panel de administración de WordPress, ve a Apariencia → Editor. Esto abrirá el Editor del sitio. En la parte izquierda, verás una barra lateral con opciones para Plantillas y Partes de plantilla. Haz clic en Plantillas. Aquí verás una lista de todas las plantillas de tu sitio, que variará según el tema específico que estés utilizando.

En este ejemplo, hemos seleccionado la plantilla Individual, que es la plantilla para las entradas individuales del blog. Verás que esta página ya contiene algunos bloques, entre ellos:

• Imagen destacada
• Título de la entrada
• Contenido de la entrada
• Metadatos de la entrada
• Comentarios

Puedes modificar estos bloques existentes como quieras. Hemos añadido un fondo verde claro detrás del título de la entrada, hemos hecho que el título ocupe todo el ancho, hemos cambiado la fuente del contenido de la entrada y hemos eliminado el margen entre la imagen destacada y el título. Así puedes ver el aspecto que tendrá una entrada con estos cambios:

También puedes añadir nuevos bloques a tus plantillas. Como estamos trabajando con la plantilla Individual, añadamos una llamada a la acción que aparezca automáticamente al final de todas nuestras entradas del blog. Esto te ahorrará mucho tiempo, ya que no tendrás que añadir la llamada a la acción a cada entrada por separado.

Añadamos a nuestra plantilla el patrón de bloque «Llamada a la acción sencilla».

Ahora solo tenemos que personalizar el texto de la llamada a la acción para adaptarlo a nuestras necesidades. También actualizaremos el diseño del botón. Para ello, haz clic en el bloque Botón y, después, en el icono del engranaje situado en la esquina superior derecha. Allí puedes editar ajustes como el color, la tipografía, el relleno y mucho más. Puedes cambiar el texto y el enlace del botón haciendo clic directamente en el texto del botón y utilizando la barra de herramientas que aparece.

Echa un vistazo a los cambios que hemos hecho:

Haz clic en Guardar en la parte superior derecha para actualizar la plantilla. Ahora verás que la llamada a la acción aparece al final de cada una de las entradas de tu blog.

Ahora volvamos al Editor del sitio para ver cómo editar las partes de plantilla. Ve a Apariencia → Editor y elige Partes de plantilla.

Aquí verás una lista de partes de plantilla que puedes editar. Recuerda que son elementos globales y que cualquier cambio que hagas se reflejará en todo tu sitio. Haz clic en Cabecera para editar esa parte de plantilla.

Verás la cabecera y los bloques que contiene actualmente. En este caso, están los bloques Título del sitio y Navegación.

Puedes modificar los bloques existentes igual que hiciste antes con el editor de bloques en este artículo. Solo tienes que hacer clic en uno para editarlo, utilizando el menú que aparece encima del bloque o el panel de ajustes situado a la derecha.

Vamos a añadir una barra de búsqueda al menú principal. Si haces clic en el bloque Navegación, aparecerá la misma barra de herramientas que has visto a lo largo de este artículo. Pero también verás un icono negro de + a la derecha del último elemento del menú. Haz clic en él para añadir un enlace o un bloque al menú. Hemos añadido el bloque Buscar, pero también podrías incluir un botón personalizado, un enlace nuevo o iconos de redes sociales: cualquier elemento que se adapte a tus necesidades.

Después, utiliza los paneles de Ajustes que ya conoces para aplicarle el estilo que quieras. Hemos añadido un texto de marcador de posición y cambiado el color del botón.

También puedes seleccionar toda la cabecera y aplicarle estilo utilizando el panel de ajustes de la derecha para cambiar el color de fondo, la tipografía, el relleno y mucho más. ¡Imagina todas las formas en las que puedes aplicar estas técnicas en tu sitio!

10 consejos avanzados para aprovechar al máximo el editor de bloques

Ahora que conoces los conceptos básicos, veamos algunos consejos para aprovechar al máximo el editor de bloques.

1.  Aprovecha los atajos de teclado

Los atajos de teclado son una forma muy práctica de acelerar el proceso de edición y creación de páginas, ya que no tienes que separar los dedos de las teclas. ¡Con un poco de práctica, podrás trabajar muy rápido!

Hay muchos atajos estupendos que puedes explorar, pero a continuación solo hemos incluido algunos. Ten en cuenta que pueden variar según el dispositivo que utilices. En estos ejemplos, incluimos los atajos para ordenadores con Windows:

• Mostrar u ocultar el panel de ajustes: Ctrl + Shift + ,
• Ir a la siguiente parte del editor: Ctrl + `
• Guardar los cambios: Ctrl + S
• Deshacer un cambio: Ctrl + Z
• Duplicar un bloque seleccionado: Ctrl + Shift + D
• Insertar un bloque nuevo antes de un bloque seleccionado: Ctrl + Alt + T
• Subir un bloque seleccionado: Ctrl + Mayús + Alt + T

Consulta la lista completa de atajos de teclado, incluidos los de los distintos sistemas operativos, en la documentación de WordPress.

2. Define estilos para tu sitio y tus bloques

Si tienes un sitio web con varios usuarios o eres desarrollador y entregas el sitio a un cliente, los estilos globales pueden ser increíblemente útiles. Puedes utilizarlos para definir paletas de colores y estilos de bloques predefinidos que estarán disponibles para los usuarios. Así, tu sitio web mantendrá su identidad independientemente de quién trabaje en él.

Para acceder a las variaciones de estilo y configurarlas, ve a Apariencia → Editor y haz clic en el icono de Estilos situado en la parte superior derecha. 

Ten en cuenta que cualquier cambio que hagas aquí se aplicará a todo el sitio, así que ¡edita con cuidado! Haz clic en Explorar estilos para ver una lista de opciones prediseñadas. Puedes recorrerlas y previsualizar al instante el aspecto que tendrá tu sitio en el lado izquierdo.

También puedes volver al panel Estilos para configurar opciones de tipografía, colores y diseño. Por ejemplo, haz clic en Tipografía y verás opciones para el texto, los enlaces, los encabezados y los botones. Hemos seleccionado Encabezados y hemos cambiado la fuente, el peso de la fuente y el uso de mayúsculas y minúsculas.

De nuevo en el panel Estilos, también encontrarás una opción llamada Bloques. Ábrela para ver una lista de los bloques de tu sitio. En este ejemplo, abriremos el bloque Botón. Las opciones disponibles variarán un poco según el bloque que selecciones, pero en este caso puedes editar la tipografía, los colores y el diseño. Haz clic en Colores para establecer los colores predeterminados de los botones de todo el sitio.

También puedes hacer clic en Paleta para definir las opciones de color que verán los usuarios al añadir botones a páginas y entradas. Hemos elegido añadir colores personalizados al bloque Botón.

Ahora, cuando alguien añada un botón a tu sitio, podrá elegir entre los colores personalizados que hayas definido.

3. Crea patrones sincronizados (antes llamados bloques reutilizables)

Los patrones sincronizados (bloques reutilizables) son muy útiles porque puedes guardarlos y utilizarlos en cualquier parte de tu sitio. Además, cuando cambias el diseño de uno, se actualiza en todas partes. Son perfectos para llamadas a la acción que utilices a menudo o para situaciones similares. En este ejemplo, crearemos un bloque de productos mejor valorados que podremos utilizar para promocionar productos populares donde queramos en el sitio.

Empecemos por añadirlo a nuestra página y darle estilo.

Cuando hayas terminado, haz clic en el bloque y selecciona los tres puntos verticales de la barra de herramientas que aparece encima del bloque. Después, elige Crear patrón/bloque reutilizable.

Se te pedirá que pongas un nombre al bloque y, después, que lo guardes en tu biblioteca. Cuando trabajes en otra página o entrada, verás una nueva pestaña llamada Reutilizables en el insertador de bloques. Esta pestaña mostrará todos tus bloques reutilizables y te permitirá añadirlos a tu contenido en cualquier momento.

Si haces clic en el enlace que dice Gestionar bloques reutilizables, podrás ver una lista completa de tus bloques reutilizables, así como editarlos, añadirlos o cambiarles el nombre.

4. Usa el editor de código

Si eres desarrollador o tienes algo de experiencia con la programación, quizá quieras poder aplicar rápidamente cambios precisos a una página o entrada concreta. Para acceder al editor de código, solo tienes que abrir la página o entrada en la que estés trabajando y hacer clic en los tres puntos verticales de la parte superior derecha. Después, elige Editor de código.

Ahora verás todo el contenido de la página en formato HTML. Puedes editar este código y hacer los cambios que consideres oportunos, así como alternar entre los dos editores.

Recuerda, eso sí, que editar código puede ser peligroso e incluso podría romper tu sitio. Asegúrate de hacer una copia de seguridad de tu sitio de WordPress antes de hacer cambios importantes en el código.

5. Saca el máximo partido a la Vista de lista

La Vista de lista es una función muy práctica que te ayuda a desplazarte rápida y fácilmente entre los bloques mientras trabajas. Para acceder a esta herramienta, haz clic en las tres líneas verticales de la parte superior derecha del editor de bloques. Allí verás una lista de todos los bloques que componen tu página o entrada.

Si ves una flecha a la izquierda de un bloque, puedes hacer clic en ella y expandir ese elemento para ver todos los bloques anidados que contiene. Por ejemplo, el bloque Galería contiene tres bloques Imagen.

Es una forma excelente de obtener una visión general de todos los elementos que componen tu página o entrada. También puedes arrastrar un bloque dentro de la Vista de lista para moverlo rápidamente sin tener que desplazarte hacia arriba y hacia abajo por la página. Además, si haces clic en un bloque, el Editor te llevará automáticamente hasta él, lo que resulta especialmente útil si tienes mucho contenido.

Si haces clic en los tres puntos verticales que aparecen a la derecha al pasar el cursor sobre un bloque, obtendrás aún más opciones. Puedes copiar o duplicar el bloque, insertar un bloque antes o después del que hayas seleccionado, moverlo, eliminarlo o bloquearlo, o agrupar varios bloques.

Obtén más información sobre la potente Vista de lista.

6. Añade más bloques y patrones a tu biblioteca

Aunque WordPress incluye de forma predeterminada muchos bloques y patrones fantásticos, puede que a veces necesites opciones adicionales. Hay varias formas de hacerlo:

La primera forma es a través de tu tema. Muchos temas de bloques incluyen sus propias plantillas, patrones de bloques y bloques, disponibles desde el momento de la instalación. Por ejemplo, el tema Wabi incluye patrones para formularios de suscripción, proyectos y titulares. Y Bricksy tiene docenas de patrones listos para usar que hacen que crear diseños sea rápido y sencillo.

Algunos plugins también pueden añadir bloques y patrones a tu biblioteca. Por ejemplo, WooCommerce incorpora bloques para mostrar productos y filtros, mostrar el carrito, añadir reseñas y mucho más. Jetpack incorpora una gran cantidad de bloques que abarcan desde calendarios y formularios hasta feeds de redes sociales y opciones de pago. Además, Sensei LMS añade bloques para elementos como preguntas de cuestionarios y puntos interactivos en imágenes.

También hay plugins diseñados específicamente para añadir bloques a tu biblioteca. Estos son algunos ejemplos:

• Ultimate Blocks: Filtros de contenido, reseñas, cuentas atrás, carruseles y mucho más
• Otter Blocks: Acordeones, pestañas, mapas, secciones de precios y mucho más
• CoBlocks: Preguntas frecuentes, eventos, tarjetas multimedia, opciones para compartir en redes sociales y mucho más
• Kadence Blocks: Iconos, cuadros informativos, índices, opciones avanzadas para filas y mucho más

7. Añade fácilmente contenido desde Google Docs o tu ordenador

Si sueles escribir contenido en Google Docs o trabajas con alguien que lo hace, el editor de bloques te ahorrará muchísimo tiempo. En lugar de tener que copiar y pegar individualmente cada párrafo, imagen, enlace, etc., puedes pegar el documento completo de Google Docs en el editor de bloques. WordPress convertirá automáticamente el documento en los bloques adecuados.

Si no utilizas Google Docs, aún puedes añadir fácilmente contenido, como archivos multimedia, al editor de bloques. Solo tienes que arrastrar y soltar una imagen directamente desde tu ordenador en el editor, y WordPress la convertirá en un bloque de imagen.

8. Configura bucles de consulta

El bloque Bucle de consulta es una herramienta especial que te permite mostrar listas de entradas basadas en un conjunto específico de atributos que tú defines. Por ejemplo, podrías mostrar una cuadrícula de productos agrupados por precio o listar empresas por ubicación en un directorio empresarial. Las posibilidades son prácticamente infinitas.

Solo tienes que buscar el bloque Bucle de consulta en el insertador de bloques y añadirlo a tu página o entrada. A continuación, verás dos opciones: Elegir y Empezar desde cero.

Aunque puedes crear tu propio bucle de consulta desde cero, en este ejemplo seleccionaremos Elegir. Optamos por un estilo de lista sencillo y después hicimos clic en el icono de engranaje de la esquina superior derecha para abrir los ajustes del bloque Bucle de consulta.

Activa Heredar la consulta de la plantilla para mostrar más opciones de personalización. Ahí puedes elegir el tipo de entrada que quieres mostrar (entradas, productos, etc.), establecer un orden y decidir si quieres incluir entradas fijadas. Si haces clic en el + situado junto a Filtros, puedes añadir opciones para filtrar el contenido mostrado, como categorías, autores y palabras clave. Así puedes crear una lista completamente personalizada.

Lee nuestra guía completa sobre el bloque Bucle de consulta.

 9. Utiliza el archivo theme.json

El archivo theme.json lleva el concepto de estilos globales que hemos explicado antes un paso más allá. Si eres desarrollador, tendrás un enorme control sobre los bloques y las preferencias de los usuarios. Puedes encontrar este archivo en el directorio de tu tema, al que tendrás que acceder mediante el protocolo de transferencia de archivos (FTP) o a través del cPanel de tu proveedor de hosting. 

Aquí tienes algunas formas de utilizar el archivo theme.json:

• Crear una paleta de colores predeterminada
• Configurar tamaños de fuente personalizados
• Eliminar la opción de usar colores personalizados en el editor de bloques
• Activar o desactivar los controles y opciones disponibles para los usuarios en los bloques

Como puedes ver, puedes utilizar este archivo para facilitar que los usuarios o clientes utilicen su sitio dentro de los límites de una marca o un estilo. En lugar de sentirse abrumados por las opciones, solo verán los controles que necesitan.

Descubre más información sobre el archivo theme.json y consulta ejemplos de código.

10. Bloquea bloques para garantizar la coherencia y evitar cambios

Si tienes varios usuarios en tu sitio, quizá quieras bloquear determinados bloques que no quieres que se editen o se muevan. ¡O quizá simplemente te ayude a no hacer cambios por accidente! En cualquier caso, es una función útil y fácil de usar del editor de bloques.

Solo tienes que seleccionar el bloque y elegir los tres puntos verticales situados a la derecha de la barra de herramientas que aparece. En el nuevo menú desplegable, selecciona Bloquear.

Aparecerá un nuevo menú que te permitirá desactivar el movimiento, impedir la eliminación o ambas cosas. Configura estos ajustes y haz clic en Aplicar. 

¡Este bloque quedará bloqueado cuando guardes la página!

La lista de bloques incluidos en el núcleo

Hemos hablado un poco sobre cómo añadir bloques a tu biblioteca. Pero ¿qué bloques están disponibles de forma predeterminada? Veámoslo.

Bloques de texto:

• Párrafo: Añade párrafos estándar basados en texto
• Lista: Crea listas con viñetas o numeradas
• Encabezado: Separa tu contenido con encabezados
• Tabla: Añade una tabla con varias columnas y filas
• Cita: Destaca fragmentos de texto y añade la atribución
• Clásico: Usa el Editor clásico en forma de bloque
• Código: Incluye código con formato en tu sitio
• Preformateado: Añade texto que se muestre exactamente como lo escribes
• Cita destacada: Da énfasis al texto de una forma más estilizada que con el bloque Cita
• Verso: Escribe y aplica estilos a poemas en tu sitio

Bloques multimedia:

• Imagen: Incluye imágenes en tu contenido
• Galería: Crea bonitas galerías de imágenes
• Audio: Inserta archivos de audio en tu contenido
• Portada: Añade bloques de contenido sobre un fondo visual
• Archivo: Enlaza a archivos descargables
• Medios y texto: Coloca contenido multimedia junto a un bloque de texto
• Vídeo: Inserta un vídeo en tu contenido

Bloques de diseño:

• Botones: Añade una o varias llamadas a la acción en forma de botón
• Columnas: Crea columnas visuales e inserta bloques dentro de cada una
• Grupo: Agrupa bloques y personalízalos como prefieras
• Fila: Organiza los bloques uno al lado del otro
• Apilado: Organiza los bloques unos encima de otros
• Más: Muestra un enlace «Leer más» en las páginas de archivo
• Salto de página: Añade paginación a las páginas o entradas
• Separador: Añade una línea entre dos bloques para separarlos visualmente
• Espaciador: Incluye espacio en blanco entre los bloques

Bloques de widgets:

• Archivos: Muestra un archivo de tus entradas organizado por fecha
• Calendario: Muestra tus entradas en formato de calendario
• Categorías: Enumera las entradas por categoría
• HTML personalizado: Inserta código HTML en tu página o entrada
• Últimos comentarios: Muestra los comentarios más recientes de tus lectores
• Últimas entradas: Muestra las entradas más recientes de tu blog
• Lista de páginas: Enumera todas tus páginas publicadas
• RSS: Muestra contenido del feed RSS de cualquier sitio en el tuyo
• Buscar: Añade una función de búsqueda en cualquier parte de tu sitio
• Shortcode: Añade shortcodes de WordPress a tu contenido
• Iconos sociales: Enlaza a tus perfiles en redes sociales
• Nube de etiquetas: Añade una nube de etiquetas a tu sitio

Bloques del tema:

• Navegación: Edita el menú de navegación de tu sitio
• Logotipo del sitio: Añade tu logotipo a tu sitio
• Título del sitio: Muestra el nombre de tu sitio
• Descripción corta del sitio: Muestra la descripción corta de tu sitio
• Bucle de consulta: Muestra entradas según parámetros específicos
• Lista de entradas: Muestra entradas mediante patrones integrados
• Avatar: Incluye el avatar de un usuario
• Enlace de navegación de entradas: Muestra enlaces a las entradas anterior y siguiente
• Comentarios: Muestra la sección de comentarios de la entrada
• Formulario de comentarios de la entrada: Muestra el formulario de comentarios
• Acceder/salir: Permite que los usuarios hagan clic para acceder o salir
• Descripción del término: Muestra la descripción de una taxonomía en su página de archivo
• Título del archivo: Muestra el nombre de la taxonomía en su página de archivo
• Título de los resultados de búsqueda: Muestra un título sobre los resultados de búsqueda
• Parte de plantilla: Añade partes de plantilla a tus páginas y entradas

El editor de bloques de WordPress también incluye decenas de bloques de incrustación que te permiten incrustar fácilmente feeds de redes sociales, vídeos, podcasts, música y mucho más de plataformas de terceros. Consulta la lista completa, junto con más información sobre todos los bloques predeterminados, en la documentación de WordPress.

Preguntas frecuentes

¿Todavía tienes preguntas? Respondamos a algunas de las más habituales.

¿El editor de bloques es gratuito en WordPress?

¡Sí! Como el editor de bloques se incluye de forma predeterminada en las instalaciones de WordPress y el propio WordPress es gratuito, el editor de bloques también es completamente gratuito.

¿WordPress incluye el editor de bloques de forma predeterminada?

Sí, todas las instalaciones de WordPress incluyen automáticamente el editor de bloques.

¿El editor de productos de WooCommerce utiliza el editor de bloques?

Actualmente, el editor de productos de WooCommerce no utiliza el editor de bloques. Sin embargo, WooCommerce sí incluye un conjunto de bloques que puedes usar en tus entradas, páginas y otros contenidos. También puedes usar el Editor del sitio para personalizar la plantilla de producto de WooCommerce, las páginas de archivo, los resultados de búsqueda y mucho más.

¿Tiene el editor de bloques un editor de HTML?

Sí, el editor de bloques tiene un editor de HTML. Para acceder a él, solo tienes que abrir la página o entrada que estés editando y hacer clic en los tres puntos verticales de la esquina superior derecha. Después, selecciona Editor de código. Ahora verás el contenido de la página como código HTML y podrás editarlo según sea necesario.

¿Qué diferencias hay entre el editor de bloques y el editor clásico TinyMCE?

Antes del lanzamiento del editor de bloques, WordPress utilizaba un editor TinyMCE, también conocido como Editor clásico. Sin embargo, el editor de bloques se creó y diseñó para ser más potente y fácil de usar que la solución anterior.

Es un editor mucho más visual que TinyMCE, lo que permite tanto a principiantes como a desarrolladores crear páginas y entradas complejas y atractivas. También permite diseñar y personalizar elementos como cabeceras, pies de página y plantillas sin necesidad de escribir código.

¿Qué diferencias hay entre el editor de bloques de WordPress y los maquetadores de páginas?

Usar el editor de bloques en lugar de un maquetador de páginas de WordPress ofrece muchas ventajas. Para empezar, el editor de bloques es completamente gratuito y se incluye de forma predeterminada con WordPress. Esto significa que no tendrás que instalar plugins adicionales para usarlo ni preocuparte por problemas de compatibilidad con el núcleo de WordPress o con plugins importantes.

Algunos maquetadores de páginas están vinculados a temas específicos, por lo que, si decides cambiar de tema, tendrás que reconstruir gran parte o incluso todo tu contenido. Esto no ocurre con el editor de bloques. Siempre que utilices un tema compatible con el editor de bloques, tu contenido permanecerá prácticamente igual si cambias de tema.

Hay muchos plugins y otras herramientas que amplían las funciones del editor de bloques, ya que es una función integrada de WordPress. Tenerlos al alcance de la mano te permite crear algo realmente único.

Por último, una página creada con el editor de bloques debería cargar más rápido que una creada con un maquetador de páginas. El código que genera es más ligero y limpio, y no necesita plugins que ocupen espacio en tu servidor y base de datos. Puedes consultar más información en la sección Ventajas y desventajas de este artículo.

¿Puede el editor de bloques de WordPress ralentizar mi sitio web?

No, el editor de bloques suele ser muy rápido y no debería ralentizar tu sitio web. Está integrado en el núcleo de WordPress, por lo que está muy optimizado. El código que genera es limpio y eficiente.

Los problemas de velocidad suelen deberse a otros factores. Entre ellos pueden encontrarse bloques de terceros mal programados, archivos de imagen grandes o un hosting lento. Para mantener tu sitio rápido, utiliza bloques bien programados y optimiza tus imágenes antes de subirlas. Un sitio web rápido es importante para que los visitantes estén satisfechos y para mejorar la posición en los buscadores.

¿Perderé mi contenido si cambio del Editor clásico al editor de bloques?

No perderás tu contenido cuando cambies al editor de bloques. WordPress convierte automáticamente tus entradas antiguas en un bloque «Clásico». Esto significa que el texto y las imágenes que ya tienes se verán igual en la parte visible de tu sitio.

Después puedes dejar el contenido en el bloque Clásico o convertirlo en bloques individuales para tener más control. Es buena idea convertir tus páginas más importantes en bloques individuales. Así podrás actualizar el diseño y la distribución mediante las funciones modernas de los bloques.

¿Cómo soluciono problemas habituales del editor de bloques, como que los bloques no se carguen?

Si el editor de bloques no funciona correctamente, a menudo se debe a un conflicto entre plugins. El primer paso es borrar la caché de tu sitio web y del navegador.

Si el problema continúa, deberías desactivar temporalmente todos tus plugins. Después, vuelve a activarlos uno a uno hasta que el editor vuelva a fallar. Esto te ayudará a encontrar el plugin que provoca el conflicto. Otra causa habitual es una versión obsoleta de WordPress o de tu tema. Asegúrate siempre de que tu sitio esté completamente actualizado para evitar estos problemas.

¿Es el editor de bloques un buen sustituto de plugins de maquetación de páginas como Elementor o Divi?

El editor de bloques es una alternativa sólida a muchos plugins de creación de páginas, especialmente para sitios web nuevos. Está integrado en WordPress, lo que significa que es rápido, seguro y siempre será compatible.

Los maquetadores de páginas pueden añadir código adicional que ralentiza tu sitio y provocar un efecto de dependencia que dificulte cambiar de tema más adelante. Para la mayoría de los usuarios, el editor de bloques, combinado con un buen tema de bloques, proporciona todas las herramientas necesarias para crear un sitio web profesional sin el peso adicional de un maquetador de páginas.

¿Puedo seguir usando mis widgets favoritos con el editor de bloques?

Sí, puedes seguir usando tus widgets, pero funcionan de forma diferente en los temas modernos. Con un tema de bloques y la Edición completa del sitio, ya no hay áreas de widgets tradicionales. En su lugar, puedes colocar cualquier bloque donde quieras en la cabecera, el pie de página o la barra lateral.

Esto incluye un bloque especial de «Widget heredado» que te permite insertar cualquiera de tus widgets antiguos. Este enfoque es más flexible porque no te limita a zonas específicas para widgets. Puedes aprovechar la potencia de los bloques en cualquier parte de tu sitio.

¿Qué es theme.json y por qué es importante para el editor de bloques?

El archivo theme.json es un archivo de configuración central para los temas de bloques. Permite a los desarrolladores de temas y a los usuarios avanzados controlar desde un solo lugar la configuración de todo el sitio web.

Con este archivo, puedes definir la paleta de colores de tu sitio web, los tamaños de fuente, el espaciado y los estilos predeterminados de los bloques. Esto garantiza un diseño coherente en todas las páginas. Si eres un usuario habitual, no necesitas editar este archivo directamente. Sin embargo, es la tecnología que hace posibles las opciones de estilo global que ves en el Editor del sitio, por lo que es una parte muy importante del diseño moderno de WordPress.