Extensions de Gutenberg: com millorar el nou editor de WordPress 5.0

El nou editor de WordPress ja és entre nosaltres. Descobreix les darreres novetats del seu funcionament, i les extensions de Gutenberg que amplien els blocs disponibles i milloren les opcions de creació de contingut pel teu lloc web.

A hores d’ara ja deus saber que hem deixat enrere l’anterior editor TinyMCE. WordPress 5.0 va arribar finalment a principis d’aquest passat desembre, amb Gutenberg ja incorporat.

Si encara no has actualitzat a la nova versió de WordPress, et recoman que segueixis les passes que tens a la guia Actualitzacions de WordPress, tots els secrets que necessites saber. En aquest cas està més indicat que mai prendre precaucions, perquè has de comprovar quin efecte té sobre el teu web el nou editor.

Amb aquesta actualització major temes i extensions han d’estar preparats i ser compatibles amb Gutenberg. Però si no estàs prou al corrent del que suposa aquest canvi, primer pots llegir l’article Gutenberg: el nou editor de WordPress.

També tindràs més informació sobre el funcionament de Gutenberg i com redactar una entrada a partir d’ara a l’article sobre la revisió dels blocs de Gutenberg.

Però des d’aquell darrer article en què Gutenberg encara només era una extensió hi ha hagut novetats. Per tant és hora de fer una nova revisió del seu estat i veure també com el podem millorar.

Gutenberg: estat de la qüestió


Gutenberg ja és aquí. Ha tingut una entrada segurament una mica precipitada, però ja el tenim als nostres webs.

La seva implantació per crear continguts de pàgines i articles s’anirà consolidant, i es preveu que el seu sistema de blocs s’ampliarà també a d’altres aspectes de WordPress, com els ginys, els menús o el mateix personalitzador. Però sobre aquestes expectatives de futur, ja tindrem temps de veure com evolucionen.

L’important ara és que tenguis clar que no hi ha tornada enrere i que com més aviat t’adaptis, millor.

Novetats de Gutenberg

L’entorn de l’escriptori de Gutenberg incorpora algunes novetats des de la darrera revisió. Les que més m’han cridat l’atenció són:

  • La navegació de blocs: a la barra superior, al costat de la icona d’informació del contingut ara hi ha una icona que t’obre un quadre amb tots els blocs de l’entrada. En pots seleccionar un i et porta directament al bloc en qüestió.
  • Canvis a les eines i opcions: Les eines accessibles des de la darrera icona de la barra superior també presenta canvis.
    • Apartat Vista: 
      • Si marques la Barra d’eines superior accediràs a les eines des de la barra superior, i no des de cada bloc.
      • Des d’aquí també pots marcar l’opció Mode Spotlight, per centrar l’atenció només en el bloc que tens actiu.
      • El mode de pantalla completa et permet eliminar totes les distraccions. Bàsicament serveix per ocultar les barres lateral i superior del WordPress, de manera que tota la pantalla és ocupada per Gutenberg.
    • Apartat Eines:
      • Ara pots accedir als blocs reutilitzables des d’aquí. D’aquesta manera pots tenir una llista de tots els blocs que tens definits com a plantilles i gestionar-los.
    • Apartat Opcions: Des d’aquí pots configurar, entre d’altres, les característiques que fins ara teníem a la pestanya d’opcions de pantalla, i que encara trobam a la part superior de l’escriptori en altres apartats de WordPress fora de Gutenberg.

Com han quedat els blocs?

Els blocs també han experimentat alguns canvis. Per exemple ha desaparegut de la llista el bloc de subtítol. Si cerques la imatge de portada ara es diu coberta. I en la categoria d’elements de disseny ara hi ha el bloc Mèdia i text.

Però sobretot tenia ganes de veure si amb la inclusió definitiva de Gutenberg al nucli de WordPress es solucionaven alguns problemes de funcionament que havia detectat anteriorment en alguns d’ells. I açò és el que m’he trobat:

  • El bloc de fitxer que no em permetia descarregar l’arxiu adjunt ja funciona bé. I el botó de “baixa” també està traduït.
  • El bloc de nota destacada també ha millorat una mica. Ha incorporat dos estils configurables predeterminats: el “regular” encara no em convenç, i el que s’anomena “color sòlid” deixa la nota pràcticament com el bloc de citació, que m’agrada més.
  • Els problemes del bloc de taula sembla que també s’han resolt. Almenys amb les proves que he fet no s’ha penjat Gutenberg com m’havia passat, i les taules m’han sortit publicades correctament.
  • El bloc de columnes també funciona millor. Almenys ja hi ha un espai de marge per defecte entre les columnes.

També he notat que ja no hi ha problema amb l’espai de marge inferior de les imatges, que m’havia obligat a incorporar un codi CSS addicional. Per sort, ja no em resulta necessari.

I algunes millores destacades, com la possibilitat d’amplada completa en alguns blocs com el d’imatge, o diferents estils per triar en els botons.

Gutenberg disponible com a extensió
Ara pots crear imatges d’amplada completa des de Gutenberg mateix

Extensions de Gutenberg per millorar el nou editor


Amb Gutenberg el festival d’extensions per ampliar funcionalitats i afegir nous blocs tot just ha començat. Però ja hi ha disponibles algunes opcions molt interessants.

Contenidors de blocs

Els contenidors de blocs serien un tipus de bloc més avançat que el bloc de columnes que incorpora Gutenberg per defecte. Es tracta d’un bloc de blocs, que permet incorporar qualsevol dels altres blocs en el seu interior.

Entre d’altres, permeten triar:

  • Diferents plantilles de columnes
  • Marges de separació i espais interns
  • Personalització de fons amb imatge o colors.
  • Control multidispositiu
  • Control de columnes

Hi ha algunes extensions de Gutenberg que incorporen aquests “contenidors de blocs”, però no tots els que es diuen així realitzen plenament aquesta funció. Els que he pogut comprovar que sí són els tres següents:

Kadence Blocks – Gutenberg Page Builder Toolkit

Aquesta extensió afegeix 6 blocs a Gutenberg, com icones, botons avançats, capçaleres… Però el que ara ens interessa és el bloc anomenat Row Layout. Es tracta d’un contenidor que permet crear columnes que pots personalitzar.

Extensions de Gutenberg: Kadence Blocks

Pots controlar l’amplada de les columnes, afegir imatges de fons, colors, efectes parallax, marges, espais…

A més, pots triar entre diferents plantilles que ja venen preparades amb diferents imatges i estils.

Caxton

Amb aquesta extensió s’afegeix directament una nova categoria de blocs de Caxton. Un bloc anomenat Caxton Layouts és el que permet crear plantilles de seccions avançades, diferents estructures de files i columnes per incorporar blocs de continguts.

Extensions de Gutenberg: Caxton

GhostKit

Aquesta és una altra de les extensions de Gutenberg que incorpora tota una col·lecció de nous blocs. Entre els blocs n’hi ha un que s’anomena Grid que permet la creació de columnes amb opcions de personalització avançades, similars als altres dos.

Extensions de Gutenberg: Ghostkit

Com podràs veure, amb aquest tipus de bloc que creen seccions, que permeten la personalització avançada de columnes, Gutenberg ja s’assembla més als maquetadors que coneixem fins ara!

Extensions de Gutenberg que afegeixen Blocs

Les tres extensions de Gutenberg que hem vist abans afegeixen diversos blocs que amplien les possibilitats de creació de continguts. D’aquestes extensions ja n’hi ha per triar i remenar.

Algunes d’aquestes extensions són:

Fes un repàs dels blocs disponibles. Pots crear tot un catàleg de blocs per a l’editor de WordPress que no venen per defecte a Gutenberg: Icones socials, testimonis, pestanyes, barres d’evolució, caixes d’autor, taules de preus, i un llarg etcètera.

L’inconvenient d’aquestes extensions de Gutenberg és que segurament t’agradi algun bloc concret i la resta que venen inclosos no els utilitzaràs. I si instal·les dues o més extensions de col·leccions de blocs carregues el teu WordPress amb un munt de blocs que no necessites, en molts casos fins i tot duplicats!

Això suposa crear un problema de manca d’optimització del teu lloc. A part, també podria arribar a fer-se una mica espès decidir i localitzar quin bloc utilitzar en cada cas.

En canvi, pots instal·lar extensions de Gutenberg més específiques que només afegeixen el bloc que necessites. Per poc que cerquis veuràs com trobes blocs per afegir un mapa de Google, o els teus productes de Woocommerce, etc.

Una eina que pot resultar molt útil per trobar blocs individuals pot esser aquest Directori de blocs en constant creixement. Però inclou tant extensions de Gutenberg de blocs individuals com de col·leccions de blocs.

Extensions de Gutenberg: directori de blocs

Control i personalització de blocs

A part d’afegir blocs, algunes extensions de Gutenberg permeten un major control dels blocs que ja tenim. I per suposat hi ha plugins especialitzats només en aquesta qüestió.

Per exemple Disable Gutenberg Blocks ajuda a resoldre part del problema de l’excés de blocs. Et permet desactivar blocs perquè no es visualitzin els que no necessites. No optimitzaràs prou el teu lloc perquè els blocs segueixen carregats al teu WordPress, però almenys soluciones el desgavell de blocs innecessaris.

Una altra extensió interessant és Extra Gutenberg Blocks Options: Blocks Design, Style, Custom CSS. Aquesta extensió afegeix opcions que es troben a faltar en molts blocs. Pots personalitzar estils com colors, tipografies , marges, espais…

Des d’un enllaç a la barra superior del WordPress, accedeixes a un editor des d’on pots fer els canvis a qualsevol bloc tant en mode visual com des d’una pestanya de CSS.

Conclusions


Gutenberg ja és aquí. Des de WordPress 5.0 forma part del nucli del nostre CMS i s’ha convertit en l’editor per defecte, substituint l’anterior TinyMCE.

Amb el seu llançament hem pogut comprovar com els inconvenients que havíem detectat en la fase prèvia s’han resolt. Gutenberg no ha fet més que començar una nova etapa a WordPress que anirà incorporant els blocs en menús, ginys i el personalitzador. Per tant, si no estàs preparat per a Gutenberg, toca adaptar-se perquè no hi ha volta enrere.

I hem vist com ja hi ha moltes extensions que amplien els blocs que tenim disponibles, o que afegeixen més opcions de control i configuració de les que tenim per defecte.

Amb aquestes funcionalitats tant Gutenberg, com WordPress en general, milloren moltíssim. M’han agradat especialment els “contenidor de blocs”. Aquestes extensions de Gutenberg permetran convertir-lo en un “maquetador a la carta” on podràs afegir els blocs que necessitis. Segurament és d’hora i ja veurem les possibilitats, però ja m’estic començant a plantejar prescindir d’Elementor i tot! I açò que m’agrada ben prou…

S’ha d’anar en compte de no instal·lar extensions indiscriminadament que afegeixin molts de blocs que no necessites o que dupliquin funcionalitats. Sempre és millor mantenir el teu WordPress el més lleuger possible.

Què et sembla el començament de Gutenberg? Ja l’utilitzes? T’has trobat inconvenients inesperats? Preferies l’anterior editor o estàs meravellat amb el seu potencial? Segur que pots fer alguna aportació als comentaris!

Altres articles que et poden interessar

2 comentaris a “Extensions de Gutenberg: com millorar el nou editor de WordPress 5.0

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.