Cómo usar el Editor de Bloques de WordPress (Gutenberg): Guía básica

¡Hola! Si estás leyendo esto, es porque probablemente quieres aprender a manejar WordPress sin perder los nervios. Y déjame decirte que has llegado al lugar correcto. El editor de bloques WordPress, también conocido como Gutenberg, es la forma moderna de crear y editar contenido, y aunque al principio puede parecer un cambio brusco, en cuanto le coges el truco, no querrás volver atrás.

En esta guía de Gutenberg que he preparado para ti, vamos a desmontar, pieza por pieza, todo lo que necesitas saber. Olvídate de los textos planos y los botones confusos. Aquí aprenderás desde cómo añadir un párrafo hasta cómo maquetar una página completa como un profesional, paso a paso y sin tecnicismos raros. Vamos a ello.

¿Qué es exactamente el Editor de Bloques de WordPress?

Antes de empezar a tocar botones, es importante que entiendas la filosofía detrás de esta herramienta. El editor de bloques WordPress (Gutenberg) funciona, como su nombre indica, a base de bloques. Imagina que tu artículo es un muro de Lego. Cada pieza de ese muro es un bloque: un párrafo, una imagen, un vídeo, un botón, un título... Cada uno de estos elementos es independiente, pero todos juntos forman tu página.

Esta arquitectura te permite tener un control total sobre el diseño sin necesidad de saber programar. Ya no dependes de un único cuadro de texto gigante donde todo se mezclaba. Ahora, cada elemento tiene su propio espacio, sus propios ajustes y se puede mover, editar o eliminar por separado.

¿Por qué es tan importante aprender a usarlo?

Porque es el futuro (y el presente) de WordPress. Ya sea que quieras editar entradas WordPress para un blog personal o gestionar una tienda online, Gutenberg es el estándar. Aprender a usarlo no solo te hará la vida más fácil, sino que te permitirá crear diseños mucho más ricos y atractivos que antes requerían plugins de pago o código personalizado.

Tu primer viaje: La interfaz del editor

Cuando creas una nueva entrada o página, te encuentras con una pantalla blanca y un título arriba. Debajo, verás un área que dice "Escribe / para elegir un bloque". Ese es tu lienzo.

A la derecha (o en la parte superior en pantallas pequeñas), tienes la barra de herramientas principal con botones como "Añadir bloque", "Deshacer", "Rehacer" y el botón de "Publicar" o "Actualizar". No te asustes por la cantidad de opciones; iremos paso a paso.

El botón mágico: Añadir bloque

Este es tu mejor amigo. Lo encontrarás con un icono de un cuadrado con un símbolo de + dentro. Al hacer clic, se despliega un menú con todas las categorías de bloques disponibles: Texto, Medios, Diseño, Widgets, etc. Es como un cajón de sastre infinito, pero organizado.

[TIP]: No busques el bloque perfecto en el menú. La mayoría de las veces, el bloque de "Párrafo" es suficiente. Luego puedes transformarlo (te explico cómo más abajo) si necesitas que sea un encabezado o una lista.

Añadiendo y editando tus primeros bloques

Vamos a lo práctico. Para editar entradas WordPress con soltura, necesitas dominar estas acciones básicas.

Paso 1: Escribe un párrafo

Haz clic en el área "Escribe / para elegir un bloque" y simplemente empieza a teclear. Verás que automáticamente se crea un bloque de párrafo. Al hacer clic sobre él, aparecerá una pequeña barra de herramientas flotante encima del texto. Ahí tienes opciones para poner el texto en negrita, cursiva, crear enlaces, cambiar la alineación (izquierda, centro, derecha) y más.

Paso 2: Añade un título (Encabezado)

Los títulos son cruciales para la estructura de tu contenido y para el SEO. Para añadir uno, haz clic en el botón "+" y busca el bloque "Encabezado". Verás que puedes elegir entre H2, H3, H4, etc. El H2 es el más común para subtítulos dentro de un artículo. Elige el que necesites y escribe.

Paso 3: Inserta una imagen

Un artículo solo con texto es aburrido. Haz clic en "+" y busca el bloque "Imagen". Puedes subir un archivo desde tu ordenador, elegir uno de la biblioteca de medios de WordPress o incluso insertar una URL directamente si la imagen está alojada en otro sitio.

[INFO]: Al seleccionar la imagen, tendrás opciones en el panel derecho para cambiar su tamaño, añadir texto alternativo (muy importante para el SEO) y elegir la alineación.

La clave del control: Mover y reorganizar bloques

Esta es la parte más divertida y la que hace que Gutenberg sea tan potente. Digamos que has escrito un párrafo, luego has puesto una imagen y después otro párrafo, pero te das cuenta de que la imagen quedaría mejor al principio. ¿Qué haces? ¿Borrar y volver a escribir? ¡No!

Cada bloque tiene una barra de herramientas que aparece al pasar el ratón por encima. En el lado izquierdo, verás un icono con seis puntos. Haz clic y mantén presionado mientras arrastras el bloque hacia arriba o hacia abajo. Verás una línea azul que te indica dónde se soltará el bloque. Suéltalo y listo, has movido el elemento.

La herramienta de transformación

Otra funcionalidad brillante es la de transformar. Si tienes un párrafo y te das cuenta de que debería ser un subtítulo, no es necesario que lo borres. Haz clic en el bloque, ve a la barra de herramientas flotante y busca el icono que parece un cuadrado con un "+" dentro (a veces es un icono de "cambiar"). Se llama "Transformar a". Ahí puedes elegir entre "Encabezado", "Lista", "Cita" o incluso "Tabla". Es como magia.

Más allá de lo básico: Bloques que te harán la vida más fácil

Ahora que ya sabes lo esencial, vamos a ver algunos bloques que son súper útiles para darle un toque profesional a tus páginas.

El bloque de Botón

¿Quieres que tus lectores hagan clic en un enlace? En lugar de poner un texto en azul, crea un botón llamativo. Busca el bloque "Botón" en el menú. Escribe el texto del botón (por ejemplo, "Descargar Guía") y en el panel de la derecha, pega la URL a la que debe llevar. Puedes cambiar los colores, el tamaño y la forma del botón.

El bloque de Columnas

Este bloque es perfecto para maquetar contenido en varias columnas, como hacer una tabla de precios o comparar dos productos. Busca "Columnas" y elige el número de columnas que necesites (2, 3, 4...). Dentro de cada columna, puedes añadir cualquier otro bloque (texto, imagen, botón). Es la base de los diseños modernos.

El bloque de Lista

Aunque puedas escribir listas manualmente, el bloque "Lista" es mucho más limpio. Te permite elegir entre viñetas (con puntos) o listas numeradas. Es ideal para instrucciones o para enumerar características.

[WARNING]: Ten cuidado con el bloque "Código". Si no sabes HTML o CSS, es fácil que rompas el diseño de tu página. Es mejor que lo dejes para usuarios más avanzados.

El panel de ajustes: Tu centro de control

Cuando tienes seleccionado un bloque, en el lado derecho de la pantalla (si tu pantalla es ancha) o en un menú desplegable (en móviles), aparece un panel con pestañas. Normalmente verás dos pestañas principales: "Bloque" y "Entrada" o "Página".

Pestaña Bloque

Aquí están los ajustes específicos del bloque que tienes seleccionado. Por ejemplo, si es un párrafo, podrás cambiar el tamaño de la fuente, el color del texto y el color de fondo. Si es una imagen, podrás ajustar su tamaño, añadir bordes redondeados o aplicar un filtro. Es aquí donde se le saca el jugo al diseño.

Pestaña Entrada o Página

Esta pestaña es para los ajustes generales de todo el contenido. Aquí puedes cambiar la imagen destacada (la miniatura que aparece en el blog), editar el extracto (el resumen que se muestra en las listas), seleccionar una categoría o etiquetas, y configurar opciones de visibilidad (público, privado, protegido con contraseña).

Trabajando con bloques reutilizables

Esta es una función avanzada que te ahorrará muchísimo tiempo. Imagina que tienes un bloque de texto con tu firma o una llamada a la acción que usas en todas tus entradas. En lugar de escribirlo cada vez, puedes convertirlo en un "Bloque reutilizable".

Para ello, selecciona el bloque, haz clic en los tres puntos (menú de opciones) de su barra de herramientas y elige "Agregar a bloques reutilizables". Dale un nombre y guárdalo. La próxima vez que quieras usarlo, búscalo en el menú de bloques dentro de la pestaña "Reutilizables". Si lo editas en un sitio, se actualizará en todos los demás donde esté insertado. ¡Una maravilla!

Atajos de teclado para ser más rápido

Si quieres parecer un ninja de WordPress, memoriza estos atajos:

• /: Escribe esta barra en un bloque vacío para abrir el menú de búsqueda de bloques rápidamente. Por ejemplo, escribe /imagen y te lo sugerirá.
• Ctrl + Z / Cmd + Z: Deshacer (tu salvavidas).
• Ctrl + Shift + Z / Cmd + Shift + Z: Rehacer.
• Ctrl + K / Cmd + K: Insertar un enlace en el texto seleccionado.

Cómo guardar y publicar tu trabajo

Tranquilo, no vas a perder nada. En la barra superior tienes dos botones clave: "Guardar borrador" y "Publicar".

• Guardar borrador: Guarda los cambios sin que nadie más los vea. Puedes irte y volver más tarde.
• Publicar: Hace que tu contenido sea visible para todo el mundo. Si ya está publicado y haces cambios, el botón cambiará a "Actualizar". Es importante que hagas clic en "Actualizar" para que los cambios se vean en tu web.

[TIP]: Configura WordPress para que guarde automáticamente tus borradores mientras escribes. Ve a "Ajustes" > "Escritura" y activa la opción de "Guardado automático". Así, si se te va la luz, no pierdes el trabajo.

Solución de problemas comunes

A veces las cosas no salen a la primera. Aquí tienes algunas soluciones rápidas:

• "No puedo arrastrar el bloque": Asegúrate de hacer clic y mantener presionado el icono de los seis puntos en el lateral del bloque, no en cualquier parte del contenido.
• "El bloque se ve raro en el móvil": Usa el bloque de Columnas con moderación. Demasiadas columnas pueden hacer que el texto sea ilegible en pantallas pequeñas. Revisa siempre la vista previa en móvil (el icono de la pantalla con un móvil en la barra superior).
• "He roto el diseño": No entres en pánico. Usa Ctrl + Z varias veces para deshacer los cambios hasta que vuelva a la normalidad. Si no funciona, cierra el editor sin guardar y vuelve a abrirlo; se cargará la última versión guardada.

Conclusión: Gutenberg es tu aliado, no tu enemigo

Espero que esta guía de Gutenberg te haya dado la confianza que necesitabas para lanzarte a editar entradas WordPress con el editor de bloques WordPress. Al principio, es normal sentirse un poco perdido, pero la práctica hace al maestro. Empieza creando una entrada de prueba y juega con todos los bloques que te he mencionado. No tengas miedo a equivocarte; siempre puedes deshacer.

Recuerda que la clave está en la simplicidad: un párrafo, una imagen, un encabezado. Con esos tres elementos, ya puedes crear contenido bonito y funcional. Con el tiempo, irás descubriendo bloques más complejos que te permitirán expresar tu creatividad al máximo.

[INFO]: Si tu web está alojada en un panel de control con el nombre "Syspanel", no te preocupes, el acceso al administrador de WordPress es el mismo que siempre: normalmente tudominio.com/wp-admin. El puerto de acceso a ese panel de control suele ser el 2106, pero eso solo lo necesitas para tareas de gestión del servidor, no para editar tus artículos.

Ahora, ve y crea algo increíble. Tu público te está esperando. ¡Buena suerte!