El editor de WordPress va a ser la herramienta que te acompañe a lo largo de todo tu recorrido como creador de contenidos.
Si ya has elegido el tema que te gusta y lo has instalado, quizá ha llegado el momento de empezar a crear páginas o entradas en tu blog. Con el editor de bloques Gutenberg lo podrás hacer de forma visual muy fácilmente.
Hoy vamos a presentar este editor, descubrir qué son los bloques y ver cómo se utilizan para crear contenidos.
¿Qué es el editor Gutenberg?
La idea del editor de bloques Gutenberg se lleva fraguando desde hace ya varios años. Apareció como un plugin a mediados de 2017 y fue presentado como editor por defecto de WordPress en diciembre de 2018 con la versión 5.0.
Desde entonces en cada versión mayor de WordPress se incluye una nueva versión de Gutenberg, aunque el editor de bloques sigue su propia evolución. De hecho, si quieres probar sus últimas funcionalidades te puedes instalar el plugin de Gutenberg.
También puedes restaurar el antiguo editor instalando el plugin del editor clásico, aunque debes saber que dejará de tener soporte oficial a partir de 2022.
El nombre del nuevo editor proviene de Johannes Gutenberg, inventor de la imprenta con tipos móviles en el siglo XV, que revolucionó su época permitiendo la difusión del conocimiento a gran escala.
La apuesta de WordPress es también iniciar una revolución digital con este nuevo editor. El sistema de bloques pretende democratizar aun más el acceso a Internet haciendo que cualquier usuario pueda crear sus contenidos de forma totalmente visual.
Una revolución acompañada de polémica
La imposición de Gutenberg como editor por defecto provocó bastante polémica. La gente se quejó de falta de comunicación y de que el proyecto todavía no estaba maduro.
Es cierto que al principio dejaba bastante que desear pero, frente a la popularidad que estaban adquiriendo plataformas online como Wix o Squarespace, se consideró un cambio necesario que WordPress tenía que realizar.
Actualmente sigue siendo un proyecto en curso pero se han corregido y añadido muchas funcionalidades y se está convirtiendo en una herramienta cada día más interesante.
Por ejemplo varias comparativas han demostrado que Gutenberg genera webs más rápidas que Elementor, uno de los maquetadores más populares hoy en día.
Además al ritmo al que evoluciona Gutenberg es muy probable que en breve se convierta en una alternativa real a las plataformas online y a los maquetadores.
El concepto de bloque
Hemos mencionado varias veces el concepto de bloque pero ¿qué es un bloque? Veámoslo con más detalle.
El concepto de bloque no es nada nuevo. Los desarrolladores llevan años reutilizando fragmentos de código para mejorar su productividad.
El bloque no es más que eso: un fragmento de código que representa una unidad visual específica con la que se pueden diseñar páginas y entradas.
A continuación podemos ver el código HTML del bloque de un párrafo.
Aquí apreciamos los comentarios de inicio y final que utiliza WordPress para la identificación de sus bloques.
Básicamente lo que hace Gutenberg es permitir al usuario añadir estos fragmentos de código de forma visual. De esta manera la creación de contenidos resulta más cómoda como ocurre con los maquetadores.
Dicho esto, el concepto de bloque va más allá de la simple edición visual. Actualmente existe un repositorio donde los desarrolladores pueden ir subiendo los bloques que vayan creando.
Los bloques son plugins especiales que el usuario puede instalar directamente desde el editor para ampliar sus posibilidades creativas.
La oferta actual de bloques es un poco limitada pero todo apunta a que crecerá de forma significativa ya que en un futuro el diseño de todo el sitio web se realizará con bloques.
Efectivamente, el proyecto Gutenberg no se limita al editor y el concepto de bloque se va extender a toda la web (menús, pie de página, barras laterales, etc.).
Es lo que denominan Full Site Editing y este año vamos a oír hablar mucho de ello.
Presentación del editor de bloques
Estructura del editor
Pasemos ahora a presentar el editor con la descripción de su estructura.
Cuando desde la barra de herramientas o el menú principal del escritorio creamos una página o una entrada se abre el editor.
El editor está compuesto por:
- Barra de herramientas
- Área de contenidos
- Pie de página
A continuación vamos a ver para qué sirve cada una de estas secciones.
Barra de herramientas del editor
En la parte izquierda de la barra de herramientas podemos ver el logo de WordPress seguido de una serie de iconos.
Si hacemos clic en el logo, salimos del editor y volvemos a la página de administración del documento.
El icono Añadir un bloque (cuadrado con el signo más) abre la biblioteca de bloques en una barra lateral a la izquierda del área de contenidos.
Aquí podemos elegir los Bloques o los Patrones que deseamos utilizar.
Si pasamos el ratón por encima del icono de alguno de los Bloques, podemos ver una previsualización del mismo. A continuación vemos la previsualización del bloque Párrafo.
Si hacemos clic en el icono, añadimos el bloque al área de contenidos donde podremos editarlo.
También podemos añadir los bloques desde la propia área de contenidos como veremos más adelante.
Actualmente los bloques por defecto de WordPress se dividen en 5 categorías: texto, medios, diseño, widgets e incrustados.
Podemos buscar los bloques navegando por la biblioteca o introduciendo el nombre del bloque que queremos en la barra de búsqueda.
Si el bloque que buscamos no aparece en la biblioteca, el editor nos mostrará los resultados que encuentre en el repositorio de bloques.
Por ejemplo, aquí vemos que el editor no ha encontrado nada en la biblioteca con el término «infobox». Sin embargo ha encontrado un bloque con ese término en el repositorio de bloques.
Para instalarlo basta con hacer clic en el botón Añadir un bloque. De ese modo el icono del bloque se añade a la biblioteca y podremos utilizarlo como cualquier otro bloque.
Al instalar un bloque se añade su plugin al escritorio. Para desinstalar el bloque bastará con desinstalar dicho plugin.
Los Patrones son grupos de bloques prediseñados por WordPress o por el tema que tengamos instalado.
Aquí podemos ver algunos ejemplos de patrones del tema Twenty Twenty-One.
Los patrones vienen directamente representados por sus previsualizaciones. Si hacemos clic en una de ellas, los bloques de ese patrón se añadirán al área de contenidos donde los podremos editar.
El icono Modos (lápiz) abre un desplegable que permite cambiar entre el modo Editar (lápiz) y el modo Seleccionar (puntero).
El modo de edición es el que viene por defecto; con él podemos añadir bloques y editarlos. El modo de selección nos permite navegar entre los bloques y seleccionarlos con más comodidad.
Las flechas curvadas hacia la izquierda y hacia la derecha permiten deshacer o rehacer la última acción respectivamente.
El icono Detalles (círculo con la letra i) aporta información estadística sobre el documento y muestra su estructura.
Por último, el icono Contorno (tres barras escalonadas) muestra una Vista de lista con todos los bloques del documento. Esta lista podemos recorrerla y seleccionar el bloque que nos interese para acceder a él.
Si ahora nos centramos en la parte derecha de la barra de herramientas, podemos ver otra serie de botones e iconos.
Si redactamos algún contenido, aparecerá el botón Guardar como borrador que nos permite guardar un borrador del documento.
El botón Vista previa despliega un menú en el que podemos seleccionar el tipo de previsualización del documento en el área de contenidos (escritorio, tableta o móvil). También podemos visualizarlo en una pestaña nueva del navegador sin necesidad de publicarlo.
El botón Publicar abre una barra lateral con diferentes opciones.
Entre otras cosas nos permite seleccionar la visibilidad del documento (pública, privada o protegida con contraseña) y su fecha de publicación.
Una vez publicado, la barra de herramientas nos permite Cambiar a borrador nuestro documento o Actualizar los cambios realizados.
El icono siguiente es el de Ajustes (rueda dentada). Si hacemos clic en él, aparece una barra lateral a la derecha del área de contenidos.
Esta barra presenta dos pestañas donde podemos realizar ajustes a nivel de todo el documento (en este caso de una Entrada) o de un Bloque.
Por ejemplo podemos cambiar la visibilidad del documento, el enlace permanente, añadir categorías y etiquetas, un extracto, una imagen destacada o permitir los comentarios.
Si seleccionamos un Bloque en el área de contenidos, se abre la pestaña de la barra de ajustes correspondiente a ese bloque.
Cada bloque tiene su propio apartado de ajustes. Aquí podemos ver los ajustes de un bloque Párrafo que nos permite cambiar el tamaño de la tipografía, su color, el color del fondo, etc.
Por último, completamente a la derecha, vemos el discreto icono de las Opciones del editor (tres puntos en vertical). Si hacemos clic en él, se abre un menú desplegable.
Este menú permite cambiar la presentación del editor (pantalla completa, editor de código, etc.), gestionar bloques reutilizables, copiar todo el contenido o modificar las preferencias.
Por ejemplo, si te resulta extraño no ver el menú del escritorio, puedes desactivar el modo de Pantalla completa.
El menú de Opciones del editor también nos permite acceder a la página de ayuda del editor y visualizar los atajos del teclado, dos recursos muy interesantes para aprender y mejorar la productividad.
Área de contenidos del editor
Con las barras laterales cerradas y el modo de pantalla completa activado podemos trabajar muy cómodamente sobre los contenidos de nuestro documento.
En esta área lo primero que aparece es el título del documento. En este caso vemos el título «Artículo Gutenberg».
A continuación aparece la zona donde podemos ir añadiendo bloques o patrones para diseñar lo que queramos. Aquí vemos cómo se ha añadido un bloque Párrafo donde se ha introducido el texto «Esto es un párrafo tal y como se ve con el editor visual».
Por encima de nuestro bloque observamos su barra de herramientas correspondiente.
Si lo deseamos, la podemos fijar en la parte superior del editor. Basta con activar Barra de herramientas superior en el menú de Opciones del editor.
Cada bloque dispone de una barra de herramientas específica. En el caso de un párrafo la barra nos permite cambiar el tipo de bloque, desplazarlo, cambiar la alineación del texto, su formato, añadir enlaces, etc.
Al final de la barra volvemos a ver el icono tres puntos, pero esta vez asociado a las Opciones del bloque. Si hacemos clic en él, se despliega un menú.
Este menú nos permite copiar, duplicar o eliminar un bloque, insertar otros bloques, agruparlos, etc.
Si insertamos un bloque, aparece una línea vacía seguida del icono Añadir bloque (cuadrado con el signo más). Si hacemos clic en él, aparece una ventana con los últimos bloques utilizados.
Podemos añadir un bloque haciendo clic en su icono, buscar otro que nos interese a través de la barra de búsqueda o abrir la biblioteca de bloques haciendo clic en el botón Ver todos.
Otra posibilidad del menú que me parece interesante destacar es la de transformar un bloque o un grupo de ellos en un Bloque reutilizable a través de la opción Añadir a bloques reutilizables.
Como su nombre indica esta opción permite crear un nuevo bloque que podemos volver a utilizar en cualquier página o entrada.
Si creamos un bloque, aparecerá en la biblioteca dentro de una nueva pestaña denominada Reutilizable.
Si queremos editar el bloque reutilizable o eliminarlo, lo podemos hacer a través del enlace Gestionar todos los bloques reutilizables.
Pie de página del editor
El pie de página aporta una información sencilla pero muy valiosa ya que muestra el tipo de bloque que tenemos seleccionado y su jerarquía ascendente.
En este ejemplo podemos ver que el bloque seleccionado es un Párrafo que se encuentra dentro de una Columna del bloque Columnas y todo ello dentro del Documento.
Si en el pie de página hacemos clic en Columna dejaremos de seleccionar el párrafo y pasaremos a seleccionar la columna.
Por lo tanto esta jerarquía no solo nos permite visualizar dónde nos encontramos sino que también es una herramienta muy útil para la selección de contenidos anidados.
La Vista de lista del icono Contorno que comentamos anteriormente hace lo mismo pero con todos los bloques del documento. El pie de página solo muestra la jerarquía ascendente del bloque seleccionado.
Conclusión
En este artículo hemos hablado del editor de bloques Gutenberg y hemos descrito las diferentes secciones que lo componen.
Hemos descubierto el concepto de bloque y mencionado su importancia como nueva unidad visual para la edición de todo el sitio web o Full Site Editing.
También hemos mostrado cómo añadir bloques al área de contenidos y tratado temas importantes como el repositorio de bloques, los patrones o la creación de bloques reutilizables.
¿Necesitas un diseñador web WordPress?
Quizá pueda ayudarte. Escríbeme y cuéntame tu proyecto.
Espero que este artículo te haya servido como introducción para adentrarte en el editor de bloques y empezar a crear contenidos.
Tratar cada uno de los bloques en detalle hubiese sido complicado. Te animo a que los vayas explorando por tu cuenta. De todos modos seguiré publicando más contenidos sobre Gutenberg.
Si hay algún bloque que quieras que trate de forma particular no dudes en decírmelo en los comentarios y lo incluiré en próximos artículos.