Els blocs de Gutenberg: revisió pràctica

Examinam el funcionament dels blocs de Gutenberg, el nou editor predeterminat a partir de WordPress 5.0: tipus, funcions i limitacions.

Si encara no estàs al dia del que ens espera amb la propera actualització de WordPress a la versió 5.0, et recoman que primer et llegeixis l’article Preparant l’arribada de Gutenberg: el nou editor de WordPress.

En aquell article ja apuntava que en una nova entrada podríem fer una revisió dels diferents blocs de Gutenberg. Així que en aquesta ocasió aprofundirem en el seu funcionament.

Els blocs serien com una espècie de peces de contingut, cada una de les quals té les seves característiques, funcions i opcions de configuració pròpies.

D’entrada, he de dir que aquest article és el primer que començ amb la intenció d’escriure’l íntegrament i directament amb Gutenberg. Per suposat primer en un WordPress de Proves.

Veurem quines conclusions en puc treure.

Per tant, anem per feina i examinem què podem fer amb el nou editor i els seus blocs.

Com redactar una entrada amb els blocs de Gutenberg


Preliminar: El títol de l’entrada

El primer espai que apareix per editar a Gutenberg és el títol de l’entrada. No és pròpiament un bloc i per tant no té les opcions que veurem després.

Títol d'entrada als blocs de Gutenberg

L’únic que permet és escriure el títol i modificar l’adreça URL predeterminada que es genera segons la configuració que tenguis d’enllaços permanents del teu WordPress.

Recorda que si tens una versió antiga de PHP segurament no et funcionaran els enllaços permanents personalitzats. Consulta-ho amb el teu servei d’allotjament per actualitzar a PHP 7. I vigila que amb el canvi et funcioni tot correctament.

El bloc predeterminat: el paràgraf

Una volta tenim el títol començam amb el blocs. Els blocs es poden seleccionar des del botó (+) de la part superior esquerra de l’editor. Però també hi ha altres formes de seleccionar un tipus de bloc o de modificar-ne un d’existent, com veurem.

Blocs de Gutenberg: afegeix bloc

De totes maneres, si comences a escriure a l’editor, el bloc predeterminat és el de paràgraf. Seria realment molt poc productiu que cada vegada que has d’escriure haguessis d’anar a seleccionar un bloc i triar el de paràgraf.

El mateix bloc de paràgraf es manté fins que pitges la tecla ENTER o INTRO del teu ordinador. Llavors comences un nou paràgraf amb un nou bloc automàticament.

Si cliques dins el bloc quan ja té contingut, t’apareixen una sèrie d’icones per justificar el text a l’esquerra, la dreta o centrar-lo. I també per posar negreta, cursiva, un enllaç o un text ratllat.

Característiques especials:

El bloc de paràgraf, com a predeterminat, té una sèrie d’accessos que permeten canviar el tipus de bloc de forma ràpida.

Quan tens un bloc de paràgraf buit t’apareix el següent text introductori:

Blocs de Gutenberg: canvia de bloc

Efectivament pots escriure en el bloc de paràgraf, però si escrius la barra lateral “/” t’apareixen diferents opcions de tipus de blocs que pots seleccionar amb el cursor o amb el teclat.

Blocs de Gutenberg: com canviar de bloc

També pots canviar de tipus de bloc clicant la icona (+) que apareix a l’esquerra del bloc de paràgraf buit.

Els tres blocs de Gutenberg més utilitzats sempre els tindràs disponibles com a opció ràpida a les icones de la part dreta del bloc de paràgraf, quan hi passes per damunt i sempre que estigui buit.

Comportament dels Blocs de Gutenberg

Tots els blocs de Gutenberg tenen el següent comportament i característiques comunes:

Opcions Generals

Si passes el punter per la part superior d’un bloc que ja té contingut, al centre apareix una icona (+) per afegir directament un nou bloc damunt de l’actual.

Blocs de Gutenberg: afegeix un bloc a dalt

I en tots els casos quan cliques dins un bloc t’apareixen icones amb diferents opcions d’alineació o edició del contingut del bloc. La primera icona de totes sempre et permet accedir a una llista per transformar el bloc i el seu contingut a un altre d’entre els de la mateixa categoria.

Blocs de Gutenberg: transforma un bloc

Desplaçament de blocs de Gutenberg

Quan passes el punter per damunt del costat esquerra d’un bloc hi apareixen unes fletxes que et permeten moure’l amunt o avall. Però ja és possible també arrossegar els blocs per ubicar-los on més t’interessi.

Opcions addicionals

Si passes el punter pel costat dret del bloc apareix una icona amb tres punts amb més opcions:

Blocs Reutilitzables

De totes aquestes opcions, resulta remarcable l’opció d’afegir a Blocs Reutilitzables.

Quan afegeixes un bloc com a reutilitzable, li assignes un nom i el pots recuperar per ser utilitzat més vegades sense haver de reconstruir-lo i configurar-lo tot de nou.

Ara mateix pots accedir-hi per exemple des de la icona (+) de la barra superior o del costat esquerra d’un bloc buit on tens la nova categoria de blocs reutilitzables.

Quan un bloc el tens definit com a reutilitzable, des de les opcions addicionals ara pots reconvertir-lo de nou en un bloc normal i editar-lo només per a aquella ubicació concreta, o eliminar-lo dels reutilitzables de manera que el suprimiràs de tots els llocs on l’hagis posat.

Configuració del bloc

Quan tens un bloc seleccionat, a la barra lateral de Gutenberg tens les opcions de configuració a la pestanya de bloc.

Tots els blocs tenen un apartat d’Avançat que permet introduir una classe CSS addicional per personalitzar l’estil CSS d’aquell bloc en concret.

Pel que fa la resta d’opcions, per a cada bloc són diferents, pel que ho comentarem a continuació.

Categories o tipus de blocs


Inline Elements

Inline Image

Aquest bloc té les mateixes opcions del bloc de paràgraf. La seva particularitat és que permet incloure-hi una imatge dins el mateix.

La seva utilitat em resulta dubtosa. Personalment preferesc els blocs d’imatge i de paràgraf.

Blocs comuns

Paràgraf

Ja hem vist que el bloc de paràgraf té algunes característiques especials com a bloc predeterminat.

Però com gairebé tots els blocs, també té opcions de configuració des de la barra lateral de Gutenberg.

Blocs de Gutenberg: configuració paràgraf

Fins i tot t’avisa si la combinació de color i text pot resultar difícil de llegir. De totes maneres, he vist que t’avisa amb algunes combinacions que no resulten problemàtiques i en canvi no t’avisa en alguns casos que crec que ho hauria de fer.

No et permet canviar el tipus de lletra del bloc.

Capçalera

A la configuració pots triar capçaleres de títol des de H1 a H6 i alineació dreta, centre o esquerra.

Imatge

Com és de suposar, permet afegir una imatge a l’entrada.

Si vols, pots afegir un text de peu de foto a la teva imatge

Tens les icones per alinear o editar la imatge fent clic dins el propi bloc.

Pel que fa a la configuració, des de la barra lateral pots:

  • Configurar el text alternatiu per a la imatge
  • Configurar la mida
  • Incloure un enllaç a la imatge

Subtítol

Del bloc de subtítol podem destacar que només se’n permet un per entrada. Així que si t’interessa utilitzar-lo, la seva ubicació idònia seria a continuació del títol de l’entrada.

Ve amb un estil predeterminat sense opció de canviar-lo des de Gutenberg. No pots modificar el tamany de lletra ni treure la cursiva, pel que segurament s’ha de revisar. Sí que pots posar negreta o la resta d’opcions d’alineació, ratllat o enllaç.

Llista

  1. Element 1
  2. Element 2
    • Subelement 2.1
    • Subelement 2.2
  3. Element 3

No té opcions de configuració addicionals des de la barra lateral. Les icones del propi bloc permeten triar el tipus de llista (ordenada o no ordenada) i el sagnat de l’element de la llista. A part de les opcions de negreta, cursiva, enllaç i ratllat.

Imatge de portada

Permet incloure una imatge amb text al seu interior. La imatge aprofita l’amplada completa que tenguis configurada a la ubicació on la posis. Té opcions d’alineació de la imatge i el text a dreta, esquerra o centre.

Des de la barra lateral pots configurar la imatge perquè es desplaci amb el moviment de pantalla o sigui fixa (efecte parallax), i l’opacitat del fons que necessitis per ressaltar el text.

No pots canviar el tamany o el tipus de lletra del títol des de Gutenberg.

Galeria

Et permet canviar el nombre de columnes de la galeria, que les imatges de diferents tamanys quedin escapçades per mantenir-les alineades, escriure una llegenda o incloure un enllaç a cada foto.

Cita

Aquest text és una cita

El bloc de cites no té més opcions que les icones d’alineació, negreta, cursiva, enllaç i ratllat. Potser es troba a faltar que hi hagi les opcions de configuració a la barra lateral com les que té el bloc de paràgraf.

Seria interessant poder canviar la mida, la font o els colors de lletra i de fons. Ara mateix no es pot fer des de Gutenberg.

Àudio

Pots incrustar un arxiu d’àudio des de la teva mediateca.

File

Incrusta un enllaç a qualsevol arxiu de la teva mediateca. Pots enllaçar-hi un document, una imatge…

Permet incloure un botó de descàrrega que de moment no descarrega res. Almenys jo no he aconseguit que em funcioni. A més, també necessita traducció.

Vídeo

Aquest bloc permet visualitzar un vídeo des d’un arxiu de la teva mediateca.

Disposa de les següents opcions de configuració:

  • Reproducció automàtica
  • Bucle
  • Mut
  • Controls de Playback

Blocs de format

Preformatat

Afegeix text que respecti els espais i tabulats, i que també permeti estils.

Aquesta és la definició d’aquest bloc, però d’estils des de Gutenberg cap ni un, almenys de moment.

Nota destacada

Aquest bloc també presenta problemes de funcionament. En diverses proves no he aconseguit que la nota es mostri tal com apareix en l’edició del bloc.

Codi

/* Codi d'exemple */

Un bloc per mostrar un bocí de codi de forma senzilla, o un text que respecti espais i tabulat.

Clàssic

Aquest bloc reprodueix l’editor clàssic dins un bloc de Gutenberg. Totes les teves entrades i pàgines a.G. (abans de Gutenberg) aniran a parar a aquest bloc quan s’implanti al nucli de WordPress.

HTML personalitzat

Afegeix el teu propi codi HTML. Des de la pestanya de Vista prèvia pots veure’n el resultat directament des de l’editor.

Taula

Una forma fàcil d’incloure taules senzilles a WordPress per mostrar dades sense cap extensió. Amb aquest bloc podràs afegir i eliminar files i columnes a una taula. També pots configurar que les cel·les siguin d’amplada fixa.

O almenys aquest serà el seu objectiu, perquè de moment també he tingut problemes amb aquest bloc. O es penja Gutenberg, o les taules no m’acaben de sortir com queden configurades a l’editor.

Vers

Un altre bloc amb text d’utilitat dubtosa. Per què fa falta un bloc per fer un vers que ara mateix no aporta res addicional al bloc de paràgraf?

Elements de Disseny

Separador

La típica línia horitzontal de separació:


Espaiador

Permet crear un espai buit de separació. Pots configurar l’alçada en píxels.

Botó

Poder incloure un botó com aquest des de Gutenberg sens dubte és una molt bona notícia:

Com el bloc de paràgraf, permet personalitzar el color del text i del fons del botó. I res més.

Columnes (beta)

Com el seu nom indica, es troba en fase beta. Encara no funciona del tot correctament.

Des de l’editor, puc fer aquesta composició que pots veure reproduïda en aquesta imatge:

Però el resultat que es visualitza, com podeu veure en aquesta captura, és així:

Està clar que faltaria afegir una mica d’espai entre les columnes… I de moment no es pot fer des de Gutenberg. Esperem no haver de recórrer al CSS addicional.

Les imatges tampoc acaben de quedar ben alineades, pel que requeriria una feina prèvia de retallar les imatges a mida.

More

Aquest bloc et permet marcar el punt fins on vols que es mostri el resum del teu article a la pàgina del teu blog.

Salt de pàgina

Aquest bloc permet establir punts de ruptura a l’entrada. Els visitants del bloc veuran el contingut dividit en diverses pàgines.

Ginys

Aquesta col·lecció de blocs serveixen perquè els ginys que fins ara teníem exclusivament en les àrees específiques del nostre tema els puguis introduir com a part del contingut d’una entrada.

Així, de moment tenim els següents ginys com a blocs de Gutenberg:

  • Codi de substitució: Afegeix un codi de substitució — un tros de codi, específic de WordPress, escrit entre claudàtors.
  • Arxius del bloc: Giny que permet visualitzar l’arxiu mensual dels teus articles. Pots definir que es mostri el nombre d’entrades i que es mostri com a desplegable.
  • Categories: Aquest bloc afegeix un llistat de les categories dels teus articles. També el pots mostrar com un desplegable, que indiqui el nombre d’entrades i que es visualitzi la jerarquia entre categories, si n’hi hagués.
  • Darrers comentaris: Un altre giny clàssic convertit a bloc, per si vols posar un bloc amb els darrers comentaris dels teus articles. Pots configurar que es mostri l’Avatar de l’autor, la data del comentari, un resum i el nombre de comentaris.
  • Últimes entrades: Amb aquest bloc es presenta en forma de llista una relació dels teus darrers articles publicats. Els pots ordenar alfabèticament o per data de publicació, mostrar només una categoria concreta, definir el nombre d’articles i mostrar la data.

A mi mai m’han acabat de convèncer aquests ginys, i ara tampoc. Si tu els utilitzes a una barra lateral o un peu de pàgina, ara els podràs incorporar a un article.

Segurament en vindran més, o hi haurà extensions que afegeixin ginys que em resultin més interessants.

Incrustacions

L’última de les categories de blocs és la d’incrustacions. La llista és de més de 30 blocs específics diferents per incloure contingut estojat en d’altres serveis. Pots incloure vídeos de Youtube o Vimeo, música de Spotify, publicacions de xarxes socials, etc..

Com que la llista és molt llarga, lògicament no els veurem tots.

També hi ha un bloc genèric per incrustar contingut si el que necessites en concret no hi és a la llista.

Observacions finals


Com a detalls afegits de Gutenberg, a la barra superior de l’editor m’han resultat interessants els següents elements.

Informació del contingut

El primer és a la part esquerra. Juntament amb els botons d’afegir blocs i les fletxes de desfer i refer accions, apareix la icona (i) que et dóna la següent informació:

  • Nombre de paraules, capçaleres, paraules i blocs de l’entrada.
  • Un esquema de l’estructura del contingut.

Eines

Els altres dos elements que vull comentar es troben quan cliques els tres punts que hi ha a la dreta de la barra superior. Es tracta de les eines Dreceres de teclat i Copia tot el contingut.

Dreceres de teclat

Des d’aquí o prement MAYS+ALT+H s’obre el quadre de dreceres de teclat per accedir a totes les funcions que es poden realitzar amb l’editor directament amb el teclat.

Copia tot el contingut

Ja vaig comentar que havia fet la prova de copiar un article de l’editor clàssic dins Gutenberg, i que automàticament es creen tots els blocs. També que quan actives Gutenberg a un WordPress, els antics continguts de l’editor clàssic s’inclouen en un únic bloc, el bloc clàssic.

Però què passa al revés? I si un article inicialment fet amb Gutenberg el copies a l’editor clàssic?

He volgut fer la prova amb aquest article. He clicat l’opció de copiar tot el contingut d’aquest article fet amb Gutenberg i enganxar-ho a l’editor clàssic, a un altre WordPress de proves sense Gutenberg, a la pestanya de Text en HTML.

El resultat lògicament és que l’html és el propi dels blocs de Gutenberg. Visualment, els paràgrafs per defecte apareixen correctament. Però alguns blocs de Gutenberg han patit certa destrossa.

Resultats:
  • El bloc de paràgraf que havia modificat amb les opcions de configuració, amb tamany de lletra més gran, inicialment l’havia fet en blanc sobre fons vermell però en la còpia a l’editor clàssic no es visualitza. El text hi és amb el tamany correcte, però el fons vermell no apareix i per tant el text no es veu. Finalment l’he canviat per text vermell sobre fons gris perquè almenys aparegui el text.
  • Les capçaleres també apareixen correctament, i centrades tal com les havia fet. Igual que les línies de separació.
  • En canvi les imatges que havia centrat apareixen alineades a l’esquerra, i s’han de tornar a centrar.
  • La imatge de portada queda inservible.
  • La galeria també es perd: queda com una col·lecció d’imatges una després de l’altra.
  • La cita normal apareix correctament.
  • El bloc de vers també queda desfet.
  • El botó no es veu, només queda l’enllaç.
  • Els ginys tampoc es visualitzen.
  • La incrustació tampoc queda copiada perquè funcioni.

Però el que m’interessava més d’aquesta prova era veure què passa amb l’article copiat a l’editor clàssic si actives Gutenberg posteriorment. I el resultat és que el contingut no queda incorporat en un únic bloc clàssic sinó que s’activen de nou tots els blocs originals.

Conclusions


Hem vist que ja podem crear contingut amb els blocs de Gutenberg i com fer-ho. Per fer una entrada senzilla amb capçaleres, paràgrafs i imatges el nou editor ja és força operatiu.

Però no és suficient ni és el que s’espera d’un canvi d’aquesta magnitud. Alguns blocs encara presenten problemes. En especial, hem comprovat que els blocs de columnes, taules o notes destacades no acaben de funcionar. Tampoc el bloc de fitxer és completament funcional. I en alguns casos la utilitat resulta dubtosa (inline image, vers).

Jo he pogut fer aquest article amb Gutenberg tal com el podeu veure. Però per poder publicar-lo al meu blog encara sense Gutenberg, l’he hagut de refer una mica.

A part dels blocs que ja presentaven problemes directament amb Gutenberg, els que no es copien bé també els he hagut de reconvertir en captures de pantalla i penjar-los com a imatges (text modificat, galeria, botó…)

A més, per crear pàgines amb un mínim d’atractiu pel visitant el nou editor segueix essent molt limitat a dia d’avui.

Esperem que els problemes detectats es resolguin aviat. Per suposat abans del llançament de la versió 5.0 de WordPress que ja incorporarà Gutenberg per defecte.

De totes maneres, poder fer articles amb Gutenberg, traslladar-los a l’actual editor i que quedin reconvertits a blocs quan arribi el moment sí que és una opció interessant que potser aprofitaré més vegades a part d’aquesta.

De totes maneres, poder fer articles amb Gutenberg, traslladar-los a l’actual editor i que quedin reconvertits a blocs quan arribi el moment sí que és una opció interessant que potser aprofitaré més vegades a part d’aquesta.

Altres articles que et poden interessar

2 comentaris a “Els blocs de Gutenberg: revisió pràctica

No marxis sense dir res!

Informació sobre Protecció de Dades Personals - JoanLlompart.com t’informa que les dades de caràcter personal que proporciones emplenant aquest formulari seran tractades per Joan Llompart Muñoz com a responsable d’aquest lloc web; Finalitat: gestionar els comentaris en aquest blog; Legitimació: Consentiment de l’interessat; Destinataris: les teves dades es desen als servidors de Webempresa (UE) – Veure política de privacitat de Webempresa; Drets: pots accedir, rectificar, limitar o suprimir totes les teves dades a info@joanllompart.com; Per a més informació consulti la informació legal en aquest lloc web.