WordPress blokovi: Sve što treba da znate

Imate WordPress sajt čija je verzija 5.0 ili novija? Onda su vam sigurno poznati WordPress blokovi za kreiranje sadržaja.

Ukoliko, pak, niste, onda sigurno koristite klasični uređivač i čini vam se komplikovanim da pređete na blokove. Ako se pitate šta su WordPress blokovi, kakvu ulogu vrše i kako ih možete koristiti, odgovore možete naći u ovom članku.

Ukratko, blokovi u WordPress-u su način organizovanja i kreiranja sadržaja.

Kakva je razlika između klasičnog i trenutnog uređivača blokova?

Uređivač blokova je izrađen kao projekat pod imenom Gutenberg. U početnim fazama izrade, uređivač blokova je bio prisutan kao WordPress plugin. Sada je on već čast od jezgra WordPress-a i prilikom nove instalacije predstavlja uređivač sadržaja po podrazumevanju. Klasični uređivač može da se instalira dodatno kao plugin.

Velika razlika između ova dva uređivača, klasičnog i trenutnog, su blokovi. U klasičnom uređivaču sadržaj stranice se kreira u celom jednom bloku, dok kod uređivača blokova sadržaj predstavlja zbir odvojenih blokova.

Paneli sa opcijama u uređivaču blokova

Uređivač blokova u WordPress-u ima nekoliko zona i panela koji sadrže određena podešavanja i opcije. Kako biste se lakše orijentisali u instrukcijama za rad sa blokovima, imajte u vidu mesto i imena panela sa opcijama.

Evo osnovnih panela i zona uređivača blokova:

1. Gornja traka sa instrumentima.
   Gornja traka u uređivaču sadrži osnovne opcije za upravljanje dokumentom.
2. Panel sa blokovima (biblioteka blokova).
   Ovaj panel se nalazi u levom delu uređivača i možemo da ga nazovemo bibliotekom blokova. U panelu se nalaze tri taba sa blokovima (Blocks), šablonima (Patterns) i blokovima za višekratnu upotrebu (Reusable blocks). Panel se otvara putem dugmeta „plus“ iz gornje trake.
3. Panel sa podešavanjima (Settings).
   Ovaj panel se nalazi u desnom delu uređivača i sadrži podešavanja stranice (tab Post) i blokova (tab Block). Panel se prikazuje i sakriva putem dugmeta „zupčanik“ iz gornje trake.
4. Zona za unos sadržaja.
   U ovom centralnom delu uređivača se popunjuje sadržaj stranice.
5. Zona za meta podatke o sadržaju.
   Neki pluginovi koriste ovu zonu kako bi prikazali dodatna podešavanja.
6. Opcije blok uređivača (Options).
   Ovo je meni koji se otvara putem dugmeta „tri tačke“ iz gornje trake. Ovde se opcije odnose za sam uređivač blokova.

Osim ovih panela svaki jedan blok ima svoj panel sa specifičnim opcijama koji se pokazuje iznad samog bloka. Kako bismo ga razlikovali od svih drugih panela, nazvaćemo ga blok-panel.

U ovom članku pričamo uglavnom o sledećim panelima:

1. Gornja traka sa instrumentima
2. Panel s blokovima
3. Panel s podešavanjima
4. Opcije za uređivač blokova, kao i blok-panela

Šta je blok u WordPress-u?

Blok u uređivaču blokova je strukturna jedinica sadržaja u stranici. Blokovi su kontejneri u kojima se sadrže odvojeni delovi celog sadržaja.

Kao i u klasičnom uređivaču, odvojeni delovi sadržaja se predstavljaju putem koda sa određenim HTML tagovima, kao, na primer: paragraf <p>, naslov <h>, spisak <ol> / <ul>, slika <img> i sl. Nema promene u kodu sadržaja u novom uređivaču blokova. Razlika između ovog i klasičnog uređivača je u tome što su ovi odvojeni delovi ograđeni virtuelnim kontejnerom koji nazivamo blokom.

Na primer: paragraf koji je postavljen u kontejner-bloku Paragraph, izgleda ovako:

Što se tiče tehničkog dela, blok je ograđen kodom koji se razume i koristi samo od strane uređivača blokova. Blok počinje sa otvorenim tagom i završava sa zatvorenim. Blok-tagovi sadrže naziv bloka – na primer, osnovni blokovi počinju s wp.

Kada se stranica objavi, ovaj kod nestaje i posetioci nikako ne mogu da vide da je sadržaj izrađen putem odvojenih blokova. Blokovi se vide samo u uređivaču blokova.

Paragraf je jedan od prostijih blokova koji sadrži samo jedan HTML element – p – dok ima drugih blokova koji su kompleksni i mogu da sadrže istovremeno po nekoliko različitih HTML elemenata i odvojenih drugih blokova.

Na primer, blok Media & Text sadrži sliku (img) i jedan ili više blok-paragrafa (wp:paragraph).

Šta vam znači da znate šta predstavljaju blokovi kao kod?

Da znate šta predstavlja blok kao kod može da bude od velikog značenja kada primetite problem sa sadržajem u uređivaču blokova. Prilikom provere koda Code editor (Options » Code editor) možete da proverite da li je sve u redu sa otvorenim i zatvorenim tagom bloka koji pravi problem. Možete čak da uklonite ovakve blokove ako remete predstavljanje sadržaja u uređivaču, a koji ne mogu biti popravljeni putem vizuelnog režima.

Kakvih blokova ima u WordPress-u?

Svi standardni elementi sadržaja predstavljaju blok (paragraf, naslov, spisak i sl.). Uređivač blokova ima iznad 30 bloka tekstualnih podataka, medija, dizajna, vidžeta i umetnutog sadržaja spoljašnjeg izvora.

Evo i malog dela blokova, odvojenih na osnovu tipa informacije koje sadrže i njihove funkcionalnosti. U zagradi nakon imena nekih od blokova je postavljen HTML tag koji sadrže. Kompleksni blokovi sadrže nekoliko vida sadržaja (HTML tagovi).

Tekst:

• Paragraph – Paragraf (p). Ovo je osnovni blok u uređivaču. Svaki novi red automatski se kreira kao paragraf. Od ovog bloka možete da dodate druge blokove.
• Heading – Naslov (h). Blok za naslov sa opcijama za različite nivoe (h2, h3, h4..). Blok-naslov može da se doda i putem Markdown. Na primer, u novom paragrafu upišite ## i pritisnite „space“ na tastaturi – ovo automatski kreira naslov nivoa 2 (### – h3, #### – h4 itd.).
• List – Spisak (ol/ul). Nabrajanje teksta u vidu spiska, brojčano ili neodređeno.
• Quote – Citat (blockquote). Blok za citate.
• Pullquote – Citat sa akcentom (blockquote). Slično običnom citatu, Pullquote može da se koristi za citat, ali mu je osnovna uloga da akcentira frazu ili deo teksta koji želimo da se izdvaja.
• Table – Tablica (table). Blok za tablicu.
• Code – Kod (code). Blok za kod. 

Медия:

• Image – Slika (img).
• Gallery – Galerija. (ul»li»img). Za dodavanje nekoliko slika naređanih u koloni.
• Video – Video (video). U ovom bloku možete da postavite video koji je postavljen na sajtu. Za videe iz spoljašnjeg izvora kao, na primer, YouTube-a, postoji odvojeni blok YouTube.
• Audio – Audio (audio). Audio fajl se postavlja na sajt. Za audio iz spoljašnjeg izvora se koristi neki od blokova za umetnut sadržaj kao, na primer, SoundCloud.

Dizajn:

• Columns – Kolone (div). Kolone ne koriste HTML element za tablice (table). Umesto toga su putem CSS-a izrađena stilska pravila. To ih čini odzivnim za svakakve veličine ekrana. Na primer, kod najmanjih ekrana, kolone se ređaju jedna ispod druge – nešto što ne može da se postigne sa kolonama u tablicama.
• Spacer – Razmak (div).
• Separator – Razdvajač (hr).

Vidžeti:

• Shortcode – Kratak kod.
• Custom HTML – Korisnički HTML kod.
• Social Icons – Ikonice za društvene mreže.

Umetnuti sadržaj:

• YouTube (iframe).
• Twitter (iframe).
• i mnogi drugi.

Potpuni spisak blokova možete pronaći ovde: 🔗 Blocks | wordpress.org

Podešavanja blokova

Različiti blokovi imaju različite načine za prikazivanje informacije koju sadrže. Zbog toga imaju i drugačije mogućnosti za podešavanje. Na primer, za blok-sliku (Image) može da se podesi veličina slike u širini i visini, dok za blok-paragraf (Paragraph) može da se podesi veličina fonta.

Odvajanjem različitih vidova informacije u sopstvenim kontejnerima, moguće je i vađenje specifičnih podešavanja u panelu putem kog i obični korisnici mogu da vrše promene, bez potrebe za kodiranjem.

Na mogućnosti podešavanja blokova utiče i tema koju koristite. Na primer, u podešavanjima boje teksta i pozadine mogu da budu zadate opcije koje predstavljaju raspon boja teme. Takođe, veličina teksta, naslova i sl. su određeni od strane teme.

Neka standardna podešavanja su prisutna za skoro sve blokove, kao, na primer, poravnanje (levo, centralno, desno), kopiranje, dupliranje, premeštanje, brisanje, uređivanje kao HTML i dr.

Blok-panel

Najčešće korišćena podešavanja bloka se nalaze u blok-panelu.

Blok-panel može da se prikaže iznad bloka ili u gornjoj traci sa instrumentima. Kako biste premestili blok-panel u gornjoj traci, izaberite Top toolbar iz menija Opcije (Options).

Panel sa podešavanjima

Dodatna podešavanja bloka se nalaze u tabu Blok (Block) u Panelu sa podešavanjima (desno, otvara se i sakriva pomoću dugmeta „zupčanik“).

Rad sa blokovima

Kreiranje sadržaja pomoću uređivača blokova ne iziskuje tehničko znanje, niti znanja o kodu.

Prilikom kreiranja nove stranice ili objave, kao i do sada sa klasičnim uređivačem, pišite tekst i nakon što završite paragraf, pritisnite „Enter“ na tastaturi, kako biste otvorili novi red. U novom redu upišite „-“, ako želite da napravite spisak, postavite kopirani URL kako biste kreirali vezu ili postavite sliku koja se nalazi u datoteci vašeg uređaja. Blokovi će se na taj način sami pojavljivati.

Proces kreiranja sadržaja u uređivaču blokova je sličan onom u drag&drop uređivačima. Nakon što zamenite klasični uređivač sa uređivačem blokova, već posle druge stranice koju napravite pomoću njega ćete osetiti ogromno olakšanje. Uverićete se u to koliko je udoban i lagan proces kreiranja sadržaja.

Dodavanje bloka

Dodavanje novog bloka može da se izvrši na nekoliko načina. Prvi način je putem nekog od dugmeta „plus“.

Putem glavnog dugmeta „plus“ u gornjoj traci se otvara biblioteka s blokovima (Blocks), šablonima (Patterns) i blokovima za višekratnu upotrebu (Reusable Blocks). Iz ovog panela klikom ili prevlačenjem možete da dodate nove blokove.

Drugi način je da koristite komandni režim – u novom redu (u novom blok-paragrafu) upišite kosu crtu „/“, nastavite da ispisujete naziv bloka i prikazaće vam se spisak iz kog možete da izaberete željeni blok.

Dodavanje novog bloka preko dugmeta „plus“ je lako. Međutim, ponekad je potrebno da dodamo novi blok između druga dva bloka. Kako bi se prikazalo dugme „plus“, potrebno je da mišem pronađemo sredinu (vertikalno i horizontalno) između dva bloka. Umesto toga, možemo da koristimo drugi, mnogo brži, način – putem kombinacije na tastaturi.

Kada obeležite gornji ili donji blok, preko tastature ukucajte:

• Ctrl+Alt+Y – dodavanje novog blok-paragrafa nakon izabranog bloka;
• Ctrl+Alt+T – dodavanje novog blok-paragrafa pre izabranog bloka.

Postavljanje sadržaja u uređivaču

Prilikom postavljanja sadržaja u uređivaču koje je kopirano iz drugog dokumenta, na primer, MS Word, Google Docs ili slično, ono će se ubaciti automatski u odgovarajućim blokovima. Deo stilova teksta će biti sačuvan, kao, na primer, podebljan ili kurziv, nivoi naslova i dr.

Prilikom postavljanja nekoliko slika odjednom uz drag&drop, one će se automatski dodati u blok-galeriju. Ako je u pitanju jedna slika, ona se postavlja kao blok-slika.

Premeštanje

Premeštanje blokova se vrši pomoću strelica koje se nalaze u blok-panelu.

Premeštanje može da se izvrši u putem tastature:

• na gore Ctrl+Shift+Alt+T;
• na dole Ctrl+Shift+Alt+Y.

Uklanjanje

Uklanjanje blokova može da se vrši na nekoliko načina.

Možete da uklonite blok iz opcije u blok-panelu Remove block.

Drugi način je da, nakon što je određeni blok obeležen, uklonite blok putem dugmeta Del (Delete) na tastaturi, ili uz kombinaciju Ctrl+Alt+Z.

Obeležavanje

Obeležavanje jednog bloka

Obeležavanje jednog bloka se vrši klikom u oblasti granice bloka.

Ponekad može biti malo teže da pogodite glavni blok ukoliko je od kompleksnijih, kao, na primer, Kolone (Columns) ili Društveve ikonice (Social buttons). Dok su unutrašnji bokovi laki za obeležavanje, glavni blok u kome se oni nalaze se malo teže pronalazi mišem.

Nakon što ste obeležili neke od unutrašnjih blokova, imate nekoliko načina da obeležite osnovni blok:

• A) Iz gornje trake izaberite dugme List View (tri crtice).
  Odmah ćete videti spisak sa glavnim blokom, kao i sve blokove koje on sadrži. Iz spiska možete lako da obeležite željeni blok.
• B) U traci u donjem levom uglu u uređivaču postoji pokazivač (breadcrumbs) sa linkovima ka blokovima koji prikazuje njihovu hijerarhiju. Obeležavanje tačnog bloka među nekoliko ugrađenih je vrlo lako.
• C) Treća opcija je da pratite nivoe blokova putem blok-panela putem dugmeta koji se prikazuju preko dugmeta Change block type or style.

Obeležavanje nekoliko bloka

Kako biste obeležili nekoliko bloka, kliknite na prvi i mišem prevucite na gore ili na dole.

Druga opcija za obeležavanje nekoliko blokova je da koristite režim Select iz gornje trake sa opcijama.

Nakon što aktivirate režim Select, kliknite na blok, zadržite za sekundu i prevucite na dole ili na gore kako biste obeležili još blokova.

Kombinovanje blokova

Kombinovanje ili grupisanje blokova ima velike koristi kada, na primer, želite da priložite jedan stil na nekoliko blokova ili da ih premestite/uklonite odjednom.

Kombinovanje se vrši kada obeležite blokove i izaberete opciju Group iz blok-panela.

Nakon što su postavljeni u grupu, možete da uređujete odvojene blokove bez potrebe za razgrupisanjem.

Sa tehničke tačke gledišta, grupisanje blokova je postavljanje u odvojeni blok-kontejner Group. Sadržaj se nalazi između blok-tagova <-- /wp:group --> …  <!-- /wp:group -->. Tako grupa blokova postaje slična drugim kompleksnim blokovima koji sadrže druge blokove.

Grupa blokova može da se sačuva kao jedan blok za višekratnu upotrebu (Reusable block) ako želite da isti taj sadržaj dodate i u druge članke.

Blokovi za višekratnu upotrebu

Blokovi za višekratnu upotrebu su zgodni kada želite da koristite jedan blok u više stranica/objava. Kada uređujete ovaj blok, promene će se odraziti svuda gde ste ga koristili. Na ovaj način nema potrebe za uređivanjem svake pojedinačne stranice kako biste promenili sadržaj konkretnog bloka.

Kreiranje bloka za višekratnu upotrebu se vrši kada izaberete željeni blok (ili grupu od blokova) i izaberete opciju Add to Reusable blocks.

Kreirani blokovi za višekratnu upotrebu se nalaze u panel-biblioteci s blokovima sa leve strane, u tabu Reusable. Odatle klikom ili prevlačenjem možete da dodate blokove.

Spisak ovih blokova možete pronaći i na adresi:

https://goodexample.rs/wp-admin/edit.php?post_type=wp_block

goodexample.rs – zamenite ime sa vašim domenom.

Instaliranje novih blokova

U nekim specifičnim slučajevima vam može biti potreban određeni blok koji se ne nalazi među standardnim blokovima u uređivaču.

Na primer, ako kreirate objave, može da vam zatreba blok za tablicu sa sadržajem.

Ovakvi specifični blokovi mogu da se instaliraju lako na nekoliko načina. Prvi i najbrži način je direktno putem uređivača blokova, dok uređujete neku stranicu. Iz panela sa blokovima koristite polje za pretragu. Prvo, treba da budete sigurni šta vam tačno treba. Na primer, ako vam treba tablica sa sadržajem članka, u pretraživaču upišite „toc“.

Kako biste dodali blok u vašu biblioteku sa blokovima, kliknite na Add block. Novi blok se instalira u WordPress-u kao plugin. Ako vam blok neće završiti posao, možete da deinstalirate plugin koji je sa istim imenom. Ako imate nekoliko bloka sa sličnim imenima, moći ćete da ih razlikujete proverom imena developera.

Blokovi koji se prikazuju putem pretraživača u uređivaču blokova se nalaze u zvaničnom direktorijumu sa pluginovima i blokovima u wordpress.org.

Drugi način za instaliranje blokova je putem stranice za dodavanje novih pluginova u WordPress-u. Ima mnogo varijanti: WooCommerce Blocks, Stackable – Page Builder Gutenberg Blocks, Ultimate Blocks – Gutenberg Blocks Plugin i sl.

Neke teme i plaginovi imaju sopstvene blokove. Na primer, WooCommerce ima mnogo blokova za proizvode.

Menadžer blokova

Ugrađenih blokova koji idu uz uređivač blokova ima preko 30. Osim toga možete da instalirate dodatne blokove. Ali, realno, male su šanse da koristimo apsolutno svaki blok non stop.

Uz menadžer blokova možete da sakrijete blokove koje ne koristite iz biblioteke. Sakrivanje i prikazivanje je lako i vrši se putem opcije u osnovnom meniju Options » Block Manager.

Deaktiviranje blokova ne znači uklanjanje sa WordPress-a, već skrivanje iz biblioteke sa blokovima.

Blokova koji su ugrađeni u uređivač ima mnogo. Ako se oslanjate na to da ih birate mišem kako biste ih dodali u stranicu, nalaženje konkretnog bloka u biblioteci može oduzeti mnogo vremena. U ovom slučaju smanjenje broja blokova će ubrzati pretragu i izbor.

Ako dodajete blokove putem ispisivanja imena u nov blok-paragraf, veliki broj istih neće biti problem.

Problemi sa blokovima

Kao i svaka komponenta WordPress-a, na uređivač blokova i same blokove mogu da utiču ostale komponente sistema – pluginovi i tema.

Često problem sa učitavanjem uređivača leži u nepravilnom radu ili staroj verziji nekog plugina.

Ako je problem povezan sa samim blokovima i načinom njihovog ponašanja, u retkim slučajevima je moguće da je razlog sam uređivač. Zato je potrebno da se redovno obnavlja WordPress verzija. U novim verzijama, osim poboljšanja samog sistema, uključena su i poboljšanja uređivača blokova. Ponekad je potrebno samo da se sačeka sledeća nova verzija WordPress-a u kojoj su zabeleženi problemi uklonjeni.

Savet podrške: Ako primetite neki problem sa uređivačem blokova ili ponašanjem samih blokova, proverite da li se razlog ne krije u nekom od instaliranih pluginova. Pregledajte spisak sa pluginovima, potražite one čija je verzija starija i ne skoro ažurirana. Testirajte uređivač blokova nakon što deaktivirate neažuriran plugin. Ako još uvek vidite problem, potražite drugi neažuriran plugin i deaktivirajte ga. Ako nema promene nakon testiranja svih neažuriranih pluginova, ne oklevajte da nas kontaktirate. Bolje je da nas pozovete nego da gubite vreme u borbi sa problemom.