Titorial do editor Gutenberg para WordPress

Falar do editor Gutenberg para WordPress é falar do presente e o futuro do xestor de contidos máis importante do mundo.

Ríos de tinta dixital e miles de comentarios negativos (e positivos) inundaron nos últimos meses do ano 2018 a comunidade de WordPress internacional.

Viña un novo editor que prometía poñer patas arriba o xeito que temos de incorporar contido á nosa páxina web.

Gutenberg estivo a disposición da comunidade en formato plugin durante moito tempo e o feedback foi realmente malo. Reportáronse moitos erros e incomodidades, pero no ambiente tamén repousaba outra idea:o medo ao cambio.

Imaxina a situación, millóns de sitios web e miles de administradores cambiarán o xeito que teñen de introducir a información en WordPress.

Cambian un editor clásico e con poucas posibilidades (pero ao que xa estabamos perfectamente acostumados) a outro en formato bloques, unificado e cunha capacidade de personalización moito maior (que é preciso aprendermos a utilizar).

Mais o novo editor de bloques de WordPress Gutenberg é xa unha realidade e incorpórase por defecto desde a versión 5.0 de WordPress (6 de decembro de 2018).

Non hai posibilidade de oporse a el por moito tempo.

E sei que ti o que queres é saber como funciona, cales son as súas posibilidades, opcións e capacidade de crecemento.

Déixoche aquí a miña pequena achega, un titorial do editor de WordPress Gutenberg.

Adiante!

Que é Gutenberg?

Gutenberg é o nome que ten o novo editor de contidos de WordPress, que permite non só a inserción de textos nas entradas do blog, senón a maquetación e a construción de páxinas sen precisar nada a maiores.

Gutenberg permitirá a usuarios novatos ou pouco avanzados no uso de WordPress e o deseño web construír páxinas e blogs sen que isto supoña un gran esforzo, a base de engadir bloques sen a necesidade de programar.

Si, a base de bloques. Porque Gutenberg non só cambia a interface do editor e engade posibilidades e ferramentas, tamén supón un cambio total no xeito de construír as páxinas e as entradas.

Cada obxecto será tratado como un bloque.

Cada título será un bloque, cada parágrafo será un bloque, cada imaxe será un bloque… Son independentes, cada un coas súas opcións de configuración e moitos deles intercambiables.

É a era do bloque.

Como escribe Fernando Tellado en ayudawp.com, WordPress no futuro poderíase chamar BlockPress.

Como é Gutenberg? Que partes ten?

Como dicía, Gutenberg vén a substituír ao actual antigo editor clásico chamado TinyMCE. O cambio na funcionalidade e a interface é total, polo que vou entrar en materia e revisar por completo todas as partes e funcionalidades para que non perdas nada.

Podemos distinguir 3 partes principais: a barra superior, a barra lateral e a área de contido, que é o lenzo onde colocarás todos os bloques.

Barra superior

Ubícase na parte superior e ten os seguintes elementos.

1. Engadir bloque: como todo son bloques aquí podes engadir o que sexa preciso. Simplemente, debes pulsar o botón “+” e seleccionar o que desexes. Están ordenados por categorías.
2. Desfacer e refacer: funcionan igual que nun editor de texto. Podes desfacer ou refacer os trocos.
3. Estrutura do contido: no botón de información podes revisar información sobre o texto que estás a inserir. Conta número de palabras, títulos, parágrafos e bloques e mostra un esquema de encabezados H1 – H2 – H3…
4. Navegación por bloques: lista dos bloques inseridos que funciona como unha áncora de menú. Ao clicar enriba dun bloque desta lista automaticamente lévate a el.
5. Vista previa: esta opción serve para ver en vivo os resultados que obtés ao ir construíndo a páxina. Non é unha opción nova e xa estaba presente no anterior editor.
6. Publicar: outra opción tamén coñecida. De non pulsares en publicar, a túa entrada ou páxina será invisible para os usuarios que visiten a túa web.
7. Axustes: permite mostrar ou ocultar a barra lateral, da que falarei a continuación.
8. Mostrar máis ferramentas e opcións: aquí podemos seleccionar diferentes xeitos de ver a área de contido, o editor, algunhas ferramentas ou opcións extra.
   • Barra de ferramentas superior: fixa na parte superior (a carón da opción de navegación por bloques) as diferentes ferramentas coas que podemos operar nun bloque. Se non activas esta opción, as ferramentas situaranse enriba de cada bloque.
   • Modo enfoque: aplica unha transparencia a todos os bloques agás o activo, para que o podas ver mellor.
   • Modo a pantalla completa: oculta a barra de administración de WordPress superior e esquerda para facilitar a visualización da área de contido.
   • Editor visual e editor de código: segundo selecciones un ou outro poderás traballar cos bloques ou co código HTML.
   • Xestionar bloques reutilizables: unha ferramenta moi potente de Gutenberg que permite cargar bloques previamente gardados. Se tes un bloque ou un grupo deles que utilizas moito dun xeito e cunhas configuracións determinadas, podes gardalos e utilizalos posteriormente.
   • Atallos de teclado: unha serie de combinacións de teclas que fan máis rápidas algunhas operacións. Aquí podes ver a lista deles.
   • Copiar todo o contido.
   • Opcións extra.

Barra lateral

Outra das partes fundamentais do novo editor de bloques Gutenberg de WordPress. Nela atopamos dúas opcións perfectamente diferenciadas: Documento e Bloque.

Documento

Como podes comprobar as opcións son as mesmas que se mostraban no editor clásico de WordPress no caso de estiveres editando unha entrada. Se estás editando unha páxina, as opcións serán menos e algo diferentes.

1. Estado e visibilidade: unha ferramenta moi útil coa cal podes indicar a visibilidade do post (público, privado ou protexido con contrasinal), día e hora de publicación (usado para programar publicación; por exemplo este artigo programouse para a súa publicación), pendente de revisión por un editor ou administrador, fixar en portada para que apareza como post destacado e mover ao lixo.
2. Revisións: se a entrada se actualizou máis dunha vez, aquí poderás ver os cambios.
3. Enlace permanente: ou slug. É a parte que aparece á dereita do dominio na URL (por exemplo https://www.anxosanchez.com/titorial-editor-gutenberg-wordpress/). Podes deixar que se estableza automaticamente ou personalizala ti para que sexa curta e lexible.
4. Categorías: como o seu nome indica, aquí podes seleccionar a categoría do teu post.
5. Etiquetas: do mesmo xeito que a anterior opción, podes establecer as etiquetas da túa entrada.
6. Imaxe destacada: selecciona a imaxe que se mostrará como destacada.
7. Extracto: indica o texto que se utilizará como resumo e previsualización da entrada.
8. Comentarios: podes permitir ou non comentarios, pingbacks e trackbacks.

Bloque

Esta parte é dinámica e cambia segundo o bloque teñas seleccionado e sobre o que esteas traballando na área de contido. Nel aparecerán diferentes opcións que tes oportunidade de configurar para cada bloque.

Por exemplo, se tes seleccionado un bloque de parágrafo, nesta barra aparecerá unha explicación breve do que é o bloque de parágrafo, axustes do texto como tamaño da fonte, a posibilidade de capitalizar a primeira letra do bloque, cor do texto e cor de fondo de bloque e posibilidade de indicar unha clase CSS adicional.

Área de contido, xogando cos bloques de Gutenberg

Visto toda a nova interface, vou falar neste titorial sobre o novo editor de bloques Gutenberg para WordPress, dalgúns dos elementos que podes incluír no deseño da túa entrada ou páxina.

Ten en contra que algúns están máis indicados para maquetar páxinas “estáticas” (como por exemplo o quen somos, a presentación de servizos ou mesmo landing pages) e outros están pensados para se utilizaren nas entradas do blog.

Mais en todo caso terás sempre todos á túa disposición.

Como engadir un novo bloque

Existen catro modos de engadires un novo bloque.

Na barra superior podes pulsar o botón “+”, como vimos anteriormente; situándote enriba dun bloque poderás ver un botón “+”; pulsando INTRO (salto de liña) e facendo clic no botón “+” da esquerda ou escribindo “/” aparecerá unha lista onde podes seleccionar o que precises.

Estes bloques estarán organizados en: máis utilizados, bloques comúns, formatos, elementos de deseño, widgets e incrustados.

Cada bloque terá unhas opcións comúns e outras propias.

Entre as opcións comúns atopamos a posibilidade de ocultar ese bloque, duplicalo, editalo como HTML, movelo arriba ou abaixo, gardalo como bloque reutilizable, convertelo a outro bloque compatible (isto é moi útil no caso de converter texto a títulos/encabezados ou lista, mais debe haber compatibilidade entre eles) e eliminar bloque.

Parágrafo

O bloque de parágrafo agrega texto a túa entrada ou páxina.

Este será o bloque máis utilizado na maior parte dos teus proxectos web. Podes configurar aliñación, peso e tamaño, cursiva, riscado, inserir ligazóns, cor de texto e cor de fondo.

Pódese transformar nun bloque encabezado, lista, cita, preformateado ou verso.

Encabezado

Un bloque moi común. Coloca un titular onde desexes.

Este bloque pode ter diferentes niveis (desde H1 até H6, aínda que o H1 xa é o titular principal, polo que non se recomenda utilizar máis de un), podes elixir o seu aliñamento, negrita, cursiva, ligazón ou riscado.

Pode conter unha áncora de menú.

Pódese transformar en parágrafo, cita ou encabezado con imaxe de fondo.

Imaxe

Outro bloque moi utilizado que coloca unha imaxe subida desde o teu PC, desde a biblioteca de WordPress ou desde unha ligazón externa.

Esta imaxe ten varias colocacións: dereita, esquerda, centro, amplo (estírase até tocar coas marxes esquerda e dereita do contentor dos elementos) e completo (estírase até os límites do monitor).

Pódese indicar o tamaño, predeterminado por WordPress ou personalizado. Pódese indicar un texto alternativo (etiqueta ALT, recomendable), unha descrición e unha ligazón ao clicar na imaxe.

Este bloque pódese transformar en bloque de galería, fondo, arquivo ou medios e texto.

Galería

Este bloque permite incluír unha galería con varias imaxes. Funciona de xeito similar ao bloque de foto.

Podes axustar o número de columnas que terá a galería, a posibilidade de recortar as imaxes ao mostrarse e o enlazado que terán esas imaxes.

Segundo o número de columnas que se indiquen, as imaxes adáptanse automaticamente. Persoalmente penso que é un avance cualitativo a respecto de como funcionaba a galería no editor clásico.

Fondo

Este bloque está pensando para encabezados de páxinas. Permíteche poñer unha imaxe ou vídeo de fondo (tanto aliñada como a ancho completo) cun título por diante.

Podemos fixar o fondo para simular o efecto parallax e elixir unha cor de superposición (que se coloca entre a imaxe e o texto para facelo máis lexible).

Lista

Un bloque de lista de elementos, numerados ou sen orde, como o que utilizamos nesta entrada varias veces.

Ten opcións semellantes ao bloque do parágrafo. Pódese transformar nel e no bloque de cita.

Cita

Un bloque clásico que se utiliza para resaltar unha frase célebre dalgunha persoa ou unha parte do texto que estamos a escribir.

Podemos elixir entre dous tipos de estilos e as opcións típicas do bloque de parágrafo.

Audio

Un bloque que nos permite engadir un pequeno reprodutor para escoitar un arquivo de audio que subas ao WordPress sen necesidade de shortcodes ou de utilizar outras aplicacións externas como Ivoox.

Creo que esta opción é un avance interesante a respecto do editor anterior.

Ficheiro

Outro bloque que pode mellorar moito a presentación e capacidade de descarga de arquivos, como por exemplo PDF’s.

Automaticamente xera un botón que permite a descarga ao que lle podes configurar o texto, a ligazón á que apunta e o aliñamento.

Outro bloques

Falamos nesta entrada dos bloques máis comúns, pero existen moitos máis que engaden unha lista ampla de funcionalidades e opcións.

Se queres ampliar pásate polo vídeo que hai ao final deste artigo.

E como non podía ser doutro xeito, publicáronse plugins que engaden aínda máis bloques con funcionalidades perfectamente integradas:

• Atomic Blocks: un plugin con máis de 10.000 instalacións que incorpora diferentes bloques que estenden funcionalidades a Gutenberg. Por exemplo bloques de testemuños, acordeóns, chamadas á acción, botóns personalizables, etc.
• Gutenberg Block: un plugin con máis de 40.000 instalacións activas e puntuacións positivas. Está optimizado para o tema de WordPress Astra.
• Stakable: outro plugin a ter en conta, con máis de 8.000 instalacións e unha lista de bloques bastante ampla.
• CoBlocks: por último, outro plugin que aporta bloques algo diferentes aos anteriores como, por exemplo, unha táboa de prezos.

Hai máis, esta é unha escolma.

A cuestión será probalos!

• 

• 

Bloques para WooCommerce

Tamén tes a túa disposición bloques propios de WooCommerce, cos que poderás configurar a túa tenda online desde o propio editor de WordPress.

Aínda falta tempo de desenvolvemento para que se incluan os bloques mínimos viables e non precisar outros plugins adicionais, baixo o meu punto de vista, pero non convén perder a pista.

Gutenberg VS construtores visuais

Dun tempo a esta parte unha gran parte, dos sitios web WordPress están construídos cos chamados construtores visuais.

Un construtor visual é un plugin que serve para deseñar páxinas web con WordPress, que prové de ferramentas adicionais para mellorar a presentación dos contidos e ampliar funcionalidades do tema que utilizas.

Un construtor aforra tempo e facilita a maquetación do sitio web. Isto non impide, nin moito menos, programar nin inserir código a man (nomeadamente estilos CSS ou PHP) que son precisos para os deseños máis avanzados.

Aínda así, non son obrigatorios, e WordPress por defecto incorpora un apartado de personalización.

Algúns construtores coñecidos son Visual Composer, Divi, Beaver Builder, Thrive Architect ou Elementor (o que utilizo eu para os meus deseños profesionais).

Son rivais Gutenberg e Elementor (ou outros construtores visuais)?

Baixo a miña opinión, non.

Ao contrario, son perfectamente complementarios.

Existen bastantes diferencias entre uns e outros.

A máis notable e visible para o usuario é que os construtores visuais adoitan ser do tipo drag&drop (arrastrar e soltar), o que permite ver os resultados nese mesmo intre, e Gutenberg constrúe a páxina no backend (é dicir, no editor, na parte de atrás).

Isto en si pode ser unha vantaxe, pois facilita a inserción ou modificación de código.

Gutenberg ten outro punto forte. Ao ser o editor por defecto e o estándar de WordPress agora e no futuro, todos os plugins se adaptarán a el. É máis, incorporarán a posibilidade de seren inseridos como bloques podendo abandonar en moitos casos os shortcodes.

Isto é unha auténtica revolución.

Mais tamén penso que neste intre Gutenberg está aínda a anos luz das capacidades que demostran editores visuais como Elementor, que mesmo publicou o seu propio plugin para poder ser utilizado como un bloque máis.

Baixo a miña perspectiva, o deseño das páxinas seguirase a facer cos construtores visuais, mentres que o das entradas se fará integramente con Gutenberg.

Así é como eu traballo e así penso que será no futuro.

Conclusión

Como comprobaches ao longo deste titorial do editor de bloques Gutenberg para WordPress eu son moi favorable a este troco.

Malia as miñas reticencias iniciais, penso que é un grande avance nas capacidades do editor e para maquetar entradas ou posts vai dar moito que falar. É rápido, é limpo e é útil.

Incorpora unha gran cantidade de funcionalidades, moitas máis que o editor clásico, que poden ser ampliadas mediante a instalación dos plugins correspondentes.

En contraposición, penso que Gutenberg aínda está moi lonxe doutros construtores web e creo que a mellor opción é buscar sinerxías e non competencia entre eles.

Chegamos ao final.

Espero que este titorial de Gutenberg serva para disipar algunhas dúbidas. A continuación, déixoche un vídeo onde poderás ver de xeito resumido o que falamos neste artigo.

E se che molou, lémonos nos comentarios 😊

PD. Por certo, sei que non debería dicilo, mais se queres desactivar Gutenberg e utilizar o editor clásico simplemente tes que instalar este plugin.