Resumen
Un tutorial de conceptos básicos de edición de contenido con el editor por defecto de WordPress – Gutenberg.
Gutenberg puede ser un poco intimidante al principio, sobre todo porque empieza con la pantalla casi en blanco, pero al final, creo que los desarrolladores hicieron un buen trabajo. Y tienes que entenderlo, no hay un editor perfecto, es extremadamente difícil crear un sistema que te permita crear sitios web de una manera fácil y comprensible, y al mismo tiempo, te ofrezca todas las posibilidades que puedas llegar a necesitar.
Vídeo en inglés
(dispone de subtítulos en español generados automáticamente)
La interfaz de usuario: todos los botones
Si estás empezando con Gutenberg, lo primero con lo que deseas familiarizarte, es la interfaz de usuario. Recomiendo hacer clic en todo y ver lo que hace. Principalmente, los botones de la esquina superior izquierda – Añadir bloques, Vista general del documento, deshacer y rehacer. Haz lo mismo con los botones de la derecha, especialmente el panel lateral derecho (Configuración), que te da control sobre todo el documento y de los bloques específicos que estás editando en ese momento.
Especialmente la vista general del documento es extremadamente importante, y es probablemente la parte más importante de todo el sistema. Sin ella, la edición es realmente difícil, incluso diría que molesta, así que, definitivamente, comprueba este mágico botón.
Los bloques
Los bloques son la parte principal de Gutenberg, necesitas entender cómo usarlos, cómo editarlos y entender su estructura. El sistema es jerárquico, lo que significa que puede haber bloques dentro de otros bloques. Eso es especialmente importante, si quieres usar columnas, por ejemplo. Creo que la mejor manera de aprender es probar y equivocarse, poner algunos bloques en el contenido y ver qué posibilidades hay y qué se puede hacer con ellos.
Los bloques de diseño
Yo diría que estos son los bloques más importantes con los que hay que familiarizarse. Te permiten estructurar tu contenido, colocar texto, imágenes o cualquier cosa en diferentes partes de la pantalla. Especialmente las columnas son realmente esenciales, por lo que entender cómo usarlas, es absolutamente necesario. También puedes utilizarlas para hacer que tu contenido sea más estrecho que el resto de tu sitio web, para cumplir con la regla de los 80 caracteres. Post sobre ancho de página.
Parte de los bloques de diseño es también el espaciador, que te permite añadir espacio en blanco, parte esencial de un buen diseño, por favor, lee más sobre esto en el Post sobre espacio en blanco.
Copias de seguridad y revisiones
Saber cómo volver a una versión guardada puede ahorrarte muchos dolores de cabeza. En el panel lateral derecho de la configuración, está el botón mágico «Revisiones». Esto te permite volver a versiones guardadas de tu contenido. También puedes hacer una copia de seguridad manual de tu contenido, entrando en el editor de código y copiando y pegando el código desde allí. Esto también puede ser muy útil si quieres copiar y pegar tu contenido en una página o entrada diferente.
Transcripción del vídeo
Hola! Hoy me gustaría hablaros del sistema de bloques Gutenberg en WordPress.
Este vídeo está dividido en cuatro partes:
- La interfaz de usuario: todos los botones del sistema y su función.
- Cómo funcionan los bloques.
- Una inmersión más profunda en los bloques más importantes.
- Qué hacer si algo va mal, o cómo hacer copias de seguridad de tus contenidos.
Debo decir que el sistema de bloques tiene un poco de reputación de amor-odio, lo cual comprendo. Desde el punto de vista de un desarrollador, es mucho más difícil crear bloques que con otros sistemas. Y si estás empezando, puede parecer un poco vacío o intimidante. Este tipo de constructores siempre se enfrentan a una disyuntiva entre capacidad y complejidad.
Se llama sistema de bloques por una razón: todo gira en torno a los bloques.
Empezando por arriba a la izquierda:
- El favicon te permite volver al panel de control de WordPress.
- El botón «Más» abre la biblioteca de bloques. Estos bloques pueden provenir del propio WordPress, de plugins o incluso de tu tema, por lo que los bloques disponibles pueden variar para cada usuario.
- Los patrones son grupos de bloques prefabricados, útiles para empezar rápidamente.
- Los botones Deshacer/Rehacer te ayudan a retroceder o avanzar en tus ediciones.
- Luego está la vista general del documento -en mi opinión, la parte más esencial del editor. Esto debería ser más visible, porque usar Gutenberg sin ella es mucho más difícil. Aquí, puedes ver una lista estructurada de todos los bloques de la página y moverlos fácilmente. También tienes opciones como duplicar, borrar o copiar bloques.
A la derecha, hay otro botón que abre el panel de configuración. Este panel tiene dos secciones:
- Ajustes de página/post – incluyendo estado, URL, autor, plantilla, categorías, etiquetas e imagen destacada. Estas opciones varían en función del tipo de entrada (entrada de blog, página, etc.).
- Ajustes específicos del bloque, que cambian en función del bloque que esté editando.
En el centro está el editor propiamente dicho. Comienza con el título. El editor intenta mostrar cómo se verá la página en tu sitio, pero no es 100% exacto. Yo suelo mantener una vista previa de la página en vivo abierta en otra pestaña del navegador para comparar.
Para este ejemplo, he utilizado una página «Acerca de» de una de las demos de Minimalio sobre una persona ficticia llamada Samuel.
Cada bloque forma parte de una jerarquía: los bloques pueden contener otros bloques. Por ejemplo, si deseas dos columnas con una imagen a la derecha y texto a la izquierda, empieza insertando un bloque Columnas. Así obtendrás dos columnas iguales por defecto (50/50). También puedes elegir otras proporciones, como 33/66, y se establecerán los anchos en consecuencia.
Puedes hacer clic en los pequeños iconos más dentro de las columnas para añadir bloques como Título, Párrafo, Botones o Imagen. También puedes ajustar la alineación vertical, que te permite centrar el contenido dentro de la columna verticalmente.
Además de Columnas, existen otros bloques de tipo contenedor como Grupo, Fila o Cuadrícula. No contienen reglas de diseño por defecto, pero son muy flexibles. Lo mejor es experimentar con ellos para ver qué se ajusta a tus necesidades.
Cada bloque tiene ajustes en dos lugares:
- Barra de herramientas en línea encima del bloque (por ejemplo, alineación, enlace, negrita, etc.)
- El panel derecho (por ejemplo, color del texto, fondo, espaciado, clases personalizadas).
Por ejemplo, en un bloque Encabezado, puedes cambiar el nivel del encabezado (H1, H2, etc.), desplazarlo, enlazarlo o ajustar el estilo y el diseño a través de la barra lateral.
Hablemos ahora de la edición de texto. Un consejo: pulsar Intro crea un nuevo bloque de párrafo, mientras que Mayús+Intro sólo añade una nueva línea dentro del mismo bloque. Si quieres convertir el texto en un título o en otra cosa, sólo tienes que cambiar el tipo de bloque con la barra de herramientas.
Si cometes un error, no te preocupes. Hay dos opciones principales de recuperación:
- Revisiones – WordPress guarda automáticamente las versiones anteriores. En la configuración de la página o entrada, encontrarás un enlace «Revisiones». Abre un deslizador donde puedes restaurar versiones anteriores.
- Editor de código – Puedes cambiar a la vista de código, copiar todo el contenido y guardarlo en algún lugar como copia de seguridad. Esto también es útil si quieres duplicar una página. Sólo tienes que copiar el código en una nueva página y volver al editor visual para ajustar el contenido.
Eso es todo. Como he dicho, la mejor manera de aprender es a través del ensayo y error. Y no te olvides de la vista general del documento: es la parte más importante de todo el editor.
De acuerdo, gracias y ¡buena suerte!
