Câteva informații despre mine pe care trebuie să le știi la începutul acestui articol eu sunt dezvoltator pe partea WordPress.
Folosesc și alte framework-uri, dar WordPress a fost prima mea interacțiunea mai serioasă cu web development-ul și este încă o parte majoră a proiectelor mele actuale.
Lucrez cu WordPress de peste 10 ani, mult înainte ca Gutenberg să existe. Stack-ul (setul de tehnologii) implicit de proiect s-a schimbat de-a lungul anilor când a venit vorba de site-uri noi create de la zero, nu moștenite.
Stack-ul pentru proiect
În trecut, totul începea cu ACF (Advanced Custom Fields), ca opțiune principală pentru templating și pentru a oferi opțiuni de editare a conținutului.
Prin 2012-2013 nu existau mulți visual builders disponibili pentru WordPress, iar cei care existau erau destul de plini de bug-uri. Cel mai comun era Visual Composer, dacă nu mă înșel (acum s-au despărțit în 2 plugin-uri diferite: Visual Composer și WPBakery).
Stack-ul pentru proiect a început încet-încet să încorporeze visual builders în ultimii ani. În prezent, cea mai utilizată abordare este un hibrid între ACF și visual builders.
Templating cu ACF
Abordarea noastră la început era să creăm întotdeauna template-uri PHP și să le implementăm într-un mod dinamic folosind ACF.
Această abordare a adus multe avantaje pentru noi:
- Un template robust care nu poate fi stricat de client
- Instrucțiuni și detalii clare despre cum poate fi editat conținutul
- Ușurință în dezvoltare odată ce avem layout-urile puse la punct
- Câmpurile „Repeater” din ACF. Aceasta este una dintre cele mai bune funcționalități posibile
- Câmpurile „Flexible Content” din ACF. Acesta este al doilea cel mai bun lucru
- Un singur loc de control pentru conținut și layout.
Aceasta a fost și este încă una dintre abordările mele preferate. Îmi place o implementare mai robustă.
Funcționează bine cu un design finalizat pe care îl poți implementa, îl conectezi la ACF pentru secțiunile pe care vrei să le editezi și gata. Adaugă câteva câmpuri flexibile pentru a permite mutarea secțiunilor în pagini și ești gata.
Cel mai mare dezavantaj este că e cam lent să dezvolți lucruri noi de la zero. Dacă ai nevoie de un landing page cu elemente diferite care există deja, cel mai probabil tot va trebui să editezi/creezi un template și să faci referință la câmpurile ACF pe care vrei să le folosești.
Visual builders
Am folosit Visual Composer, WPBakery, Divi, Elementor, Bricks și urăsc diverse părți la fiecare dintre ele.
Unele erau atât de prost optimizate pe vremuri încât era aproape imposibil să editezi în „modul vizual”, unde puteai vedea schimbările în timp real cu CSS și JavaScript încărcate. Trebuia să intri în modul editor, să te joci cu blocurile de acolo și după aceea să salvezi și să dai previzualizare. Da, tu Divi și Visual Composer.
Lucrurile s-au îmbunătățit cu noile versiuni, dar de multe ori și-au dat seama că structura pentru anumite componente trebuia schimbată și te trezeai că v2 nu e compatibil cu v3, obligându-te să migrezi manual unele dintre elemente în noul format. Asta îmi dădea anxietate când vedeam o nouă lansare de la oricare dintre acești visual builders.
Cred că e cinstit să spun că nu eram un mare fan al lor, dar au un mare avantaj: sunt rapizi pentru construirea de landing page-uri.
Creezi câteva clase implicite pentru a aplica stiluri diferite și te joci cu visual builder-ul pentru a crea rapid un landing page.
Nu toate siteurile sunt complexe. Unii clienți vor câteva pagini cu layout-uri diferite și să poată edita conținutul, culoarea și dimensiunea fontului. Pentru asta erau perfect un visual builder.
Ca o notă aici, marketingul agresiv de la Divi a fost un lucru foarte rău, după părerea mea. Îți spunea clientul: „dar uite reclama asta cât de tare pare, și totul se poate face doar prin drag and drop - nici nu ai nevoie de cod”. Sigur, până când ai nevoie de prima interacțiune complexă pe site.
Abordarea hibridă
În ultimii ani am folosit un visual builder în combinație cu ACF și templating standard.
Ai un tip de postare personalizat (custom post type) care are conținut repetitiv? Folosește templating ACF. Ai pagini unice? Folosește un visual builder.
Pe baza acestui lucru poți începe să construiești structura proiectului. Desigur, există variații, s-ar putea să ai shortcode-uri, s-ar putea să creezi componente personalizate pentru visual builder și așa mai departe.
Gutenberg prima dată
L-am urât. Se vorbea atât de mult despre el și nu știam ce anume va face: este doar un editor de postări sofisticat care să înlocuiască TinyMCE? Este un page builder? Este un editor și manager de template-uri? Era foarte neclar și percepția mea era că nu avea o direcție clară.
Am interacționat scurt cu el și am decis „Nu!” și am instalat Classic Editor de fiecare dată când începeam un proiect nou, doar ca să nu am de-a face cu Gutenberg.
Cu siguranță nu am fost singurul care nu a vrut să aibă de-a face cu el, și încă nu sunt singurul. Classic Editor este unul dintre cele mai instalate și mai bine cotate plugin-uri de pe platformă.
Pe lângă asta, documentația era greu de înțeles. Lipseau bucăți din documentația oficială, le găseai pe repo dar nu explicate corect, plus că ideea că folosește React a fost puțin descurajantă pentru mine. Parcursul meu de dezvoltator m-a familiarizat cu VueJS, dar nu cu React.
Una peste alta, dată fiind experiența mea de la acea vreme, nu vedeam de ce aș vrea să folosesc Gutenberg. Nu era la fel de bun ca Elementor, nu la fel de util ca ACF, nu vedeam unde se poate încadra în proiectele mele, care era golul pe care m-ar fi ajutat să-l umplu.
Gutenberg acum
Lucrurile s-au schimbat când am fost la WordCamp România 2024 care a avut loc la Brașov.
Discutând cu lumea, am aflat că unii folosesc o abordare similară cu a noastră (hibridă), oamenii orientați spre marketing care nu sunt programatori merg full pe visual builder, iar o bună parte din restul recomandau Gutenberg.
Erau chiar mulțumiți de el, spunând ce experiență bună este să-l implementezi în proiectul tău acum, în 2024 (momentul evenimentului). Și toate astea fără să încerce să mă convingă să intru într-un cult Gutenberg. A fost mai mult genul „Încearcă-l, s-ar putea să-ți placă mai mult acum.”
Primul proiect Gutenberg
Odată terminat WordCamp-ul, m-am întors acasă și ideea legată de Gutenberg încolțise acolo în mintea mea.
Destul de curând, în decembrie, a apărut un proiect mare și era o refacere totală a unui site existent. Asta însemna că pot șterge totul și pot începe pe curat cum vreau eu.
Ce moment mai bun să încerci ceva ce nu ai mai folosit niciodată?
Folosind Gutenberg poți merge pe:
- o abordare hibridă: folosești templating-ul PHP standard și ai blocuri pentru a defini conținutul din acele template-uri.
- SAU poți merge pe FSE (Full Site Editing) care te scapă de template-urile PHP și folosești blocuri pentru toate părțile site-ului, inclusiv template-uri.
Eu am mers pe FSE, pentru că am simțit că mă va ajuta să învăț mai multe despre Gutenberg în acest fel. Și am avut dreptate.
Nu voi intra în detalii despre cum am abordat proiectul (poate într-o altă postare), dar odată ce m-am prins cum stă treaba și am creat structura pentru unele dintre componente, totul a mers destul de ușor.
Este o plăcere să creezi blocuri care fac lucruri specifice și să vezi cât de ușor este să le refolosești în diferite părți ale proiectului tău, să le combini cu alte blocuri existente în „patterns” (modele), să salvezi acele modele și să le aplici sincronizat sau individual.
Aș zice chiar că sunt prea multe opțiuni legat de cum poți aborda construirea a ceva cu Gutenberg.
Ce mi-ar plăcea să aibă Gutenberg
Controale responsive. Controale pentru diferite dimensiuni de viewport (mobil) în mod implicit.
Știu că există în documentație și le poți implementa în blocurile tale și să oferi control blocurilor pentru diferite dimensiuni de viewport. Dar aș vrea ca această funcționalitate să fie implementată în elementele implicite pe care le ai de la Gutenberg: grup, titlu (heading), coloane etc.
Să-mi ofere opțiunea de a controla padding-ul, marginile, dimensiunea fontului pe baza diferitelor viewport-uri chiar acolo în Editor ar fi perfect. Chiar dacă e dezactivat implicit și ar trebui să-l activezi cumva manual.
Momentan trebuie să improvizezi din cauza acestei lipse de control din Editor folosind clase CSS.
Concluzie
Îmi place!
Este un instrument bun de avut în portofoliu. Are o curbă de învățare abruptă și există o mulțime de opțiuni pentru a obține același lucru, dar odată ce te-ai decis asupra direcției în care vrei să mergi, devine ușor de implementat.
Vreau să-i mulțumesc lui Róbert pentru că mi-a dat niște sfaturi foarte utile despre cum să încep acest proiect folosind Gutenberg, și de asemenea să menționez o resursă online excelentă pentru FSE, care este Full Site Editing.
Răspunde la acest articol pe email