Návod ako pracovať s novým editorom Gutenberg

Od verzie WordPress 5.0 majú používatelia tohto CMS systému k dispozícii nový editor vytvárania obsahu webu. Pri tvorbe stránky využíva tzv. bloky. Jednotlivé bloky je možné upravovať. V nasledujúcom návode si povieme, ako používať editor Gutenberg pri vytváraní obsahu webovej stránky.

Čo je to Gutenberg?

Gutenberg je novým predvoleným editorom pre WordPress. Funguje na odlišnom princípe ako doteraz používaný TinyMCE editor. Vďaka vytváraniu stránky pomocou blokov ponúka celkom novú skúsenosť tvorby webu. V jednotlivých blokoch je možné pracovať s textom ako v textovom editore.

Bloky je možné po stránke presúvať a zoskupovať podľa konkrétnych predstáv používateľa. Vďaka Gutenbergu má používateľ možnosť lepšieho prispôsobenia vzhľadu a rozloženia stránky.

Čo je to blok?

Bloky sú časti obsahu na stránke. Môžete vytvoriť blok pre text, widgety, obrázky, video, citáciu a podobne. S každým blokom je možné ďalej pracovať. Prínosom pri tvorbe webu je funkcia drag and drop, pomocou ktorej je možné bloky jednoducho presúvať.

Ako vytvoriť stránku v editore Gutenberg

Keď chcete vytvoriť novú stránku, prejdite v administrácii stránky na voľbu Stránky › Pridať novú. Otvorí sa vám nasledovná stránka:

Do zobrazeného bloku napíšete nadpis. Nájdete tu tiež možnosť pre úpravu slugu stránky. Slug môžete upraviť, kedykoľvek po kliknutí na nadpis. Stačí, keď kliknete na tlačidlo Upraviť vedľa URL adresy stránky.

Vytváranie blokov

Po napísaní nadpisu, môžete pridať ďalší text do vopred nastaveného bloku pre písanie textu, alebo môžete vložiť vlastný blok. Urobíte tak kliknutím na ikonku plus:  . Tu si môžete vybrať druh obsahu, ktorý chcete pridať.

V mojom príklade som zvolil pridanie odseku. V bloku pre odsek nájdete možnosti písma, zarovnania a ikonku pre vloženie odkazu. Na konci panela nástrojov pre úpravu bloku nájdete tlačidlo ďalších možnosti úpravy . S ním môžete napríklad skryť nastavenia bloku, duplikovať, upraviť ako HTML, pridať k znovu použiteľným blokom a odobrať blok.

Ďalšie možnosti pre text nájdete v pravej časti obrazovky. K dispozícii je nastavenie písma. Vyberiete si veľkosť písma z niekoľkých vopred nastavených možností alebo si nastavíte vlastnú. Môžete tu zvoliť tiež farbu pozadia, farbu textu alebo nastaviť vlastné pokročilé úpravy.

Možnosti pre úpravu blokov priamo nad blokom ako aj v pravej časti obrazovky sa líšia podľa jednotlivých druhov blokov.

Zmena typu bloku

Počas vytvárania stránky môžete kedykoľvek zmeniť typ bloku. Urobíte tak kliknutím na prvé tlačidlo nad aktívnym blokom. Tu sa vždy zobrazuje znak pre aktívny typ bloku. Po kliknutí sa zobrazí zoznam blokov, z ktorého si môžete vyberať.

Typy blokov

Pri vytváraní stránok máte k dispozícii niekoľko typov blokov. Sú zoradené do prehľadného zoznamu, ktorý je rozdelený na niekoľko častí:

Najviac používané – tu sú zobrazené najviac používané typy blokov ako odsek, obrázok, galéria a podobne.

Priame elementy – k dispozícii je blok pre priamy obrázok.

Bežné bloky – tu nájdete bloky pre obrázky, video, súbor, zoznam, citáciu a iné bežne používané časti stránky.

Formátovanie – umožňuje pridať formátovaný obsah ako tabuľka, kód, vlastné HTML ale tiež blok v klasickom WordPress textovom editore.

Prvky rozloženia -tu nájdete bloky pre zlom strany, tlačidlo, stĺpce alebo blok s vopred vytvoreným rozložením pre médiá a text.

Widgety – vďaka dostupným možnostiam môžete pridávať shortkódy, kategórie, zoznam posledných komentárov a podobne.

Vložené prvky – umožňujú vkladanie externého obsahu ako YouTube, Twitter, Instagram, Facebook a iného obsahu.

Ako vytvoriť základné usporiadanie na stránke

Na začiatok vytvoríme jednoduchú stránku. Bude stačiť, ak bude mať nadpis, text, obrázok, zoznam s odrážkami a galériu obrázkov.

Pridanie textu

Po zadaní nadpisu začnite jednoducho písať do vopred nastaveného bloku. Pre každý odsek vytvorí Gutenberg samostatný blok. Nemusíte ho zakaždým pridávať na stránku. Stačí, ak stlačíte Enter. Nový blok pre odsek sa vytvorí sám.

Pridanie obrázka

Ak budete chcieť pridať obrázok, vyberte príslušný blok zo zoznamu blokov. Zoznam blokov sa zobrazí po kliknutí na obrázok ikonka plus v ľavej hornej časti obrazovky. Obrázok môžete vybrať z knižnice multimédií alebo ho na stránku nahrať.

Hneď po nahraní sa zobrazí v rozložení stránky. V pravej časti obrazovky nastavíte veľkosť obrázka, vyplníte alternatívny text, prípadne vložíte odkaz.

Pridanie zoznamu s odrážkami

Vyberte príslušný blok zo zoznamu. Pri úprave textu máte k dispozícii aj možnosť voľby očíslovaného zoznamu, vloženie odkazu a podobne.

Pridanie galérie obrázkov

Zo zoznamu blokov vyberte blok pre galériu. Potom nahrajte obrázky. V bloku pre galériu môžete upravovať zarovnanie, vložiť alebo odobrať obrázok. V pravej časti obrazovky nájdete funkcie pre nastavenia počtu stĺpcov a orezanie obrázkov v galérii.

Ako presunúť bloky

Jednotlivé bloky je možné na stránke presúvať. Potrebné tlačidlá sa zobrazia, keď prejdete myšou na blok, ktorý chcete premiestniť. Sú tu k dispozícii dve šípky pre posun hore a dole. Tieto premiestnia vybraný blok vždy o jednu pozíciu vyššie alebo nižšie. Medzi šípkami nájdete ikonku pre funkciu drag&drop . Keď na ňu prejdete myšou, objaví sa ručička, ktorou blok jednoducho uchytíte a presuniete na želané miesto.

Ako znovu použiť vytvorené bloky

Ak ste vytvorili blok, ktorý by ste chceli neskôr znovu použiť, kliknite na ikonku Viac možností. Nájdete ju v ponuke funkcií navrchu bloku. Tu zvoľte možnosť Pridať k znovupoužiteľným blokom.

Takto budete mať prístup k vytvoreným blokom vždy pri vytváraní nového príspevku. Uložené bloky sa zobrazia v zozname typov blokov pod položkou Znovupoužiteľný. Dajú sa tiež spravovať. Môžete ich konvertovať späť na normálny blok alebo odstrániť z ponuky.

Ďalšie funkcie

Pri vytváraní stránok či článkov máte k dispozícii ešte niekoľko praktických funkcií. Ako prvé sa pozrieme na tlačidlá navrchu stránky.

Prvú z ikoniek som už spomínal. Slúži pre pridanie bloku na stránku.

Šípky dozadu a dopredu netreba predstavovať – vrátia vás o krok vpred alebo vzad.

i – tu si môžete prezrieť štruktúru obsahu.

Zaujímavú funkciu ponúka posledné tlačidlo – bloková navigácia. Okrem zobrazenia poradia jednotlivých blokov slúži tiež na rýchly prechod na vybraný blok.

V pravej časti stránky nájdete ďalšie funkcie. Niektoré už možno poznáte z predchádzajúcej práce s WordPressom. Iné sú nové.

Dokument – umožní prístup k nastaveniam dokumentu ako úprava URL stránky, pridanie ilustračného obrázka a povolenie komentárov. Na stránke vytvárania príspevku je k dispozícii aj priradenie kategórií a značiek. Môžete tiež pridať text pre zhrnutie.

Blok – o niektorých funkciách tohto tlačidla som sa už zmienil vyššie v časti Vytváranie blokov. Líšia sa v závislosti od zvoleného typu bloku.

Náhľad – tlačidlo náhľad zobrazí živý náhľad stránky alebo príspevku.

Publikovať – pomocou tohto tlačidla stránku publikujete. V prípade, že upravujete už existujúcu stránku, zobrazuje sa namiesto tlačidla Publikovať tlačidlo Aktualizovať.

Trvalý odkaz – tu upravíte textovú časť URL.

Vlastnosti stránky – slúži pre nastavenie šablóny stránky a priradenie nadradenej stránky.

Zobraziť viac nástrojov a možností – posledné tlačidlo v pravom hornom rohu stránky je Zobraz viac nástrojov a možností . Nájdete tu niekoľko funkcií ako režim reflektorov, ktorý vám pri vytváraní stránky pomôže upriamiť sa na obsah konkrétneho bloku.

Ďalej tu nájdete prepínanie medzi vizuálnym editorom a editorom kódu ako aj režim celej obrazovky. Okrem toho tu nájdete klávesové skratky, možnosť spravovať znovupoužiteľné bloky a iné možnosti nastavenia stránky.

Tipy pre pokročilých

Vymenujem aj zopár pokročilejších funkcií editora:

Rýchle vytvorenie bloku

Aby ste nemuseli vždy vyhľadávať konkrétny blok v zozname, môžete si prácu uľahčiť. Stačí, ak do vopred nastaveného bloku napíšete lomítko a prvé písmená z názvu bloku:

/názov bloku

Ako náhle začnete písať text, zobrazí sa vám zoznam zodpovedajúcich možností.

Úprava zdrojového kódu

V každom kroku tvorby obsahu stránky môžete upravovať jeho zdrojový kód. Urobíte tak kliknutím na ikonku . Tu vyhľadajte možnosť editor kódu.

Aktivácia režimu celej obrazovky

V editore Gutenberg sa dá pracovať bez zbytočného rozptyľovania ponukou menu stránky. Prejdite do pravého horného rohu stránky a kliknite na . Tu nájdete funkciu Režim celej obrazovky. Pre ešte lepšie sústredenie na konkrétny blok, môžete vybrať aj Režim reflektorov.

Používanie klávesových skratiek

Gutenberg umožňuje používať okrem bežných skratiek mnoho špeciálnych klávesových skratiek. Napríklad:

• zobraziť alebo skryť nastavenia bočného panelu Ctrl + Shift + ,
• odvolať vaše posledné zmeny Ctrl + Z
• znovu vykonať odvolané zmeny Ctrl + Shift + Z

Pre otvorenie zoznamu skratiek použite skratku Ctrl + Shift + H.

Rozšírenie možností pomocou pluginov

Ak chcete rozšíriť svoje dizajnové možnosti, nainštalujte si niektorý z pluginov pre Gutenberg. Zbierku vopred pripravených blokov ponúka napríklad plugin Stackable. Vytvoríte ním zaujímavé hlavné stránky. Výborným pluginom je tiež Otter Blocks. Umožňuje vytvárať bloky, ako sú ceny, mapy Google a iné.

Niekoľko odpovedí na často kladené otázky

Čo ak si neprajem používať Gutenberg?

Niektorí používatelia sa pýtajú, či WordPress umožňuje používať predchádzajúci TinyMCE editor. Áno, je to možné. Gutenberg sa v takomto prípade dá deaktivovať. Stačí, ak si nainštalujete WordPress plugin Classic Editor.

Zmení sa starý obsah?

Všetok obsah, ktorý už na stránke máte, bude bez zmeny. Gutenberg umiestni konkrétnu stránku či článok do jedného bloku. Na tento účel má Gutenberg k dispozícii tzv. klasický blok. Tento umožňuje pracovať s pôvodným obsahom ako v klasickom TinyMCE editore.

Pôvodný obsah jednoducho upravíte v klasickom bloku alebo ho môžete konvertovať do blokov. Potrebnú funkciu nájdete pod ikonkou Viac možností . Ďalej môžete s obsahom pracovať ako keby ste ho vytvorili v blokovom editore.