„Gutenberg” este un nume de cod pentru o nouă paradigmă de creare cu WordPress, care își propune să revoluționeze întreaga experiență de publicare la fel de mult cum a făcut Johannes Gutenberg cuvântul tipărit. Proiectul urmează un proces în patru faze care va atinge părți majore ale WordPress - Editare, Personalizare, Colaborare și Multilingv.
Dacă ai o instalare nouă de WordPress (de la 5.x), vei beneficia de editorul Gutenberg direct în articole și pagini. Îți recomand să aduci la zi versiunea de WordPress ca să beneficiezi de toate îmbunătățirile aduse de-a lungul timpului. Apoi să te asiguri că poți folosi blocurile.
Blocurile pentru elementele obișnuite dintr-o pagină web sunt ușor de folosit. Dar sunt și blocuri pe care trebuie să le înțelegi funcționalitatea, de exemplu, coloanele grupate. Citește mai departe și vei afla detalii despre blocuri.
După cum vezi în imaginea de mai sus, ecranul conține 3 elemente:
bara de instrumente de sus,
zona centrală care va fi populată cu blocuri,
bara din dreapta ce conține elementele articolului și a blocurilor.
Înainte de a insera primul bloc, adaugă titlul. Îl poți modifica mai târziu, dacă te răzgândești.
Apoi adaugă un bloc paragraf. Pur și simplu începi să scrii sub titlu.
Dacă vrei să adaugi alt tip de bloc, de exemplu un subtitlu, o poți face în mai multe moduri:
tastează caracterul / și se va deschide o fereastră cu cele mai uzuale blocuri de unde poți alege,
dă click pe plusul pe fond negru din dreapta și se va deschide o fereastră cu un câmp de căutare de unde poți găsi blocuri,
la început, până cunoști blocurile, este bine să le aduci din bara de instrumente de sus; dă click pe plusul pe fond albastru și se va deschide o coloană cu toate blocurile și modelele existente în editor.
Modelele sunt grupuri de blocuri create pentru a mări viteza de construire a unei pagini. Dă click pe Modele, alege unul și apoi dă click pe el pentru a se insera în pagină. După aceea modifică textele, imaginile și culorile în funcție de cerințele site-ului tău.
Iau ca exemplu meniul contextual al blocului paragraf.
prima iconiță ne spune ce bloc este și ne permite să modificăm tipul de bloc,
a doua iconiță este un mâner de care tragi blocul pentru a-l muta în altă locație
Săgețile sus-jos permit mutarea în sus sau în jos a blocului, sărind peste blocurile de deasupra sau dedesubt
a patra iconiță permite alinerea textului la stânga, pe centru sau la dreapta
B - bold sau aldin, permite îngroșarea textului selectat (CTRL+B)
I - italic sau cursiv, permite înclinarea textului selectat (CTRL+I)
următoarea iconiță permite inserarea unui link pe o selecția de text (CTRL+K); după ce se deschide fereastra, adaugă link-ul și apasă săgeata din dreapta,
săgeată în jos - afișează mai multe unelte pentru blocuri; pentru paragraf sunt 8, te las să le descoperi,
ultima iconiță, reprezentată de cele 3 puncte verticale, are diverse funcții comune tuturor blocurilor. Vezi în imaginea de mai sus ce funcții conține fereastra deschisă.
Din partea dreaptă a ecranului putem accesa elemente ce țin de articol: stare și vizibilitate, autor, legătură permanentă, categorii, etichete, imagine reprezentativă, rezumat și discuții. Tot de aici se accesează elementele și atributele unui bloc. În cazul blocului paragraf acestea sunt:
Paragraf - tipul de bloc cu textul "începe cu blocul de bază pentru construirea întregii narațiuni".
Culoare - modificarea culorii textului și a fundalului. Pentru fundal se poate aplica un gradient creat din mai multe culori.
Tipografice - dacă dai click pe funcțiile de acolo, acestea se vor bifa, iar mai jos vei vedea ce să alegi.
Dimensiune implicită / personalizată - de aici alegi o dimensiune implicită a fontului selecției text, iar dacă dai click pe iconița din dreapta, poți să introduci tu o cifră a dimensiunii cu unitate de măsură px, em, rem. Ca să schimbi unitatea dă click pe px.
Fiecare bloc are atributele sale, le vei descoperi pe măsură ce le folosești.
În a doua fază a proiectului Gutenberg, se folosesc blocurile pentru a crea elementele paginii web:
header cu logo, meniu de navigare, câmp căutare
footer - simplu doar cu copyright sau complex cu coloane și link-uri utile, sigle etc.
prima pagină, pagina de căutare, pagina 404, pagină arhive, pagină articol
Pentru a modifica toate acestea, trebuie să instalezi o temă compatibilă cu editarea întregului site (Full Site Edit).
Temele implicite Twenty Twenty-Two și Twenty Twenty-Three sunt compatibile FSE. Dacă activezi una din ele, vei avea surpriza să nu mai găsești meniul în Aspect și nici Piesele. Asta pentru că meniul îl poți crea din Editare cu ajutorul unui bloc. Iar piesele sunt înlocuite tot cu blocuri.
Deocamdată, FSE mai are probleme, chiar este o etichetă roșie cu textul beta pe link-ul Edit. Editarea completă a site-ului reprezintă noua viziune a WordPress, una care are potențialul de a-l face chiar mai cunoscut decât este deja. Totuși nu cred că va fi adoptat în masă rapid. Au trecut deja 4 ani și blocurile nu sunt agreate în totalitate.
Dacă ești nou în ecosistemul WordPress îți recomand să încerci temele compatibile FSE, ca să te familiarizezi cu ele. Pe site-ul wordpress.org sunt peste 320 de teme compatibile FSE.
În librăria wordpress.org, la pluginuri beta, găsești pluginul Gutenberg. Toate îmbunătățirile se fac pe acest plugin și după ce se testează în comunitate, se integrează în codul WordPress. Fiecare versiune nouă a platformei conține cod îmbunătățit.
Nu este nevoie să instalezi pluginul, dar dacă vrei să testezi ultimele modificări, atunci îl poți instala pe un site de test.
În imaginea de mai sus vezi editorul pentru șabloanele din site. Șabloanele în versiunile clasice există în tema activă și necesită programare ca să le creezi.
Cu editorul Gutenberg și cu o temă compatibilă FSE, creezi aceste șabloane prin intermediul blocurilor. Deja poți face asta, dar te atenționez că încă nu este un proces lin. Mai sunt lucruri de îmbunătățit.
Ca de fiecare dată când apare ceva nou în WordPress, așa și acum au început să apară teme și pluginuri compatibile cu Gutenberg. Unele teme nu sunt compatibile FSE, altele sunt.
Cele mai multe sunt pluginurile care suplinesc limitările blocurilor native. Aceste pluginuri vin adesea și cu șabloane foarte bine create ca design. Deoarece Gutenberg este creat cu tehnologii moderne (REACT), pagina se încarcă foarte repede. Iar asta contează foarte mult pentru utilizatori dar și pentru indexarea și poziționarea în motoarele de căutare.
Hai să vedem câteva din temele și pluginurile compatibile FSE.
Teme
Twenty Twenty-Three - tema implicită WordPress de la versiunea 6.1. Este ca o pânză albă ce așteaptă să fie pictată și este potrivită pentru orice tip de site. Include 10 variații diverse de stil create de membrii comunității WordPress.
Twenty Twenty-Two - tema implicită WordPress de la versiunea 5.9. Are un stil unic, cu culori din natură și este potrivită pentru orice tip de site. Vine cu foarte multe modele ce permit crearea de pagini cu structuri complexe.
Tove - este o temă multifuncțională plină de culoare, construită în întregime în jurul Editării complete a site-ului. Este proiectat ținând cont de cafenele și restaurante, dar se poate adapta cu ușurință pentru orice tip de site web. Tove reunește peste 40 de modele de bloc, inclusiv șase modele diferite de antet și șapte modele diferite de subsol. Este printre primele teme FSE.
Zeever - o temă gratuită, responsivă, cu un stil interesant, de culoare închisă, compatibilă cu pluginul Gutenverse.
Smartcube - temă creată pentru site de știri sau revistă online. Are mai multe modele de blocuri cu care creezi ușor paginile așa cum le dorești.
Bricsy - o temă gratuită, pentru a crea un blog, cu 51 de modele. Are și o variantă premium, fiind creată de Anariel Design, ca și tema Basti.
Basti - o temă premium creată pentru WooCommerce. Are 4 stiluri și diverse block patterns pe care le poți folosi în toate paginile site-ului, nu numai în magazinul online.
Pluginuri
Extendify - este o platformă de instrumente de design și creare a site-urilor, cu o bibliotecă de modele și machete de pagină completă pentru editorul de blocuri Gutenberg. Vine în versiunea gratuită, cât și în versiunea premium. Blocurile și machetele de pagină te ajută să creezi rapid un site, fără să știi programare sau design.
EditorsKit - oferă un set de opțiuni de bloc de construcție a paginii și un set de instrumente pentru noul editor Gutenberg. Blocurile au formate de text, stil și flux de lucru prin simpla utilizare a instrumentelor furnizate de pluginul EditorsKit.
GenerateBlocks - funcționează mână în mână cu tema GeneratePress, dar autorul afirmă că orice temă este instalată pe site va fi compatibilă cu acest plugin. Aceasta este varianta gratuită dar există și varianta PRO.
Kadence Blocks - funcționează cel mai bine cu tema KadenceWP gratuită, dar poate fi utilizat și dacă site-ul are altă temă instalată. Extinde editorul Gutenberg cu blocuri bine create ca design, dar și ca performanță și accesibilitate. Încarcă doar fișierele necesare blocurilor utilizate în pagină, astfel ca pagina să se încarce cât mai rapid. Am apreciat că unul din blocuri este tip formular, așa că nu ai nevoie de alt plugin pentru formularul de contact. Pentru unele site-uri am creat și formulare complexe cu acest bloc.
Dacă ești la început cu WordPress sau doar utilizator ocazional, cred că nu e timpul să treci la editarea întregului site cu Gutenberg. Cel mai bine este să folosești teme care suportă editorul Gutenberg dar și meniul clasic.
Poți să faci trecerea la FSE dacă vrei să ai un site simplu sau un blog și ești o persoană puțin mai tehnică. Sau înarmează-te cu multă răbdare și încearcă să înțelegi noua paradigmă de creare site-uri cu temele FSE.
Dacă ai nevoie să înțelegi Gutenberg, am creat un curs premium pentru utilizarea sa în mod creativ. În prima parte din curs îți explic Gutenberg și cum să creezi pagini de blog cu mai multe elemente care evidențiază mesajul. În a doua parte, voi crea un site de prezentare cu pagini complexe create doar cu Gutenberg și o temă clasică. În ultima parte îți arăt cum folosești ultima temă implicită Twenty Twenty-Three.