El editor de bloques

Módulo 4: Crear contenido · Tiempo de lectura: 8 minutos

Objetivo de aprendizaje: Después de esta lección podrá construir una página con bloques y patrones, y sabrá cómo funcionan los borradores, la programación y las revisiones.

Conceptos clave: bloque, configuración de bloque, barra de herramientas, vista de lista, grupo, columnas, patrón, patrón sincronizado, borrador, privada, programar, revisiones, vista previa

Todo es un bloque

Desde WordPress 5.0 (finales de 2018) crea contenido en el editor de bloques (también llamado Gutenberg, por el nombre del proyecto). Una página se compone de bloques independientes: un encabezado, un párrafo, una imagen, un botón, una lista, una tabla, un vídeo incrustado. Cada bloque tiene su propia configuración. Puede colocar los bloques uno debajo de otro, uno al lado del otro (en columnas) o uno dentro de otro (en un grupo).

¿Por qué bloques? En el editor antiguo, una página era un único cuadro de texto grande. Si quería dos columnas o un botón, necesitaba un creador de páginas, shortcodes o HTML. Con los bloques eso se puede hacer dentro del propio WordPress, y el resultado es un HTML limpio que el tema da formato.

Entre bastidores, WordPress guarda los bloques como HTML con marcas de comentario delante y detrás:

<!-- wp:heading -->
<h2 class="wp-block-heading">Horario de apertura</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Permanecemos abiertos de martes a sábado.</p>
<!-- /wp:paragraph -->

Es útil saberlo: el contenido sigue siendo HTML legible, incluso si más adelante cambia de tema o un bloque deja de existir. Puede verlo si en un bloque elige «Editar como HTML», o en el editor de código (Ctrl+Shift+Alt+M).

El editor en tres partes

1. El lienzo en el centro: su página tal y como aparecerá aproximadamente.
2. La barra de herramientas sobre un bloque seleccionado: negrita, cursiva, enlace, alineación, y la opción de convertir el bloque en otro tipo (un párrafo se convierte en una lista, una imagen se convierte en una galería).
3. La barra lateral a la derecha con dos pestañas: Página (o Entrada) con la configuración de toda la página, y Bloque con la configuración del bloque seleccionado, como el color, el espaciado y el tamaño de letra.

Dos herramientas que facilitan mucho el trabajo:

• Vista de lista (el icono con tres rayas arriba a la izquierda): la estructura de su página en forma de árbol. Con ella selecciona exactamente el bloque que quiere, incluso si está dentro de un grupo dentro de una columna.
• Comandos de barra inclinada: escriba en una línea vacía / y el nombre de un bloque (/encabezado, /botón, /imagen) y pulse Entrar.

Construir con grupos y columnas

Una buena página tiene una estructura clara. Para ello utiliza tres elementos básicos:

• Grupo: un marco alrededor de varios bloques, con su propio fondo o espaciado. Por ejemplo, un bloque de color con un encabezado, una frase y un botón.
• Columnas: bloques uno al lado del otro. En un teléfono aparecen uno debajo de otro.
• Fila y Pila: variantes de un grupo que organizan los bloques en horizontal o en vertical.

Utilice los encabezados correctamente: un único H1 (el título de la página, que normalmente genera el propio tema), debajo H2 para los capítulos y H3 para los apartados dentro de ellos. No elija un encabezado por el tamaño de letra; eso se ajusta en la configuración del bloque. Los lectores de pantalla y los buscadores utilizan los encabezados para entender la página (lección 9.2).

Patrones: no empiece cada vez de cero

Un patrón es un grupo de bloques ya preparado: un encabezado con texto e imagen, una tabla de precios, tres columnas con iconos. Se insertan mediante el botón de inserción (el símbolo más), pestaña Patrones. Su tema suele incluir varios, y en la biblioteca de patrones de wordpress.org hay cientos.

También puede crear sus propios patrones: seleccione varios bloques, elija en la barra de herramientas los tres puntos y Crear patrón. Al hacerlo, elige si el patrón está sincronizado:

• No sincronizado: cada vez que lo inserta, obtiene una copia independiente. Si la modifica, solo cambia esa copia. Útil como plantilla.
• Sincronizado: en todos los sitios donde esté, es idéntico. Si lo modifica en un lugar, cambia en todas partes. Útil para un bloque «Contacto y horario de apertura» que aparece en diez páginas. (Antes se llamaban «bloques reutilizables».)

Un error habitual: un patrón sincronizado que modifica «solo un poco» en una página también cambia en todas las demás páginas. Si quiere algo distinto en un solo lugar, convierta esa copia en un grupo normal (desvincular).

Guardar, publicar y programar

Una página tiene un estado:

Utilice Vista previa para ver la página tal y como la verá un visitante, también en móvil y tableta, antes de publicarla.

Revisiones: volver atrás en el tiempo

Cada vez que guarda, WordPress conserva una revisión: la versión de ese momento. En la barra lateral de la página verá cuántas revisiones hay. Haga clic y verá, con un deslizador, las diferencias entre dos versiones y podrá restaurar una versión anterior.

Las revisiones son su primera red de seguridad ante un error («he borrado por accidente media página»). Eso sí, todas se guardan en la base de datos. Un sitio con miles de revisiones ocupa más espacio y a veces va más lento. Puede limitar la cantidad en wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

La lección 6.3 trata sobre cómo eliminar revisiones antiguas.

Dónde termina el editor

El editor de bloques crea el contenido de una página. Lo que rodea al contenido (la cabecera del sitio, el menú, el pie de página) pertenece al tema. En un tema de bloques se edita en el Editor del sitio (Apariencia > Editor) con los mismos bloques; en un tema clásico, en el Personalizador y en Widgets (lección 5.1). Si utiliza un creador de páginas como Elementor o Divi, trabajará en ese programa en lugar de en el editor de bloques; sus desventajas se tratan en la lección 5.1.

Resumen

• Una página está formada por bloques que coloca debajo, al lado y dentro unos de otros; WordPress los guarda como HTML con marcas de comentario.
• La vista de lista y los comandos de barra inclinada hacen que construir sea rápido y preciso.
• Utilice los encabezados para la estructura (H2, H3), no para el tamaño de letra.
• Los patrones ahorran trabajo; un patrón sincronizado cambia en todas partes a la vez.
• Borrador, programada, privada y revisiones le dan control sobre qué es visible y cuándo, y una vía para retroceder.

Cuestionario

Ejercicio

Ejercicio D4.1: Construya una página con bloques. Cree una página en borrador «Sobre nosotros» con: un H2 y un H3, al menos dos párrafos, una imagen con texto alternativo, un bloque de columnas con dos columnas, un botón con un enlace, y un patrón de la biblioteca. Convierta un grupo en su propio patrón sincronizado e insértelo en una segunda página en borrador. Después modifíquelo en un solo lugar y compruebe qué ocurre en la otra página. Por último, restaure una revisión anterior. Marque cada paso y describa en dos frases cuándo usaría un patrón sincronizado y cuándo no.

Para saber más

Para trabajar dentro del propio WordPress todavía no tenemos artículos propios; la documentación oficial de WordPress es muy completa.

• El editor de bloques (wordpress.org, en inglés): https://wordpress.org/documentation/article/wordpress-block-editor/
• Patrones (wordpress.org, en inglés): https://wordpress.org/documentation/article/block-pattern/
• Revisiones (wordpress.org, en inglés): https://wordpress.org/documentation/article/revisions/