1.2El editor Gutenberg & los bloques
Lo esencial en 30 segundos
- Gutenberg funciona por bloques: cada título, párrafo, imagen, botón o columna es un bloque autónomo que se desplaza y se configura.
- Se inserta un bloque con el botón + o escribiendo / seguido del nombre (/imagen, /columnas), el atajo de los habituados.
- Los patrones (patterns) insertan maquetas listas; los bloques reutilizables se modifican en un lugar y se actualizan en todas partes.
Minicaso hilado — Samir compone la página Colecciones
Samir debe construir la página «Colecciones» del Atelier Bahja: un banner, tres tarjetas de gamas una al lado de otra y un recuadro de contacto repetido en varias páginas. Descubre que Gutenberg permite hacerlo todo sin código, pero quiere ir rápido y mantener la coherencia. Esta sección le muestra los bloques, las columnas, los patrones y el bloque reutilizable que evitará recrear el recuadro en cada página.
Continuación del caso 1.1 — el plan de contenidos está listo; pasamos a la composición.
1. Bloques y columnas
En Gutenberg, todo es bloque: un título, un párrafo, una imagen, un botón, una galería, columnas. Cada bloque se selecciona, se desplaza mediante arrastrar y soltar y tiene sus propios ajustes en la barra lateral. Así se compone una página como se apilan ladrillos, sin escribir código. El atajo más útil: escribir / en el contenido abre el insertador y permite invocar un bloque por su nombre (/imagen, /botón, /columnas).
Para las tres gamas de Hassan, Samir inserta un bloque Columnas de tres columnas y coloca en cada una una imagen, un título y un párrafo. En el móvil, las columnas se apilan automáticamente: la página sigue siendo legible sin ajustes adicionales.
2. Patrones y bloques reutilizables
Los patrones (patterns) son maquetas listas para usar — banner, cuadrícula de tarifas, testimonios — que se insertan con un clic y luego se personalizan. Ahorran mucho tiempo en las secciones complejas y garantizan un resultado profesional.
Los bloques reutilizables (o sincronizados) van más lejos: un bloque diseñado una vez (por ejemplo, el recuadro «Contactar») puede reutilizarse en varias páginas. Modificarlo en un solo lugar actualiza todas las apariciones. Samir lo usa para los datos del taller, que deben seguir idénticos en todas partes.
🔎 Ejemplo concreto — Tres gamas una al lado de otra (caso Samir)
1. Bloque Columnas → 3 columnas.
2. En cada columna: imagen + título de gama + párrafo.
3. Botón + → Patrones → insertar un banner «Nuestros compromisos».
4. Recuadro de contacto → «Crear un bloque reutilizable».
→ Reutilizar el recuadro en Colecciones, Sobre nosotros y Contacto.Resultado: una página estructurada en pocos minutos.
Lección: patrón para la maqueta, bloque reutilizable para el contenido repetido.
Vocabulario de la sección
- Gutenberg
- Editor de contenido de WordPress basado en bloques: la forma moderna de componer artículos y páginas.
Ejemplo sencillo: Samir construye la página Colecciones en Gutenberg.
Lo que no es: volver al editor clásico por costumbre.
Reflejo: bloques = Gutenberg.
- Bloque
- Unidad de contenido autónoma: párrafo, título, imagen, botón, columnas, galería.
Ejemplo sencillo: cada gama ocupa una columna con tres bloques.
Lo que no es: ponerlo todo en un único bloque párrafo.
Reflejo: un elemento = un bloque.
- Inserción (+ o /)
- Añadir un bloque con el botón + o escribiendo / seguido del nombre del bloque.
Ejemplo sencillo: escribir /columnas para insertar la cuadrícula.
Lo que no es: buscar cada bloque en un menú sin usar el atajo.
Reflejo: / + nombre = inserción rápida.
- Patrón (pattern)
- Maqueta lista para usar, insertada con un clic y luego personalizada.
Ejemplo sencillo: un banner «Nuestros compromisos» insertado y adaptado al taller.
Lo que no es: recrear a mano cada sección compleja.
Reflejo: sección ya hecha = patrón.
- Bloque reutilizable
- Bloque guardado y reutilizado en varias páginas, actualizado en todas partes desde un solo lugar.
Ejemplo sencillo: el recuadro de contacto idéntico en tres páginas.
Lo que no es: copiar y pegar el recuadro y olvidar corregir una de sus apariciones.
Reflejo: contenido repetido = bloque sincronizado.
En la práctica — Componer una página por bloques
- En una página, inserta un título, un párrafo, una imagen y un botón mediante + o /.
- Añade un bloque Columnas de dos columnas y desplaza allí los bloques.
- Inserta un patrón desde la pestaña Patrones y personaliza su texto y su imagen.
- Crea un bloque reutilizable «Contactar» e insértalo en una segunda página.
Guion listo para decir — mostrar la composición por bloques (30 s)
«Su página se construye como ladrillos: un título, una imagen, un botón. También puedo reutilizar un bloque de contacto en varias páginas: si cambia su número, lo modifico una sola vez y se actualiza en todas partes.»
Mostrar el bloque reutilizable en directo: es el argumento más convincente.
Modelo copiar-pegar — plan de página por bloques
SECCIÓN 1: banner (título + imagen + botón)
SECCIÓN 2: columnas → 3 gamas (imagen + título + texto)
SECCIÓN 3: patrón «compromisos» personalizado
BLOQUE REUTILIZABLE: recuadro de contacto
PÁGINAS DE USO DEL RECUADRO: _______________Página simple
Basta con apilar título, texto e imagen; no hacen falta columnas ni patrones.
Página rica
Columnas + patrones para una maqueta cuidada sin código.
Contenido repetido
Bloque reutilizable para los datos de contacto, horarios o llamadas a la acción.
Recuperación de un sitio antiguo
Los bloques clásicos siguen siendo editables; migrar progresivamente las secciones antiguas.
✓ Buenas prácticas
- Usar / para insertar un bloque con el teclado.
- Pasar por un patrón antes de reconstruir una sección compleja.
- Reservar los bloques reutilizables a los contenidos realmente repetidos.
✗ Errores frecuentes
- Amontonarlo todo en un único bloque párrafo.
- Copiar y pegar un recuadro en diez páginas.
- Recrear a mano un patrón existente.
Puntos clave
- Todo es bloque en Gutenberg.
- / + nombre inserta un bloque rápidamente.
- Los patrones ahorran tiempo en las secciones complejas.
- Un bloque reutilizable se actualiza en todas partes.
Reto 48h — aplícalo mañana
Reproduce una sección «tres servicios» con un bloque Columnas e inserta un patrón en una página. Crea después un bloque reutilizable de contacto y colócalo en dos páginas. 25 minutos.
- Compongo una página con bloques y columnas.
- Inserto un bloque con el teclado mediante /.
- Sé cuándo usar un patrón o un bloque reutilizable.
Preguntas frecuentes
¿Gutenberg o un constructor de páginas?
Gutenberg, nativo y gratuito, basta para la mayoría de los sitios y se mantiene ligero. Los constructores como Elementor ofrecen más libertad visual, a cambio de mayor peso y dependencia. Aprender los bloques es la base.
¿Se puede recuperar el antiguo editor clásico?
Sí, con la extensión Classic Editor, pero es una elección transitoria: Gutenberg es el futuro de WordPress y la base de la edición completa del sitio (FSE, sección 2.2). Conviene aprender los bloques.
¿Un bloque reutilizable está realmente sincronizado?
Un bloque reutilizable clásico está sincronizado: modificar su contenido en un lugar actualiza todas las apariciones. Para variantes independientes se usa más bien un patrón o una plantilla.
Samir quiere insertar rápidamente una sección «Nuestros compromisos» ya maquetada. ¿Qué gesto es el más eficaz en Gutenberg?