Gutenberg: preparant l’arribada del nou editor de WordPress

WordPress 5.0 incorporarà un nou editor anomenat Gutenberg que substituirà l’actual editor TinyMCE. Un canvi benvingut per uns i criticat per altres. Coneix les implicacions que tindrà i prepara’t pel seu impacte al teu lloc en tema i extensions.

Què és el Projecte Gutenberg per a WordPress?


Ja fa temps que està anunciat. L’editor per defecte que ve incorporat amb WordPress serà substituït per una nova eina: Gutenberg.

Alguns sabeu que la meva opinió sobre l’editor actual és que és massa limitat de cara als usuaris. És totalment insuficient per fer un web presentable. Que no tenguis per exemple ni l’opció d’utilitzar columnes sense haver d’emprar HTML, modificar codi o afegir-ho com a funcionalitat extra amb extensions no crec que sigui admissible. Almenys si WordPress vol continuar liderant el mercat de CMS com fins ara.

A dia d’avui les plataformes per crear webs es multipliquen i si WordPress no vol perdre terreny tocava fer una passa endavant en aquest sentit.

El canvi que s’acosta vol dir passar d’aquest editor que s’utilitza avui:

Editor TinyMCE actual de WordPress

A aquest altre:

Gutenberg, el nou editor de WordPress

D’aparença minimalista, no es tracta d’un simple canvi estètic o d’aspecte. El seu funcionament no té res a veure amb el que hem tingut fins ara. I el seu potencial tampoc.

Des dels seus inicis es troba disponible com una extensió més que es pot instal·lar al teu lloc. Així el pots provar abans de la seva inclusió en el nucli de WordPress.

Gutenberg disponible com a extensió

Des de l’arribada del WordPress 4.9.8 ja s’anuncia des del tauler perquè puguis començar a practicar amb ell.

La meva recomanació: fes-ho, però en un lloc de proves. No ho facis directament al teu web en producció! Almenys fins que no estiguis segur que tot funciona correctament.

Funcionament de Gutenberg a WordPress


No és objecte d’aquest article fer un tutorial sobre com utilitzar Gutenberg. En un altre article ho podem detallar més. Però bàsicament podràs comprovar que es disposa dels següents elements principals:

Blocs

Gutenberg funciona mitjançant els blocs, que venen a ser peces de diferents continguts que pots introduir a una pàgina o article.

Blocs Gutenberg

Els blocs s’agrupen en diferents apartats o categories:

  • Blocs comuns
  • Blocs de format
  • Elements de disseny
  • Ginys
  • Incrustacions

Cada una d’aquestes categories inclou diferents tipus de blocs com paràgrafs, encapçalaments, imatges, botons, columnes, etc…

També tens un apartat amb els blocs que més utilitzis per accedir-hi més ràpidament.

Alguns dels blocs encara estan en fase beta, presenten dificultats o són millorables. Possiblement també se n’afegeixin de nous.

Barra lateral

A la dreta de l’editor també tens una barra d’eines amb dues pestanyes: Document i Bloc.

A la pestanya de Document hi pot trobar els apartats que fins ara teníem a les diferents caixes o metaboxes de l’editor actual. Són les opcions d’estat i visibilitat, de publicació, categories i etiquetes…

A la pestanya Bloc tens les opcions de configuració de cada bloc. Quan seleccionis un bloc t’apareixeran les opcions disponibles en cada cas.

Actualització:

Ara ja està disponible una revisió completa sobre el funcionament de Gutenberg a l’article: Els blocs de Gutenberg: revisió pràctica.

Quan s’incorporarà el nou editor Gutenberg per defecte?


Gutenberg passarà a formar part del nucli de WordPress a la versió 5.0. Segons les previsions inicials aquesta nova versió ja hauria d’haver-se posat en marxa. Però actualment sembla que entrarà en funcionament cap a finals d’aquest 2018. Potser principis de 2019 com a tard.

En el moment que WordPress 5.0 s’incorpori a l’escena, l’editor actual TinyMCE per defecte ja no hi serà. Aquest fet tindrà una sèrie d’implicacions i un impacte al teu lloc pel qual t’hauries d’estar preparant des d’ara mateix.

Potser t’estàs fent algunes preguntes tals com:

  • Què passa amb els continguts fets abans de Gutenberg?
  • Serà compatible el tema i totes les extensions que utilitzes amb el nou editor?
  • Si utilitzes un maquetador, el podràs seguir utilitzant?
  • I si no estàs preparat, què passa?

Segueix llegint i tindràs resposta a totes aquestes preguntes.

I si vols conèixer tots els secrets de les actualitzacions a WordPress, ara tens una nova guia gratis per a subscriptors. Una guia pensada precisament per controlar els canvis, avançar-te als esdeveniments, treure’t maldecaps i actualitzar de forma segura per evitar problemes d’incompatibilitats.

Què passa amb els continguts fets abans de Gutenberg?


Els continguts com articles i pàgines que haguessis fet amb l’editor actual de WordPress queden incorporats a Gutenberg mitjançant un bloc anomenat Clàssic.

Així és, un dels blocs de Gutenberg és l’editor que fins ara hem tingut. Aquest bloc el pots trobar a l’apartat de formats. De fet pot ser una bona manera d’iniciar-se amb els blocs de Gutenberg, perquè et permet treballar i familiaritzar-te amb el nou entorn, però sense perdre les opcions a les que estàvem acostumats.

Per tant, sembla que no cal patir pels anteriors continguts perquè es mantindran intactes.

Convertir els continguts a Gutenberg

He fet la prova de copiar un contingut de l’editor clàssic dins un bloc de Gutenberg i automàticament el nou editor crea tots els blocs necessaris: capçaleres, separadors, paràgrafs, imatges…

Però en el meu cas he notat alguns detalls que no m’agraden. Per exemple:

L’espai inferior entre un bloc d’imatge i el text que va a continuació és massa petit, no és igual que l’espai que queda a la part superior. Posar un espaiador al final de la imatge i ajustar-lo a l’altura necessària (20px) ho resol, però haver de fer-ho amb cada una no és la solució més productiva precisament…

Per tant la solució per la que podria optar ara mateix és introduir un CSS addicional al personalitzador. Aquí us el deix per si és d’utilitat a algú:

/* Espai inferior bloc imatges a Gutenberg*/

figure {
 padding-bottom: 20px;
}

Un altre detall és que jo preferesc fer els textos justificats a dreta i esquerra, i el bloc del paràgraf no ho deixa fer. Sí, ja se que està més recomanat no justificar a banda i banda sinó només a l’esquerra. El motiu és que l’alineació a l’esquerra s’adapta millor al tamany dels diferents dispositius. Però a mi m’agrada més així, què hi farem.

L’editor clàssic tampoc ho deixa fer per defecte des de la versió 4.7, però ho tenia resolt amb l’extensió TinyMCE Avançat que permet més opcions, entre les quals la de justificar textos.

De totes maneres, en aquest cas introduir aquest codi CSS ho soluciona:

/* Textos justificats per defecte */

p {
 text-align: justify;
 }

Així tots els texts de paràgrafs estan justificats per defecte i no s’ha de fer un per un.

Potser quan arribi el WordPress 5.0 aquests ajustaments no em siguin necessaris, perquè apareguin altres opcions o jo canviï d’opinió.

Hi ha d’altres aspectes que no funcionen igual, però desenvolupar totes les diferències entre Gutenberg i TinyMCE requeriria tot un article a posta.

Compatibilitat de Gutenberg amb temes i extensions de WordPress


Gutenberg implica que temes i extensions s’han d’adaptar al funcionament del nou editor. Si quan actualitzis a WordPress 5.0 tens activat un tema o tens extensions que no són compatibles amb Gutenberg, el teu lloc pot perdre funcionalitats, tenir aspectes de l’aparença que deixin de mostrar-se bé, o alguna cosa pitjor…

GeneratePress i Gutenberg

A dia d’avui, el meu tema recomanat GeneratePress ja és compatible amb Gutenberg. Únicament el mòdul de Seccions havia generat incompatibilitat. Fins la versió 1.6 de GeneratePress Premium, havies de desactivar el mòdul de Seccions perquè Gutenberg funcionés.

Com sabeu, les Seccions no es poden emprar amb cap dels maquetadors de WordPress: Elementor, Divi Builder, Thrive Arquitect… Tant en maquetadors gratis com premium, en tots els casos resulta incompatible utilitzar les seccions de GeneratePress i el constructor en un mateix contingut. Però amb Gutenberg ni tan sols es podia tenir activat el mòdul de les seccions al teu lloc, sinó no funcionava.

Aquesta incompatibilitat hauria estat un greu problema per a GeneratePress quan Gutenberg formi part del nucli de WordPress. Doncs bé, aquest inconvenient ja està resolt. Les Seccions ja es poden utilitzar també amb Gutenberg instal·lat a partir de la versió de GP-Premium 1.7! 

Vigilant les extensions

Totes les extensions s’hauran d’adaptar al nou editor. Extensions de formularis de contacte, de captació de subscriptors, de xarxes socials, taules de continguts, extensions de SEO i de comerç electrònic… I especialment els maquetadors, dels que en parlarem específicament després.

Per sobreviure en el nou WordPress 5.0, les teves extensions hauran de ser compatibles amb Gutenberg. Si tens cap extensió que no funciona bé amb el nou editor, hauràs de cercar alguna alternativa que sí que vagi bé.

Pots esperar que aparegui una nova versió de la teva extensió que resolgui la compatibilitat abans d’utilitzar Gutenberg. Però quedar obsolet en una versió anterior de WordPress no és una bona opció.

Gutenberg i els maquetadors


Gutenberg com a editor s’aproxima a les funcionalitats d’un maquetador. Diria que es troba a mig camí entre l’editor actual i un constructor. Evidentment no té ni de lluny totes les possibilitats que ofereixen constructors amb més rodatge com Elementor o Divi. Però qualsevol inconvenient en aquest sentit, si cal, segur que es cura amb el temps.

D’entrada no funciona com un Editor visual des del frontal del web. Ara mateix encara no pots editar i crear contingut directament des de l’aparença que es mostra als teus visitants. Però amb Divi Builder i Elementor al principi tampoc es podia, i mira ara…

A més, segur que apareixeran extensions gratis i premium que milloraran les capacitats de Gutenberg, tal com n’hi ha que ho fan amb l’editor actual. De fet, ja n’hi comença a haver d’interessants…

Compatibilitat de Gutenberg, Elementor i els altres maquetadors

Ara mateix la màxima preocupació dels maquetadors és assegurar la compatibilitat amb Gutenberg.

En el cas d’Elementor ja fa temps que va anunciar que és compatible amb Gutenberg. Des del nou editor de WordPress apareix perfectament el botó de “Edita amb l’Elementor” amb el que pots alternar un i altre creador de contingut.

També Divi, tant el tema com el maquetador, són plenament compatibles amb Gutenberg.

Una altra cosa pot ser que en un futur Gutenberg posi en qüestió la mateixa existència dels maquetadors.

Quin futur espera als maquetadors actuals?

A dia d’avui Gutenberg no pot pretendre substituir els maquetadors com Elementor i Divi Builder.

Però si Gutenberg evoluciona cap a un complet maquetador visual, els constructors de pagament també poden veure molt reduït el seu mercat.

Potser s’hagin d’adaptar cap a versions premium del propi Gutenberg. O oferir una experiència i funcionalitats amb els que marquin la diferència que ara ni imaginam.

Opinions a favor i en contra


El Projecte Gutenberg per a WordPress representa un canvi substancial. La seva implantació en el nucli del nostre Sistema de Gestió de Continguts suposarà aprendre a crear continguts amb aquesta nova eina.

Però no només açò, tot un mercat que gira al voltant de WordPress, de temes i extensions, s’haurà d’adaptar. Tots els professionals que ofereixen serveis relacionats amb WordPress s’han de preparar. I els usuaris també.

No és estrany que hi hagi opinions contradictòries sobre Gutenberg. Lògicament en els seus inicis el nou editor presenta limitacions que amb el temps s’aniran polint, errors que abans del seu llançament s’hauran de corregir.

Molta feina s’ha fet ja des de la primera aparició de Gutenberg. Però moltes crítiques van des de la manera com es va decidir i anunciar aquest canvi, fins a la seva idoneïtat per a WordPress.

Està clar que per alguns l’arribada de Gutenberg no és cap bona notícia. Imagina’t el panorama. Si tenies un negoci que es basava en resoldre inconvenients de l’editor actual, si Gutenberg les acaba cobrint, t’hauràs de reorientar.

Per altres, com tots els canvis, serà una oportunitat per aprofitar.

Exemples d’inconvenients de Gutenberg

Per exemple no està resolt definitivament el seu ús de forma senzilla amb les entrades de tipus personalitzat.

Un altre dels inconvenients que s’han posat de manifest és que amb Gutenberg encara no es poden utilitzar els enllaços permanents personalitzats. Però en realitat sí que és possible. El problema es presenta si utilitzes una versió de PHP sense actualitzar.  En aquest cas, l’URL de les entrades queda amb el format https://elteudomini.com/?p=123 per defecte i no el pots canviar. Un bon motiu perquè actualitzis a PHP 7 des del panell de control del teu servei d’allotjament.

A Webempresa aquest canvi es fa des del teu cPanel a l’apartat Software > Configurar PHP. Allà pots escollir la versió més actualitzada. Pensa provar-ho primer en una còpia de proves del teu lloc. Comprova que tot funcioni correctament abans d’aplicar-ho al teu lloc en producció. En tot cas, si sorgeixen problemes sempre pots tornar a alguna versió anterior des del mateix cPanel.

Una altra crítica que es fa és que en ocasions es requereixen massa clics per fer una acció que abans només en necessitava un.

Desactivar Gutenberg i mantenir l’editor clàssic


Juntament amb l’extensió per provar Gutenberg, WordPress proveeix d’una extensió que et permet seguir utilitzant l’editor actual.

Aquesta extensió es diu Classic Editor i et permet diferents opcions:

  • Desactivar Gutenberg completament i utilitzar només l’editor actual.
  • Utilitzar Gutenberg per defecte però amb enllaços opcionals per tornar a l’editor clàssic.

Aquesta extensió està pensada per si Gutenberg et genera algun inconvenient en el teu lloc web, com incompatibilitats amb el teu tema o extensions, o per si no estàs preparat per utilitzar-lo. D’aquesta manera podràs actualitzar a WordPress 5.0 i disposar d’un període de transició.

Mentrestant, tampoc té més utilitat. Amb Gutenberg instal·lat com a extensió també pots alternar entre l’editor clàssic i el nou. I si no l’has d’emprar el desinstal·les directament.

Conclusions


No hi ha tornada enrere. Gutenberg arriba, així que comença a provar-lo en algun WordPress de proves. Crea una còpia del teu web i prova les repercussions del nou editor amb el teu tema i les extensions que utilitzes.

Gutenberg transformarà el nostre Sistema de Gestió de Continguts i ja està obligant a adaptar temes, extensions, maquetadors, professionals que ofereixen serveis en WordPress i usuaris.

No esperis a l’últim minut amb l’arribada de l’actualització a WordPress 5.0. Prepara’t com més aviat millor per a poder utilitzar aquesta nova eina al teu lloc.

Altres articles que et poden interessar

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.