Cum sa folosesti editorul Gutenberg partea 1/2

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.