Cum sa folosesti editorul Gutenberg

Ce este editorul Gutenberg 

Gutenberg este noul editor de la WordPress cu care poti crea si edita atat pagini, cat si articole. Este bazat pe blocuri care contin diverse elemente. Acest editor a aparut la versiunea 5.0 de la WordPress. Pentru cei atehnici, poate parea un editor complicat, mai ales in comparatie cu cel clasic care semana foarte mult cu un editor de text.

Practic, Gutenberg a inlocuit editorul clasic, care poate fi pus inapoi daca folosesti pluginul Classic Editor. Pentru cei familiarizati cu suita Office de la Windows sau cu una dintre alternativele sale gratuite, Classic Editor era extrem de usor de folosit. Insa din anul 2022, WordPress nu va mai suporta deloc Classic Editor.

Ca si functionalitate, atat Gutenberg cat si Classic Editor fac acelasi lucru. Ambele te ajuta sa creezi continut fara sa codezi.

Acum, Gutenberg este noul editor implicit WordPress. Este asemanator cu builderele moderne, datorita blocurilor sale. Are functionalitati mai intuitive decat editorul clasic si poti crea continut bogat. Suporta adaugiri suplimentare si poate sa se ridice chiar si la nivelul constructoarelor de site-uri cum ar fi Elementor sau Divi.

Cum sa creezi un articol WordPress cu Gutenberg

Pentru inceput, trebuie sa te loghezi in panoul de WordPress unde mergi in aceeasi zona unde mergeai si inainte si anume la Posts si Add New. Vei vedea interfata Gutenberg in locul editorului clasic.

In zona de titlu, scrii titlul. Acesta automat va forma si  link-ul articolului pe care il poti edita daca apesi butonul Edit.

Dupa ce ai adaugat titlu, este timpul sa adaugi si continutul. Fie scrii direct text fie alegi un bloc. Fiecare iconita te ajuta sa faci un anumit lucru.

1. Poti converti blocul de paragraf in orice alt bloc cum ar fi imagine, titlu, galerie, formular si altele;
2. Poti folosi aceasta scurtatura pentru a schimba blocul de paragraf in unul de imagine;
3. Poti schimba blocul de paragraf cu un bloc de titlu de tip H2, H3 sau H4;
4. Schimba blocul de paragraf cu un bloc de imagine tip coperta.

Odata ce adaugi text, va aparea si bara de stilizare a textului, asemanatoare cu cea din Editorul Clasic.

Cu ajutorul acestei zone poti sa:

• Convertesti un pragraf intr-un citat, intr-o lista, in text cod, intr-un vers sau intr-un text preformatat;
• Ingrosi, tai, inclini sau subliniezi textul;
• Aliniezi in stanga, dreapta, centru sau justify textul;
• Adaugi un link care sa deschida in fereastra noua;
• Adaugi o imagine inauntru;
• Ascunzi setarile blocului;
• Clonezi blocul;
• Introduci inainte sau dupa un alt bloc cum ar fi unul de imagine tip coperta;
• Editezi blocul ca si HTML;
• Adaugi blocul la blocuri reutilizabile pentru a-l folosi si in alte articole;
• Stergi blocul.

Poti sa modifici si mai mult blocul de paragraf folosindu-te de optiunile din dreapta.

1. Apasa acest buton pentru a vedea toate optiunile de setari pentru blocul respectiv;
2. Alege marimea fontului si activeaza majuscula mare;
3. Adauga o culoare la fundalul blocului. Poti sa adaugi culoare si textului;
4. Poti adauga cod CSS personalizat in aceasta zona;
5. Vezi modificarile suferite.

Bara laterala din Gutenberg

Daca apesi pe butonul Document din dreapta, vei avea acces la bara de optiuni a articolului.

Iata ce poti face in aceasta zona:

1. Aici apesi sa vezi optiunile generale;
2. Aici poti sa programezi un articol, sa il setezi vizibil doar pentru tine si sa ii setezi statusul. Tot aici, poti si sa faci articolul lipicios sau sa alegi formatul;
3. Aici editezi link-ul articolului;
4. Selectezi mai multe categorii sau creezi unele noi;
5. Adaugi taguri;
6. Setezi imaginea reprezentativa;
7. Creezi un rezumat manual;
8. Activezi comentariile.

Dupa cum vezi, ai foarte multe optiuni si trebuie neaparat sa te pregatesti inainte de a publica un articol.

Adaugarea de imagini in Gutenberg

Se spune ca o imagine face cat 1000 de cuvinte. Iar un articol de blog fara imagini nu este ceea ce trebuie. Daca vrei sa adaugi imagini cu Gutenberg, ai la dispozitie cateva optiuni:

1. Poti adauga un nou bloc, apasand pe plus. De aici, adaugi direct o imagine;
2. Si de aici poti adauga o imagine;
3. La aceasta iconita poti adauga o imagine de tip coperta ( de obicei, sunt imagini mari pe care poti adauga text). Aceste imagini vor fi in fundalul blocului.

Odata ce ai apasa oricare dintre aceste optiuni, vei primi instructiuni de incarcare a imaginilor. Poti sa le incarci din calculator, din Libraria Media sau de pe un URL. Odata cu imaginea, poti adauga alt text (foarte importat pentru SEO), descriere si titlu.

Vei observa ca fereastra de incarcare a fisierelor media este la fel ca si inainte. Aceasta fereastra nu face parte din editorul WordPress si de aceea nu a fost modificat. Odata ce ai adaugat o imagine, Gutenberg adauga si un bloc paragraf dupa el.

Adaugarea de blocuri

Poti sa adaugi fisiere disponibile pentru descarcare foarte rapid cu ajutorul acestui nou editor. Alege direct blocul File, dupa ce ai apasat pe plus. Aici vei avea din nou optiunile de incarcare ca si la imagine. Odata ce ai adaugat fisierul descarcabil, Gutenberg adauga automat un buton specific. Poti adauga si o clasa CSS pentru a modifica si mai mult aceasta zona.

Blocul pentru citate este si el disponibil si poti sa il adaugi rapid. Uita-te in dreapta dupa stilurile acestui bloc. Pentru a scrie citatul, pur si simplu scrie ceva direct in bloc.

In cazul elementelor media de tip embed cum ar fi clipuri de pe Vimeo, Youtube, continut de pe FaceBook, SoundCloud, Slideshare si asa mai departe, alege blocul Embeds. Dupa care alege site-ul de unde vrei sa preiei datele si adauga link-ul catre continutul respectiv. Vei observa si o previzualizare a acestui continut.

Daca vrei sa adaugi un buton, foloseste blocul Button, iar in cazul coloanelor, blocul Columns. Implicit, editorul adauga doua coloane.

Daca vrei sa adaugi imagine langa un text, foloseste blocul Media & Text. Zona de editare se va imparti in doua coloane, una cu imagine si una cu text.

Alte blocuri interesante

Spre deosebire de editorul clasic, Gutenberg suporta adaugiri si blocuri din alte pluginuri. Cele mai populare exemple ar fi WooCommerce, Jetpack si Yoast SEO. Cu pluginul WooCommerce, poti adauga blocuri ce tin de magazinul online.

Printre alte blocuri notabile, mentionam si:

• piesele (widgets);
• codurile scurte (shortcodes);
• editorul clasic (ca si bloc);
• mai multe (cunoscut ca si linkul mai multe);
• pauza de pagina;
• separator;
• galerii;
• tabele;
• clip audio si video HTML5.

Scuraturi de tastatura

Trebuie sa stii ca Gutenberg suporta si scurtaturi de tastatura. Ca sa vezi toata lista foloseste scurtatura SHIFT + ALT + H in Windows sau OPT + CTRL + H pe Mac.

Ce sunt blocurile Gutenberg 

Editorul a aparut in Decembrie 2018 si este cunoscut ca si editor de blocuri. Acesta livreaza o noua metoda modulara de creare a continutului. Nu folosesti cod scris, ci folosesti blocuri de continut. De exemplu, poti sa schimbi rapid intre blocul de text si cel video sau tabel. Este o evolutie pe care alte pluginuri deja au adoptat-o de ceva timp.

Daca deja ai facut actualizari la WordPress, asa cum si trebuia, vei vedea ca interfata este diferita incepand de la versiunea 5.0. In stanga si in dreapta ecranului, lucrurile pot fi la fel, dar in centru, editorul s-a schimbat in totalitate. Inainte de actualizare aveai un spatiu alb foarte mare unde pur si simplu scriai articolul asa cum scrii o scrisoare reala. Acum ai sectiuni goale, mai mici si cu optiuni pentru a pune diferite blocuri. Si meniul din dreapta se va schimba in functie de ce blocuri ai ales sa pui. Meniul este unul dinamic. La inceput, pare cel clasic cu setarile generale, dar va afisa si optiunile blocului in prelucrare.

Poti modifica fiecare bloc dupa cum doresti si cu siguranta, poti sa te adancesti mai mult in setarile disponibile. Ai foarte multa libertate in ceea ce priveste controlul si design-ul blocurilor.

Chiar daca design-ul zonei de editare a fost modificat, este inca similar cu cel clasic. Astfel ca poti foarte usor sa adaugi titlu si continut chiar daca nu cunosti sistemul de blocuri. Dezvoltatorii au creat o platforma de management al continutului usor de folosit care are si functionalitati avansate. Este ideal pentru bloggeri ocazionali si cei noi in WordPress. Poti crea o pagina in cateva minute folosind doar optiunile implicite. Totul este preformatat si are nevoie doar de continut si de publicarea sa.

Poti adauga rapid anumite elemente daca:

• apesi butonul de plus pentru a adauga un bloc nou (asa cum am scris si in articolul trecut);
• apesi pe butonul H pentru a adauga titluri;
• alegi iconita de lista panteu a adauga o lista;
• adaugi iconita de imagine pentru a adauga o imagine.

Cele mai bune pluginuri pentru Gutenberg

Blocurile standard de la Gutenberg vin cu blocuri de baza pe care le poti folosi oricand. Acestea vin direct din WordPress. Totusi, exista dezvoltatori si companii care au dezvoltat pluginuri separate care adauga blocuri la Gutenberg. Sunt zeci de astfel de pluginuri. Iata preferatele noastre:

• Toolset Blocks
• Ultimate Blocks 
• Gutenberg Blocks – Ultimate Addons for Gutenberg
• Advanced Gutenberg
• Stackable Gutenberg Blocks
• Atomic Blocks

Majoritatea sunt gratutie, dar sunt si cateva cu plata sau care au ambele variante disponibile. Toate se instaleaza in acelasi mod cum ai instala un plugin normal.

Toolset Blocks

Unul dintre cele mai favorite pluginuri pentru Gutenberg este Toolset. Este un plugin cu plata care arata ca uneori este mai bine sa platesti pentru calitate. Blocurile includ cpt-uri (custom post types), taxonomie personalizata, campuri personalizate, vizualizari, paginatie, template-uri, blocuri Ajax, WooCommerce, formulare si altele. Pe langa toate acestea mai are si scrol infinit, metode de plata si control. 

Poti genera continut dinamic fara sa cunosti cod PHP. Poti lega continut din WordPress oriunde vrei tu. 

Iata cateva exemple:

• Creezi titluri bazate pe link-uri;
• Setezi textul butoanelor din campuri personalizate;
• Setezi sursele imaginilor pentru campuri personalizate.

Ultimate Blocks

Foarte folosit de catre bloggeri, pluginul este gratuit si contine o selectie folositoare de blocuri. Acesta este util si afacerilor mici, magazinelor online, marketerilor si tuturor celor care vor sa aibe continut evidentiat. 

Blocurile contin: recenzii, cuprins, butoane CTA, slidere, testimoniale, filtre, timere, bari de progres, ratinguri si multe altele. Dezvoltatorii spun ca vor mai adauga blocuri noi. 

Ultimate Blocks are si un manager de blocuri care usureaza folosirea sa si care te lasa sa dezactivezi blocurile pe care nu le folosesti. Astfel poti rapid sa faci pagina dorita sa arate asa cum ai visat mereu.

Gutenberg Blocks – Ultimate Addons for Gutenberg

Am discutat despre tema Astra care este foarte compatibila cu builderul Elementor. Acelasi dezvoltator a creat si acest plugin pentru Gutenberg. Pluginul este gratuit si ofera posibilitatea de personalizare. Toate sunt compatibile cu Astra.

Blocurile din plugin sunt info-casute, butoane, titluri avansate, blocuri de echipe, preturi, testimoniale, liste de iconite, formulare, citate, harti si altele.

Dezvoltatorii spun ca toate blocurile sunt optimizate si ajuta la incarcarea rapida a site-ului.

Advanced Gutenberg

Advanced Gutenberg de la Joom United adauga peste 20 de blocuri gratuite pentru Gutenberg. Vei gasi atat blocuri de baza cum ar fi coloane sau titluri, dar si blocuri mai avansate. Interfata este una minimalistica si usor de folosit.

Printre blocuri amintim: profile de autor, blocuri de cod CSS personalizat, WooCommerce, butoane avansate, formulare de contact, liste avansate, harti, testimoniale. Mai gasim si formulare de inregistrare si autentificare, blocuri de imagine si video, blocuri de distribuire si Lightbox.

Fiecare bloc se integreaza frumos in pagina fara sa iti dai seama ca ele nu apartin de Gutenberg. Poti sa modifici culori, identare, marime si alinierea continutului.

Stackable Gutenberg Blocks

Foarte multe blocuri folositoare gasim in acest plugin. Majoritatea sunt gratuite, dar dezvoltatorul ofera si cateva cu plata.

Blocurile gratuite sunt: carduri, antete, video popup-uri, blocuri de notificare, dividere, spatii, liste si altele. Sunt 23 la numar.

Stackable este un sistem modular si prin urmare poti adauga blocuri pe masura ce ai nevoie de ele.

Atomic Blocks

Ultimul plugin prezentat de noi este Atomic Blocks. Acesta vine cu 15 blocuri gratuite.

Printre cele mai populare blocuri ale sale mentionam testimonialele, newslettere, coloane, iconite, profile de autor si butoane. 

Pluginul vine si cu cateva teme care sunt gratuite in mare parte. Poti personaliza designul folosindu-te de un meniu avansat. Printre optiunile sale ai culoare, pozitionare si opacitate.