Qué es Gutenberg
El editor Gutenberg permite la maquetación de páginas y entradas para que podamos construir nuevos proyectos web en la plataforma de WordPress.
Lo que permitirá Gutenberg es poder personalizar las páginas de nuestra web de forma muy sencilla a base de bloques que iremos añadiendo sin necesidad de tener conocimientos de código.
Básicamente es una adaptación del editor clásico a un editor backend más potente y adaptado a las necesidades de los usuarios.
Basicamente, puedes construir y ver el resultado de la página desde el propio back-end, lo que es una gran novedad para WordPress.
Cómo utilizar el editor de WordPress Gutenberg
Intenta crear una nueva página o una nueva entrada de blog y comenzar a trastear con este nuevo editor.
Aquí tienes un vídeo para ver de forma más visual cómo funciona Gutenberg.
Barra de herramientas de Gutenberg
Como te comentaba antes, el constructor Guternberg funciona mediante bloques, por lo que tendrás que seleccionar el botón “+” de añadir bloque para añadir nuestras “secciones”.
El editor permite deshacer los cambios realizados y rehacerlos de forma muy sencilla, ya que como si de un documento de Word se tratase, ha incluido dos botones para volver atrás y adelante.
Justo al lado del botón “+” tenemos un botón de “información”, el cual te dirá la información general como el número de palabras de nuestra página, el número de encabezados, los párrafos y el número de bloques de la página que estés creando.
Además, mostrará la jerarquía de H que tiene de forma muy sencilla y visual.
A su derecha encontrarás las herramientas con la opción de “Vista Previa” con el que, como con otros constructores back-end, pulsandolo podrás ver los resultados de lo que vayas construyendo en la página.
Pero ojo, aunque pulses sobre vista previa, si no clicas en “Publicar” esta página no será visible para el resto de personas que entren en tu web, por lo que quedará en borradores y solo tendrán acceso a ella los administradores o usuarios con ese rol.
Si te fijas a la derecha, donde están las herramientas, tienes la opción de ocultar o mostrar más opciones para personalizar mejor la página.
Como ves en la imagen, las opciones del documento que se muestran son las mismas que se mostraban en el editor clásico de WordPress por defecto, que en el caso de las entradas del blog serán las categorías, etiquetas, imagen destacadas, estado y visibilidad, etc.
Si abres una nueva página (que no sea una entrada del blog), las opciones cambiarán a: estado y visibilidad, imagen destacada, comentarios y atributos de página.
Pero ahora bien, si te fijas, al lado de donde pone “Documento”, encontrarás la sección del “Bloque”, que cambiará en función del bloque que tengamos seleccionado (ya sea un texto, imagen, vídeo, encabezado, etc.).
En este caso voy a pulsar sobre el bloque de la imagen para que veas que al seleccionarlo ofrece la posibilidad de modificar las personalizaciones de esta imagen principal del post, como es la opción de oscurecer o de hacerla fija, y además, una opción para añadirle su clase de CSS.
En el caso de que selecciones un bloque de texto, se abrirán otro tipo de opciones de bloque en el que aparecerá la opción de cambiar el tamaño de las letras, el color, etc.
Por otro lado, si te fijas a la derecha del todo hay un botón con 3 puntos, y si lo seleccionas podrás cambiar y pasar del editor visual al editor de código en un clic, viendo así los códigos HTML de cada bloque generados.
Además de esto, en estos tres puntos tienes la posibilidad de copiar todo el contenido por si luego quieres pegarlo en alguna otra página o entrada no tengamos que copiar el bloque de HTML completo como hacíamos en el editor clásico.
También encontrarás la opción de activar la opción de los consejos para que, cuando estés empezando a utilizar este editor de WordPress, puedas seguir las instrucciones del plugin Gutenberg.
Bloques de Gutenberg: La nueva forma de maquetar
Una vez visto el funcionamiento de las herramientas que facilita el editor, vamos a ver cómo funcionan los bloques de Gutenberg y extraer conclusiones sobre este editor de WordPress.
Lo primero que vamos a hacer es crear una página nueva en “Páginas”, “Añadir Nueva”, “Gutenberg”.
Y una vez tengamos la página creada ya añadimos nuestros nuevos bloques pulsando al botón de +, como te he explicado antes.
El plugin ofrece una gran variedad de elementos que podremos incluir en la página, distribuidos en: Los más utilizados, los comunes, formatos, elementos de diseño, widgets e incrustados.
Aquí tienes un esquema de todos los que vas a poder encontrar en el editor Gutenberg 3.2.0.
Si alguna vez has utilizado algún otro constructor de WordPress como es Elementor, verás que tienen un aspecto muy similar, salvo que en Elementor tendremos que arrastrar y soltar, mientras que en Gutenberg tan solo deberás pulsar para que se añada cada uno de los bloques automáticamente al final de la página.
Una vez añades cada uno se nos abren las especificaciones, como es en el caso del texto: las negritas, alineación del texto, enlaces, etc.
Si pulsas sobre los 3 puntos de los ajustes, se abren unas opciones muy importantes como son la de duplicar, editar como HTML (ese único bloque) o eliminar.
Y estas opciones facilitan mucho la maquetación tanto de páginas como de artículos, ya que puedes duplicar cada una de las secciones que ya tengas editadas y sobreescribir, cambiando los textos o imágenes para no tener que añadir nuevos bloques.
Pero bien, vamos a ver algunos de los bloques más importantes para cuando te lo instales y te pongas a la acción con el nuevo editor de WordPress, sepas utilizar cada uno de ellos.
Bloque de párrafo
El bloque de párrafo del plugin de WordPress Gutenberg permite añadir texto y modificar su tamaño, colores, etc.
Una vez construyes el bloque, e incluyes el texto y lo personalizas, al pulsar sobre el elemento de párrafo, te dará la opción de transformar el bloque en otro del mismo estilo como en cita, encabezado, lista o subtítulo.
Si pasas de un bloque de texto a una cita, quedaría de la siguiente forma:
Bloque de encabezado
Si lo que quieres es añadir algún título (H2, H3, H4…), no utilizarás el bloque de párrafo, sino que añadirás un encabezado y seleccionarás de forma muy sencilla el que necesites para cada momento de la construcción de la página.
Bloque de imagen
Podrás incluir imágenes en las páginas y alinearlas como en un Word.
Además, podrás especificar si la quieres a full width, thumbnail (150×150), medium, medium large o large; o incluso redimensionar la imagen al tamaño que busques.
Eso sí, te recomiendo que no redimensiones con el propio WordPress sino que optimices las imágenes antes de subirlas.
Aquí tienes una guía para saber cómo optimizar las imágenes.
Bloque de vídeo
En Gutenberg tienes varias vías para insertar vídeos, que será a través del propio bloque de vídeo, mediante código HTML o incrustado a través de la propia plataforma (YouTube, Vimeo o la que esté disponible en las opciones de “incrustados”).
Bloque de columnas
En las opciones de texto tienes los bloques de columnas y de columnas de texto para poder distribuir el diseño web.
Ambas son una opción muy buena para distribuir los contenidos, pero una vez lo visualizas en móvil, no se adapta por defecto, por lo que no son responsive y deberías modificarlas a código para que aparezca una columna arriba de la otra, es un gran inconveniente a recalcar.
Ventajas y desventajas del editor de WordPress Gutenberg
PROS:
Es muy fácil de utilizar, por lo que la curva de aprendizaje es más corta que la del editor clásico de WordPress.
Gutenberg es muy visual, intuitivo y limpio.
La opción de editar HTML de Gutenberg permite editar por secciones el código, siendo mucho más claro y evitando errores debido a su claridad.
Tiene una gran variedad de bloques para hacer atractivo nuestro diseño.
Incluye una visualización rápida de encabezados (H2, H3, H4…), algo que el editor clásico y otros constructores no incorporan por defecto.
Con la implementación de Gutenberg en tu WordPress no necesitarás instalar otro constructor para maquetar tus contenidos.
Gran adaptación a dispositivos móviles y tabletas.
Permite introducir elementos de otras plataformas web como YouTube o Vimeo de forma fácil y rápida.
El rendimiento del plugin es bueno tanto en ordenadores como en móviles, por lo que no ralentizará la web ni afectará negativamente su uso.
Pero bien, en el plugin Gutenberg de WordPress también encontramos grandes desventajas, por lo que es una buena ocasión para sacarlas a la luz.
CONTRAS:
Está aún muy lejos de otros constructores como Elementor o Divi, los cuales permiten personalizar mucho más nuestras páginas sin necesidad de saber código.
Podría ser incompatible con algunos plugins o temas de WordPress.
Las columnas no se adaptan bien a los dispositivos móviles o tabletas.
Fuente: raiolanetworks.es
