Blok uređivač

Modul 4: Izrada sadržaja · Vrijeme čitanja: 8 minuta

Cilj učenja: Nakon ove lekcije moći ćete izraditi stranicu pomoću blokova i uzoraka, te ćete znati kako funkcioniraju konceptne verzije, zakazivanje objave i revizije.

Ključni pojmovi: blok, postavke bloka, alatna traka, prikaz u listi, grupa, stupci, uzorak, sinkronizirani uzorak, koncept, privatno, zakazivanje, revizije, pretpregled

Sve je blok

Od verzije WordPress 5.0 (kraj 2018.) sadržaj se izrađuje u blok uređivaču (poznatom i kao Gutenberg, prema nazivu projekta). Stranica se sastoji od zasebnih blokova: naslova, odlomka, slike, gumba, popisa, tablice, ugrađenog videa. Svaki blok ima svoje vlastite postavke. Blokove možete slagati jedan ispod drugog, jedan pored drugog (u stupcima) ili jedan unutar drugog (u grupi).

Zašto blokovi? U starom uređivaču stranica je bila jedno veliko polje za tekst. Ako ste željeli dva stupca ili gumb, trebao Vam je alat za izradu stranica, shortcode ili HTML. S blokovima to je moguće unutar samog WordPressa, a rezultat je uredan HTML koji oblikuje tema.

U pozadini WordPress sprema blokove kao HTML s komentarskim oznakama prije i poslije:

<!-- wp:heading -->
<h2 class="wp-block-heading">Radno vrijeme</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Otvoreni smo od utorka do subote.</p>
<!-- /wp:paragraph -->

To je korisno znati: sadržaj ostaje čitljiv HTML, čak i ako kasnije promijenite temu ili blok više ne postoji. To vidite kada za neki blok odaberete „Uredi kao HTML” ili u uređivaču koda (Ctrl+Shift+Alt+M).

Uređivač u tri dijela

1. Platno (canvas) u sredini: Vaša stranica otprilike onako kako će izgledati.
2. Alatna traka iznad odabranog bloka: podebljano, kurziv, poveznica, poravnanje i pretvaranje bloka u drugu vrstu (odlomak postaje popis, slika postaje galerija).
3. Bočna traka desno s dvije kartice: Stranica (ili Objava) s postavkama za cijelu stranicu, i Blok s postavkama odabranog bloka, kao što su boja, razmak i veličina slova.

Dva alata koja Vam znatno olakšavaju rad:

• Prikaz u listi (ikona s tri crtice gore lijevo): struktura Vaše stranice prikazana kao stablo. Time precizno odabirete točno onaj blok koji želite, čak i ako se nalazi u grupi unutar stupca.
• Naredbe s kosom crtom (slash): u praznom retku upišite / i naziv bloka (/heading, /button, /image) te pritisnite Enter.

Izgradnja pomoću grupa i stupaca

Dobra stranica ima jasnu strukturu. Za to koristite tri gradivna elementa:

• Grupa: okvir oko nekoliko blokova, s vlastitom pozadinom ili razmakom. Na primjer obojeni blok s naslovom, rečenicom i gumbom.
• Stupci: blokovi poredani jedan pored drugog. Na mobitelu se slažu jedan ispod drugog.
• Redak i Stog: varijante grupe koje raspoređuju blokove vodoravno ili okomito.

Koristite naslove na ispravan način: jedan H1 (naslov stranice, koji obično automatski postavlja tema), ispod njega H2 za poglavlja i H3 za dijelove unutar njih. Naslov nemojte birati zbog veličine slova; tu prilagođavate u postavkama bloka. Čitači ekrana i tražilice koriste naslove kako bi razumjeli strukturu stranice (lekcija 9.2).

Uzorci: ne počinjite svaki put iznova

Jedan uzorak je gotova grupa blokova: naslov s tekstom i slikom, cjenik u obliku tablice, tri stupca s ikonama. Umećete ih putem gumba za umetanje (plus znak), kartica Uzorci. Vaša tema često dolazi s nekoliko njih, a u knjižnici uzoraka na wordpress.org nalaze se stotine.

Uzorke možete izraditi i sami: odaberite nekoliko blokova, u alatnoj traci odaberite tri točkice i Izradi uzorak. Pritom birate je li uzorak sinkroniziran:

• Nije sinkronizirano: svaki put kada ga umetnete, dobivate zasebnu kopiju. Ako je prilagodite, mijenja se samo ta kopija. Korisno kao predložak.
• Sinkronizirano: gdje god se nalazi, uvijek je isto. Ako ga prilagodite na jednom mjestu, mijenja se posvuda. Korisno za blok „Kontakt i radno vrijeme” koji se nalazi na deset stranica. (Ranije su se ovi blokovi nazivali „blokovi za višekratnu upotrebu”.)

Jedna zamka: sinkronizirani uzorak koji „samo malo” prilagodite na jednoj stranici mijenja se i na svim ostalim stranicama. Ako na jednom mjestu želite nešto drugačije, od te jedne kopije napravite običnu grupu (otkačite je).

Spremanje, objavljivanje i zakazivanje

Stranica ima status:

Koristite Pretpregled kako biste pregledali stranicu onako kako je vidi posjetitelj, uključujući na mobitelu i tabletu, prije nego što je objavite.

Revizije: povratak u prošlost

Svaki put kada spremite, WordPress sprema reviziju: verziju iz tog trenutka. U bočnoj traci uz stranicu vidite koliko revizija postoji. Kliknite na to i pomoću klizača vidite razlike između dvije verzije te možete vratiti stariju verziju.

Revizije su Vaša prva sigurnosna mreža u slučaju pogreške („slučajno sam izbrisao/la pola stranice”). No sve se one spremaju u bazi podataka. Web-stranica s tisućama revizija postaje veća, a ponekad i sporija. Broj revizija možete ograničiti u wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Lekcija 6.3 govori o čišćenju starih revizija.

Gdje prestaje uređivač

Blok uređivač izrađuje sadržaj stranice. Ono što se nalazi oko sadržaja (zaglavlje web-stranice, izbornik, podnožje) dio je teme. Kod blok teme to uređujete u Uređivaču stranice (Izgled > Uređivač) pomoću istih blokova; kod klasične teme to se uređuje u Prilagodniku i kod Widgeta (lekcija 5.1). Ako koristite alat za izradu stranica poput Elementor ili Divi, radite u tom programu umjesto u blok uređivaču; nedostatke toga obrađuje lekcija 5.1.

Sažetak

• Stranica se sastoji od blokova koje slažete jedan ispod drugog, jedan pored drugog i jedan unutar drugog; WordPress ih sprema kao HTML s komentarskim oznakama.
• Prikaz u listi i naredbe s kosom crtom omogućuju brzu i preciznu izgradnju.
• Koristite naslove za strukturu (H2, H3), a ne za veličinu slova.
• Uzorci štede vrijeme; sinkronizirani uzorak mijenja se posvuda istovremeno.
• Koncept, zakazano, privatno i revizije daju Vam kontrolu nad time što je kada vidljivo, te mogućnost povratka unatrag.

Kviz

Zadatak

Zadatak D4.1: Izradite stranicu pomoću blokova. Izradite konceptnu stranicu „O nama” sa sljedećim elementima: jedan H2 i jedan H3, najmanje dva odlomka, sliku s alt tekstom, blok sa stupcima koji ima dva stupca, gumb s poveznicom, te jedan uzorak iz knjižnice. Od jedne grupe napravite vlastiti sinkronizirani uzorak i umetnite ga na drugu konceptnu stranicu. Zatim ga prilagodite na jednom mjestu i provjerite što se događa na drugoj stranici. Na kraju vratite raniju reviziju. Označite svaki korak i u dvije rečenice opišite kada biste koristili sinkronizirani uzorak, a kada ne.

Dodatno čitanje

Za rad unutar samog WordPressa još nemamo vlastite članke; službena dokumentacija WordPressa vrlo je opsežna.

• Blok uređivač (wordpress.org, na engleskom): https://wordpress.org/documentation/article/wordpress-block-editor/
• Uzorci (wordpress.org, na engleskom): https://wordpress.org/documentation/article/block-pattern/
• Revizije (wordpress.org, na engleskom): https://wordpress.org/documentation/article/revisions/