Integrar el Gutenberg #28

Closed
opened 2023-08-02 20:05:09 +00:00 by jfita · 1 comment
Owner
No description provided.
Author
Owner

He tingut problemes amb el Gutenberg.

Hem trobat que quan s’editen les opcions d’un paràgraf, si s’escull una de les opcions de mida de lletra predefinits s’envia el formulari al servidor, com si s’hagués premut a submit; i a l’escollir una mida de font personalitzada el bloc de paràgraf peta i desapareix el contingut, deixant un missatge d’error de bloc.

Lo que envia el formulari al prèmer botons és perquè els de Gutenberg no canceŀlen l’acció per defecte d’alguns <button> i, a l’estar a dins un <form>, el navegador ho interpreta com un submit. Aquest el podria arreglar movent l’editor fora del <form>.

Lo de la mida en píxels és més problemàtic. Resulta que el Gutenberg no és una sola biblioteca monolítica, sinó que és més un conjunt força gran de biblioteques que fan una tasca concreta. En aquest cas, resulta que la biblioteca que canvia la tipografia dels blocs s’espera que se li passi la mida de la font com es faria amb CSS, amb valor i unitats (p. ex., 12px o 1em), però el paràgraf, que és a una biblioteca diferent, li passa només el valor sense unitats, assumint que les unitats són sempre píxels. D‘aquí l’error.

Si ens fixem amb el bloc de paràgraf del WordPress 6.3, veiem que el selector de mida personalitzada és diferent: et deixa escollir les unitats i internament ho passa com es faria amb CSS, pel que no falla. Això deu voler dir que les biblioquetes de la tipografia i la del paràgrafs que fa servir l’Isolated Block Editor, que és una altra biblioteca que ajunta les del Gutenberg entre elles per posar-ho tot en un, no es «corresponen»: una deu ser més nova que l’altra i s’esperen coses diferents.

Ja tenia el codi de l’Isolated Block Editor descarregat per trobar el problema, pel que he intentat actualitzar les versions de les biblioteques. Sabia que actualitzant-ho tot no funcionaria, perquè amb altres proves anteriors vaig tenir problemes, pel que he intentat actualitzar només la biblioteca del paràgraf, que sigui la mateixa que porta el WordPress amb el selector d’unitats. Malgrat que suposada és la mateixa versió «major», pel que hauria de ser compatible, després d’actualitzar no em registrava bé el bloc de paràgraf perquè necessitava actualitzar la biblioteca que registra blocs de Gutenberg. OK, he actualitzat aquesta i després em fallava perquè havia d’actualitzar-ne una tercera que es fa servir per guardar l’estat dels blocs. D’acord, la he actualitzada també i després m’ha deixat de registrar l’estat de l’Isolated Block Editor, que té un estat per cada instància, ja que pots tenir més d’un editor a la mateixa pàgina, i fa un «subregistre», perquè… a saber per què. Jo aquí ja he abandonat.

Els de Gutenberg diuen que segueixen el «versionat semàntic», que obliga a canviar la versió «major» si s’introdueixen incompatibilitats, però és obvi que s’ho passen per allà on els hi va bé i com que, en realitat, ells són els únics que fan servir totes les biblioteques per crear el paquet de WordPress, ningú es queixa perquè ningú ho veurà.

He estat mirant si hi havien alternatives de codi obert.

D’editors de blocs n’hi han, però la gran majoria són per editar el contingut d’entrades, pel que no tenen ni carrusels ni columnes ni res per l’estil; no editen el layout.

Els CraftJS semblava una opció vàlida, fins que he trobat que no pot generar HTML. Algú em pot explicar de què nassos serveix un editor de pàgines web que no sap escriure HTML? Aparentment, és per desenvolupadors «moderns» que ho fan tot amb biblioteques JavaScript sense preocupar-se gens del refotut codi infumable que genera per sota.

Al final m’he «decidit» a provar el GrapesJS. No és que hagi trobat més opcions.

No m’entusias-me perquè s’assembla molt més a l’oxygen que no al Gutenberg i et deixa editar el CSS, que suposo deus haver de carregar amb tota la pàgina, perquè qui deu voler tenir un estil CSS compartit per totes les pàgines quan pots tenir codi pàgina per pàgina? A més, té un bloc de «text» que no se sap si és paràgraf o capçalera o llista o què, perquè no és cap d’ells: és un <div> amb text a dins. La mateixa mentalitat que els desenvolupadors «moderns» de JavaScript.

Tanmateix, pots ignorar completament la part de disseny CSS i he substituït el seu «editor enriquit» que pots fer negreta i cursiva —i prou— pel CKeditor, que allà sí li pots dir si vols capçaleres, paràgrafs o què. En certa manera el «text» ara és com un editor HTML de l’ACF que el pots posar dins de columnes i demés, que mira, hi han coses pitjors.

Finalment, tanmateix, hem vist que el GrapesJS no ens serveix per nosaltres: és massa complicat perquè l’usuari final pugui editar ell mateix les pàgines, i no és prou per dissenyar nosaltres les pàgines.

Hem acabat decidint no fer servir cap editor HTML en blocs, farem el disseny amb un programa extern, el passarem a plantilles de Go i després agafarem les dades que calguin de la base de dades «per separat» i les coŀlocarem a on toca a la plantilla.

He tingut problemes amb el Gutenberg. Hem trobat que quan s’editen les opcions d’un paràgraf, si s’escull una de les opcions de mida de lletra predefinits s’envia el formulari al servidor, com si s’hagués premut a `submit`; i a l’escollir una mida de font personalitzada el bloc de paràgraf peta i desapareix el contingut, deixant un missatge d’error de bloc. Lo que envia el formulari al prèmer botons és perquè els de Gutenberg no canceŀlen l’acció per defecte **d’alguns** `<button>` i, a l’estar a dins un `<form>`, el navegador ho interpreta com un _submit_. Aquest el podria arreglar movent l’editor fora del `<form>`. Lo de la mida en píxels és més problemàtic. Resulta que el Gutenberg no és una sola biblioteca monolítica, sinó que és més un conjunt força gran de biblioteques que fan una tasca concreta. En aquest cas, resulta que la biblioteca que canvia la tipografia dels blocs s’espera que se li passi la mida de la font com es faria amb CSS, amb valor i unitats (p. ex., `12px` o `1em`), però el paràgraf, que és a una biblioteca diferent, li passa només el valor sense unitats, assumint que les unitats són sempre píxels. D‘aquí l’error. Si ens fixem amb el bloc de paràgraf del WordPress 6.3, veiem que el selector de mida personalitzada és diferent: et deixa escollir les unitats i internament ho passa com es faria amb CSS, pel que no falla. Això deu voler dir que les biblioquetes de la tipografia i la del paràgrafs que fa servir l’Isolated Block Editor, que és _una altra biblioteca_ que ajunta les del Gutenberg entre elles per posar-ho tot en un, no es «corresponen»: una deu ser més nova que l’altra i s’esperen coses diferents. Ja tenia el codi de l’Isolated Block Editor descarregat per trobar el problema, pel que he intentat actualitzar les versions de les biblioteques. Sabia que actualitzant-ho tot no funcionaria, perquè amb altres proves anteriors vaig tenir problemes, pel que he intentat actualitzar només la biblioteca del paràgraf, que sigui la mateixa que porta el WordPress amb el selector d’unitats. Malgrat que suposada és la mateixa versió «major», pel que hauria de ser compatible, després d’actualitzar no em registrava bé el bloc de paràgraf perquè necessitava actualitzar la biblioteca que registra blocs de Gutenberg. OK, he actualitzat aquesta i després em fallava perquè havia d’actualitzar-ne una tercera que es fa servir per guardar l’estat dels blocs. D’acord, la he actualitzada també i després m’ha deixat de registrar l’estat de l’Isolated Block Editor, que té un estat per cada instància, ja que pots tenir més d’un editor a la mateixa pàgina, i fa un «subregistre», perquè… a saber per què. Jo aquí ja he abandonat. Els de Gutenberg diuen que segueixen el «[versionat semàntic](https://semver.org/)», que obliga a canviar la versió «major» si s’introdueixen incompatibilitats, però és obvi que s’ho passen per allà on els hi va bé i com que, en realitat, ells són els únics que fan servir totes les biblioteques per crear el paquet de WordPress, ningú es queixa perquè ningú ho veurà. He estat mirant si hi havien alternatives de codi obert. D’editors de blocs n’hi han, però la gran majoria són per editar el _contingut_ d’entrades, pel que no tenen ni carrusels ni columnes ni res per l’estil; no editen el layout. Els [CraftJS](https://craft.js.org/) semblava una opció vàlida, fins que he trobat que [no pot generar HTML](https://github.com/prevwong/craft.js/issues/42). Algú em pot explicar de què nassos serveix un **editor de pàgines web** que no sap escriure **HTML**? Aparentment, és per desenvolupadors «moderns» que ho fan tot amb biblioteques JavaScript sense preocupar-se gens del refotut codi infumable que genera per sota. Al final m’he «decidit» a provar el [GrapesJS](https://grapesjs.com/). No és que hagi trobat més opcions. No m’entusias-me perquè s’assembla molt més a l’oxygen que no al Gutenberg i et deixa editar el CSS, que suposo deus haver de carregar amb tota la pàgina, perquè qui deu voler tenir un estil CSS compartit per totes les pàgines quan pots tenir codi pàgina per pàgina? A més, té un bloc de «text» que no se sap si és paràgraf o capçalera o llista o què, perquè no és cap d’ells: és un `<div>` amb text a dins. La mateixa mentalitat que els desenvolupadors «moderns» de JavaScript. Tanmateix, pots ignorar completament la part de disseny CSS i he substituït el seu «editor enriquit» que pots fer negreta i cursiva —i prou— pel [CKeditor](https://ckeditor.com/ckeditor-4/), que allà sí li pots dir si vols capçaleres, paràgrafs o què. En certa manera el «text» ara és com un editor HTML de l’ACF que el pots posar dins de columnes i demés, que mira, hi han coses pitjors. Finalment, tanmateix, hem vist que el GrapesJS no ens serveix per nosaltres: és massa complicat perquè l’usuari final pugui editar ell mateix les pàgines, i no és prou per dissenyar nosaltres les pàgines. Hem acabat decidint no fer servir **cap** editor HTML en blocs, farem el disseny amb un programa extern, el passarem a plantilles de Go i després agafarem les dades que calguin de la base de dades «per separat» i les coŀlocarem a on toca a la plantilla.
jfita closed this issue 2023-08-14 18:27:22 +00:00
Sign in to join this conversation.
No Label
No Milestone
No project
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: tandem/campingmontagut#28
No description provided.