singulars/funcionalitats/wp-react.md

@@ -219,3 +219,13 @@ Els runners de gitlab disposaran de configuració variable en funció de l'entor
 Per últim, s'utilita un sistema de reconeixement de patrons sobre el text del _tag_ per apuntar a un o altre entorn. Els _tags_ del projecte segueixen el patró `v?[0-9]+[.][0-9]+([.][0-9]+)?([-a-z])*`. **Els _tags_ sense sufix s'entenen com a marcas de versió productives, els _tags_ amb el sufix `-staging` s'entenen com a marques de versions per a l'entorn de proves**. La creació de nous _tags_ dispararà l'activació de la _pipeline_ vinculada a un o altre entorn.
 
 La nova pipeline estarà estructurada en una cadena de _jobs_ que segueix el següent fluxe: `test > build > package > upload > release > deploy`. L'últim _job_ de la _pipeline_ és el de desplegament. Aprofitant el sistema de _runners_, s'ha definit una rutina que permet automatizar el desplegament del codi des de Gitlab. Aquest requereix que el procés d'execució conegui la URL on fer la petició i les credencials d'un usuari al sistema de WordPress. Amb aquesta informació accessible a través de les variables d'entorn, **el procés es capaç de connectar-se a WordPress a través d'una connexio HTTP i desplegar l'última versió de codi transpilat**.
+
+## Conflictes d'estils entre WP i MUI
+
+En el nou escenari, React pren el control d'una part parcial del DOM generat per WordPress i renderitza els seus components en ell. Aquesta nova estratègia d'integració entre la web pública i els formularis de la oficina virtual genera un efecte col·lateral que s'ha de controlar a nivell d'estils CSS: **Col·lisions entre els estisl CSS de WordPress i de React**. 
+
+WordPress disposa del seus fulls d'estils que defineixen el comportament visual dels diferents elements HTML de la pàgina. React utilitza una llibreria de components UI –[MUI](https://mui.com/)– que ofereix components amb estils CSS preconfigurats per tal de facilitar i estandarditzar les tàsques de maquetació de l'equip de desenvolupament. Quan fem conviure en un mateix DOM els dos sistemes d'estils CSS ens trobem amb alguns conflictes respecte a com una autoritat i l'altre imposen la representació visual dels elements HTML. Una solució basada en _iframes_ evita aquesta col·lisió al presentar visualment un contingut unificat gestionat internament com dos DOMs independents. Un cop descartada aquesta solució, fa falta resoldre manualment aquests conflictes.
+
+La solució a implementar és la de extendre els fulls d'estils de WordPress per incloure-hi excepcions a les seves directives que resolguin els conflictes de maquetació que s'identifiquin. Per permetre la definició d'aquestes excepcions de forma senzilla, el plugin PHP desenvolupat identifica el node arrel de la aplicació React amb l'ID `#wp-react-root`. Sabem que tots els components de React injectats a través del nou sistema viuran sempre sota un element HTML amb aquest ID. Sabem també que els estils CSS funcionen en cascada jerarquitzada en funció de la [especificitat](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) de les diferents directrius d'estil, i que una directriu basada en un ID sempre té més especificitat que la resta. Així, fent servir l'ID `#wp-react-root` com a component dels selectors CSS ens és fàcil definir directrius d'estils que sobreescriguin el comportament per defecte de les fulles d'estil de WordPress alhora que presentin un domini acotat a la branca del DOM gestionada per React.
+
+En una primera iteració, i degut a que la titularitat del codi de WordPress no pertany a l'equip de desenvolupament que està treballant en aquesta solució, aquesta extensió dels estils de WordPress s'ha fet a través del [panell de personalització de temes](https://somconnexio.hiruu.com/wp-admin/customize.php?return=%2Fwp-admin%2F) de l'administrador de la pàgina. Aquesta solució presenta la desaventatge de guardar el codi CSS a base de dades i ens impedeix fer un control de versions del mateix o utilitzar sistemes automatitzats de linting o de deployment, com sí que es fa amb la resta del codi. En una pròxima iteració, es farà necessari introduir aquests canvis al codi font de la pàgina web.
\ No newline at end of file