Blokový editor

Modul 4: Tvorba obsahu · Čas čítania: 8 minút

Cieľ lekcie: Po tejto lekcii budete vedieť zostaviť stránku pomocou blokov a vzorov a budete poznať princíp konceptov, plánovania a revízií.

Kľúčové pojmy: blok, nastavenia bloku, panel nástrojov, zoznamové zobrazenie, skupina, stĺpce, vzor, synchronizovaný vzor, koncept, súkromné, naplánovanie, revízie, náhľad

Všetko je blok

Od WordPressu 5.0 (koniec roka 2018) tvoríte obsah v blokovom editore (nazývanom aj Gutenberg, podľa názvu projektu). Stránka pozostáva z jednotlivých blokov: nadpis, odsek, obrázok, tlačidlo, zoznam, tabuľka, vložené video. Každý blok má svoje vlastné nastavenia. Bloky umiestňujete pod seba, vedľa seba (v stĺpcoch) alebo do seba (v skupine).

Prečo bloky? V starom editore bola stránka jedno veľké textové pole. Ak ste chceli dva stĺpce alebo tlačidlo, potrebovali ste nástroj na tvorbu stránok, shortcode alebo HTML. S blokmi to zvládnete priamo vo WordPresse a výsledkom je čisté HTML, ktoré téma naformátuje.

Na pozadí WordPress ukladá bloky ako HTML s komentármi pred a za nimi:

<!-- wp:heading -->
<h2 class="wp-block-heading">Otváracie hodiny</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Otvorené máme od utorka do soboty.</p>
<!-- /wp:paragraph -->

Je dobré o tom vedieť: obsah zostáva čitateľným HTML, aj keď neskôr zmeníte tému alebo blok prestane existovať. Uvidíte to, ak pri bloku zvolíte „Upraviť ako HTML“, alebo v editore kódu (Ctrl+Shift+Alt+M).

Editor v troch častiach

1. Plátno uprostred: vaša stránka približne taká, ako bude vyzerať.
2. Panel nástrojov nad vybraným blokom: tučné písmo, kurzíva, odkaz, zarovnanie a zmena typu bloku (odsek sa zmení na zoznam, obrázok na galériu).
3. Bočný panel vpravo s dvoma kartami: Stránka (alebo Článok) s nastaveniami pre celú stránku a Blok s nastaveniami vybraného bloku, ako sú farba, odstupy a veľkosť písma.

Dva nástroje, ktoré vám výrazne uľahčia prácu:

• Zoznamové zobrazenie (ikona s tromi čiarkami vľavo hore): štruktúra vašej stránky vo forme stromu. Pomocou neho vyberiete presne ten blok, ktorý chcete, aj keď je v skupine v stĺpci.
• Príkazy s lomkou: na prázdnom riadku napíšte / a názov bloku (/nadpis, /tlacidlo, /obrazok) a stlačte Enter.

Zostavovanie pomocou skupín a stĺpcov

Dobrá stránka má jasnú štruktúru. Na to slúžia tri stavebné prvky:

• Skupina: rámec okolo niekoľkých blokov, s vlastným pozadím alebo odstupom. Napríklad farebný blok s nadpisom, vetou a tlačidlom.
• Stĺpce: bloky vedľa seba. Na telefóne sa zobrazia pod sebou.
• Riadok a Stoh: varianty skupiny, ktoré usporiadajú bloky horizontálne alebo vertikálne.

Používajte nadpisy správnym spôsobom: jeden H1 (názov stránky, ktorý zvyčajne vytvára samotná téma), pod ním H2 pre kapitoly a H3 pre ich jednotlivé časti. Nadpis nevyberajte podľa veľkosti písma, tú upravíte v nastaveniach bloku. Čítačky obrazovky a vyhľadávače používajú nadpisy na pochopenie štruktúry stránky (lekcia 9.2).

Vzory: nemusíte začínať znova od nuly

Vzor je hotová skupina blokov: nadpis s textom a obrázkom, cenová tabuľka, tri stĺpce s ikonami. Vkladáte ich cez tlačidlo na vkladanie (plusko), karta Vzory. Vaša téma ich často obsahuje niekoľko a v knižnici vzorov na wordpress.org nájdete stovky ďalších.

Vzory si môžete vytvoriť aj sami: vyberte niekoľko blokov, v paneli nástrojov zvoľte tri bodky a Vytvoriť vzor. Pritom si zvolíte, či bude vzor synchronizovaný:

• Nesynchronizované: pri každom vložení dostanete samostatnú kópiu. Ak ju upravíte, zmení sa iba táto kópia. Vhodné ako šablóna.
• Synchronizovaný: všade, kde sa nachádza, je rovnaký. Ak ho upravíte na jednom mieste, zmení sa všade. Vhodné pre blok „Kontakt a otváracie hodiny“, ktorý sa nachádza na desiatich stránkach. (Predtým sa nazývali „opakovane použiteľné bloky“.)

Pozor na jednu vec: synchronizovaný vzor, ktorý „len tak“ upravíte na jednej stránke, sa zmení aj na všetkých ostatných stránkach. Ak chcete mať na jednom mieste niečo iné, odpojte danú kópiu a vytvorte z nej obyčajnú skupinu (odpojenie).

Ukladanie, publikovanie a plánovanie

Stránka má stav:

Pred zverejnením použite Náhľad, aby ste si stránku pozreli tak, ako ju uvidí návštevník, aj na mobile a tablete.

Revízie: návrat v čase

Zakaždým, keď uložíte zmeny, WordPress uloží revíziu: verziu z daného okamihu. V bočnom paneli pri stránke vidíte, koľko revízií existuje. Po kliknutí uvidíte posuvník s rozdielmi medzi dvoma verziami a môžete obnoviť staršiu verziu.

Revízie sú vašou prvou záchrannou sieťou pri omyle („omylom som vymazal polovicu stránky“). Všetky sú však uložené v databáze. Stránka s tisíckami revízií sa zväčšuje a niekedy spomaľuje. Počet revízií môžete obmedziť v súbore wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Lekcia 6.3 sa venuje čisteniu starých revízií.

Kde končí editor

Blokový editor vytvára obsah stránky. To, čo je okolo obsahu (hlavička stránky, menu, pätička), patrí k téme. Pri blokovej téme to upravujete v Editore stránky (Vzhľad > Editor) pomocou rovnakých blokov; pri klasickej téme v Prispôsobení a vo Widgetoch (lekcia 5.1). Ak používate nástroj na tvorbu stránok ako Elementor alebo Divi, pracujete v danom programe namiesto blokového editora; nevýhody tohto prístupu rozoberá lekcia 5.1.

Zhrnutie

• Stránka pozostáva z blokov, ktoré umiestňujete pod seba, vedľa seba a do seba; WordPress ich ukladá ako HTML s komentármi.
• Zoznamové zobrazenie a príkazy s lomkou umožňujú stavať rýchlo a presne.
• Nadpisy používajte na štruktúru (H2, H3), nie na veľkosť písma.
• Vzory šetria prácu; synchronizovaný vzor sa mení všade naraz.
• Koncept, naplánované, súkromné a revízie vám dávajú kontrolu nad tým, čo a kedy je viditeľné, a možnosť vrátiť sa späť.

Kvíz

Úloha

Úloha D4.1: Vytvorte stránku z blokov. Vytvorte konceptovú stránku „O nás“ s: nadpisom H2 a H3, aspoň dvoma odsekmi, obrázkom s alt textom, blokom stĺpcov s dvoma stĺpcami, tlačidlom s odkazom a vzorom z knižnice. Z jednej skupiny vytvorte vlastný synchronizovaný vzor a vložte ho na druhú konceptovú stránku. Potom ho upravte na jednom mieste a sledujte, čo sa stane na druhej stránke. Nakoniec obnovte skoršiu revíziu. Odškrtnite každý krok a v dvoch vetách opíšte, kedy by ste synchronizovaný vzor použili a kedy nie.

Odporúčame na ďalšie čítanie

Pre prácu priamo vo WordPresse zatiaľ nemáme vlastné články; oficiálna dokumentácia WordPressu je však rozsiahla.

• Blokový editor (wordpress.org, po anglicky): https://wordpress.org/documentation/article/wordpress-block-editor/
• Vzory (wordpress.org, po anglicky): https://wordpress.org/documentation/article/block-pattern/
• Revízie (wordpress.org, po anglicky): https://wordpress.org/documentation/article/revisions/