Uită-te la WordPress Gutenberg

Noua interfață de editare Gutenberg este o schimbare majoră care vine în WordPress 5 în acest an și va afecta dezvoltatorii plugin-ului WordPress, designerii temelor și creatorii de site-uri Web. 

În acest videoclip vă voi arăta cum să configurați Gutenberg ca un plugin pe site-ul dvs. existent și cum să începeți să utilizați editorul Gutenberg pentru a crea conținut. 

Urmați-vă și veți cunoaște unele dintre noile caracteristici ale lui Gutenberg.

Uită-te la WordPress Gutenberg

 

Introducere în WordPress Gutenberg

Un bun punct de plecare pentru a afla despre Gutenberg se află pe pagina Gutenberg din Codul WordPress. Acesta vă oferă o imagine de ansamblu asupra a ceea ce face Gutenberg și, de asemenea, vă spune cum vă puteți ajuta să-l îmbunătățiți și să construiți viitorul. Puteți face acest lucru trimițând feedback prin intermediul chestionarului de feedback, pe care îl puteți folosi și pentru a solicita sprijin. 

De asemenea, puteți vedea cerințele de testare pentru a testa Gutenberg. Motivul pentru care este important să urmați aceste cerințe este ca testarea fiecăruia să fie coerentă, ajutând echipa care dezvoltă Gutenberg să o facă cât mai bine posibil.

Gutenberg nu este încă parte a programului WordPress, dar va fi într-o lansare viitoare. Rețineți că s-ar putea să se schimbe între timp - în parte din cauza acestui feedback, și parțial din cauza muncii care încă este în curs de desfășurare pentru ao face cât mai bună. Dar, între timp, să aruncăm o privire asupra modului în care îl puteți găsi pe site-ul dvs. chiar acum și vă va oferi o imagine de ansamblu rapidă a ceea ce pare.

Cum se instalează Pluginul Gutenberg 

Felul în care puteți obține Gutenberg chiar acum este prin intermediul unui plugin. Deci, instalați-l în modul obișnuit - mergeți la Plugin-uri> Adăugați noi, căutați "Gutenberg" și când ați găsit-o, faceți clic pe Instaleaza acum și apoi Activati.

Acum că ați instalat pluginul, editorul Gutenberg va fi activ pe site-ul dvs.. 

Cum funcționează Editorul Gutenberg

Voi deschide o postare existentă pe site-ul meu pentru a vă arăta cum arată ecranul de editare post în Gutenberg.

Puteți vedea că acest lucru pare destul de diferit de modul în care a fost obișnuit. Când mă deplasez peste lucruri, icoanele apar cu trei puncte în partea dreaptă, arătându-mi că fiecare element din conținutul meu a devenit un bloc.

Dacă fac clic într-un bloc, am ceva ce pare ceva mai familiar - seamănă cu chiuveta veche a bucătăriei în editorul clasic. Dar puteți vedea că nu ați primit filele pentru vizualizarea codului și vizualizarea normală în partea de sus.

Peste partea dreaptă, am un set ușor diferit de ceea ce fusese metabox, care părea destul de separat în vechiul editor. Acest lucru arată mai mult ca personalizatorul. Deci, dacă ați lucrat cu personalizarea în WordPress, acest aspect vă va fi cunoscut. Puteți să faceți clic pe fiecare poziție pentru a extinde secțiunea corespunzătoare. În general, aceasta face lucrurile un pic mai neted și reduce nevoia de a defila.

Cum să adăugați și să mutați blocuri

Puteți adăuga mai multe blocuri dând clic pe pictograma plus din stânga jos și apare un meniu care vă arată diferitele opțiuni.

Dacă sunteți un utilizator experimentat WordPress - și mai ales dacă sunteți un dezvoltator WordPress - s-ar putea să vă aruncați în mâini în groază la asta. Dar văd cum pentru utilizatorii mai puțin experimentați și pentru cei care sunt mai vizionați, acest lucru va face lucrurile să pară mult mai ușor.

De asemenea, Gutenberg vă ușurează mutarea lucrurilor. Așa că am să creez un bloc de paragrafe din unele dintre conținutul existent din postarea mea. După ce am făcut-o, pot selecta blocurile mele și le mișc în sus și în jos făcând clic pe săgețile din stânga.

Acest lucru vă oferă o mulțime de flexibilitate atunci când vine vorba de a muta lucrurile în jurul site-ului dvs. și de a face cu lucrurile într-un mod care este vizual. 

Lucrul cu liste și cod în Gutenberg

Există și alte tipuri de blocuri. O listă, de exemplu, devine un bloc pe cont propriu. 

Voi începe prin împărțirea conținutului meu existent în blocuri făcând clic pe pictograma de control și selectând Conversia în blocuri din meniul care apare.

Prin urmare, Gutenberg îmi separă titlurile și paragrafele individuale și, de asemenea, creează blocuri separate pentru fiecare listă. Este foarte rapid și ușor să transformi postările existente în conținut compatibil Gutenberg.

Îți amintești de la început, am spus că nu există file în partea de sus pentru vizualizarea textului și pentru vizualizarea codului. În loc de asta, puteți lucra doar la codul pentru un bloc individual. Deci, dacă fac clic pe pictograma de control din dreapta, pot selecta Editați ca HTML. Apoi afișează blocul în vizualizarea codului și pot edita codul în blocul respectiv.

Dacă sunteți ceva de genul meu și ați fost nevoiți să sapi adânc în codul din spatele unui post de lungă durată, poate fi cu adevărat confuz să încercați să găsiți puținul text cu care ați lucrat, deci acest lucru face mult, mult mai ușor de a lucra cu o anumită bucată de cod.

Deci, blocurile fac cu adevărat Gutenberg ceea ce este, și sper că acest lucru ți-a dat un pic de simț pentru blocuri și cum funcționează. Un bloc este în esență echivalent cu un element din codul HTML. Dacă ar trebui să aruncați o privire la marcajul de ieșire pentru fișierul dvs., ați vedea că fiecare dintre acestea a fost la același nivel. Deci, aveți titluri, paragrafe și liste, și toate sunt la același nivel în cadrul HTML-ului dvs.. 

Puteți, de asemenea, să împărțiți și să îmbinați blocurile folosind acel același meniu de control care apare de la pictograma cu cele trei puncte și există și un Anula butonul de sus în partea de sus, care este foarte util. Și cu liste, puteți comuta cu ușurință între diferite niveluri de indentare sau între liste cu marcatori și numerotate, folosind doar meniul de deasupra blocului relevant.

Blocați setările

Acum că mi-am transformat conținutul în blocuri individuale, pot să dau clic pe bloc în bara laterală din dreapta și modificați setările pentru fiecare bloc.

De asemenea, puteți afișa și ascunde bara de instrumente de setări făcând clic pe meniul de comandă de lângă un bloc și selectând Arata setarile avansate sau Ascundeți setările avansate. Dacă o ascundeți, veți obține o experiență de editare frumoasă și curată. 

Concluzie

Așa că vă oferă o privire de ansamblu asupra principalelor lucruri pe care le puteți face cu blocurile din Gutenberg. Puteți adăuga blocuri, schimbați tipul de bloc care este ceva și puteți edita codul de bază. Puteți duplica blocuri, puteți să le îmbinați, le puteți împărți și puteți să le mutați în interiorul documentului. 

Eu nu am folosit Gutenberg pe un set live, dar alergând prin el pentru acest curs ma făcut destul de încântat de felul în care lucrează Gutenberg și cum mă poate ajuta cu editarea propriului meu conținut pe site-ul meu WordPress.

Sper că Gutenberg vă va ajuta și sper că v-ați bucurat de această scurtă trecere în revistă a principalelor sale trăsături.

Aflați WordPress

Aflați cum să utilizați WordPress sau să vă blocați și să învățați dezvoltarea WordPress cu ghidurile complete. Toate cursurile din aceste ghiduri sunt gratuite cu un abonament la Envato Elements. Pentru o taxă lunară redusă, beneficiați de acces nelimitat la biblioteca noastră în creștere de peste 1.000 de cursuri video și cărți electronice de vârf din industria Envato Tuts+. 

În plus, beneficiați acum de descărcări nelimitate de la biblioteca imensă Envato Elements de 500.000 de active creative. Creează cu fonturi, fotografii, grafică și șabloane unice și oferă proiecte mai bune mai rapid.

Cod