Gutenberg: Jak využít blokový editor pro WordPress na maximum

Ve WordPress 5.0 byl původní editor obsahu nahrazen blokovým editorem pojmenovaným Gutenberg.

Tento blokový editor přinesl zcela nový způsob tvorby obsahu ve WordPress a do výchozího nastavení přidal funkce podobné těm, které znáte z ostatních page builderů, jako je například Divi.

V tomto návodu si ukážeme jak blokový WordPress editor efektivně používat a jak s ním vytvářet obsah.

Jaký je rozdíl mezi blokovým editorem Gutenberg a původním klasickým editorem?

Předtím, než se pustíme do popisu samotného, podívejme se na rozdíl mezi klasickým editorem a blokovým editorem.

Zde vidíte, jak vypadá klasický editor ve WordPress:

Klasický editor

S verzí WordPress 5.0 a výše pak při tvorbě příspěvku můžete vidět následující editor:

Blokový editor Gutenberg

Jak můžete vidět, jedná se o zcela rozdílné editory pro tvorbu obsahu.

Klasický editor byl textový editor, který pomáhal formátovat text podobně jako například MS Word. Nový editor používá zcela jiný přístup, kterému se říká blokový (proto blokový editor).

Bloky jsou prvky obsahu, které přidáváte a pomocí nich stavíte svou stránku nebo příspěvek. Pro každý prvek obsahu (text, obrázek, video, galerie, audio, seznam atd.) můžete využít specifický blok. Vlastní bloky si také mohou přidávat pluginy.

Proč je nový blokový editor lepší než klasický editor?

Nový WordPress editor nabízí jednodušší cestu, jak do stránky nebo příspěvku vložit různé typy obsahu.

Například, když jste předtím potřebovali do obsahu vložit tabulku, museli jste k tomu použít specifický plugin (například Tablepress).

S novým editorem jen vyberete blok Tabulka, nastavíte počet sloupců a řádků a naplníte obsahem.

Blok Tabulka

Bloky v obsahu můžete libovolně přesouvat nahoru i dolů a vytvořit tak poutavý obsah.

Gutenberg je odpovědí na populární „page buildery“ jako jsou Divi nebo Elementor a stejně jako ony, i on dokáže tvořit rozmanitější webové stránky s lepší kontrolou obsahu a struktury.

Samotný Gutenberg je kompatibilní s řadou šablon a designů, a tak si s ním můžete vytvořit stránky přesně tak, jak potřebujete. Jen se podívejte na WordPress šablony vhodné pro Gutenberg.

Jak pracovat s novým WordPress editorem Gutenberg

Blokový editor byl navržen tak, aby byl co nejjednodušší, flexibilní a intuitivní. I když vypadá výrazně jinak, než jeho předchůdce, stále umožňuje provádět stejné věci. Pojďme si postupně projít tvorbu obsahu s pomocí nového blokového editoru Gutenberg.

Tvorba nového příspěvku nebo stránky za pomocí blokového editoru

Postup při tvorbě obsahu je stále stejný – vyberete zda chcete vytvářet stránku nebo příspěvek a kliknete na Vytvořit příspěvek/stránku v podmenu nebo na tlačítko v horní části obrazovky.

Tvorba příspěvku

Otevře se nová stránka a spustí se nový blokový editor.

Jak přidat blok v Gutenbergu

První blok na každé stránce je Název.

Po jeho vyplnění si pomocí klávesy tab nebo kurzorem myši zobrazíte možnosti přidání dalších bloků.

Název příspěvku

Ve výchozím nastavení je dalším blokem Odstavec, který umožní rovnou začít psát obsah stránky.

Ale pokud chcete vložit jiný blok, stačí kliknout na ikonu + a ze seznamu vybrat nový blok. Ikonu + najdete na několika místech.

Ikona+

Pokud víte, jaký blok chcete použít, můžete začít psát jeho název a dojde k automatickému filtrování nabídky.

Blok galerie

V případě, že nechcete využít myš, můžete začít procházet bloky i pomocí zadání „/“.

Použití lomítka propřidání bloku

Práce s bloky v novém editoru

Každý blok má svůj panel nástrojů, který se zobrazuje v jeho horní části. Nabídka tlačítek se vždy odvíjí od bloku, který upravujete.

Například na obrázku je panel nástrojů u bloku Odstavec, kde najdete především tlačítka pro formátování obsahu.

Nabídka nástrojů u bloku

Kromě této nabídky nástrojů má každý blok ještě vlastní nastavení v pravém sloupci vedle editoru.

Další nastavení bloku

Pořadí bloků můžete měnit jejich chycením za ikonu 6 teček v panelu nástrojů a přetažením myši nebo pomocí tlačítek nahoru a dolů, taktéž v panelu nástrojů.

Posunutí bloku

Uspořádání bloků do skupin a sloupců

Praktickou funkcí pro práci s obsahem je sdružování bloků do skupin. Provedete jej tak, že kliknete na blok a současně stisknete klávesu Shift. Takto vyberete všechny bloky, které chcete sdružit a objeví se panel pro uspořádání bloků, kde si můžete vybrat z uspořádání do skupiny, řádku nebo zásobníku.

Uspořádání bloků

Pokud v panelu nástrojů kliknete na ikonu skupiny bloků, můžete měnit uspořádání jednotlivých bloků v ní.

Změna uspořádání bloků

Vzhled celé skupiny bloků můžete upravit v pravém panelu.

Úprava stylu skupiny bloků

Druhou možností je přes ikonu + přidat prázdný blok Skupina nebo Sloupce a vybrat si rozvržení.

Přidání prázdného bloku Sloupce

Prázdné sloupce či skupinu pak můžete plnit libovolnými bloky. V pravém panelu pak můžete opět provádět úpravy zobrazení všech sdružených bloků. V levém panelu vidíte strukturu celé skupiny či sloupců.

Nastavení sloupců

Ukládání a znovu využití bloku v Gutenberg

Jednou z užitečných funkcí je možnost uložení bloku a jeho znovupoužití. Díky tomu můžete rychle vytvářet opakující se prvky stránek nebo příspěvků.

U bloku, který si takto chcete uložit klikněte na jeho menu (ikona tří teček nad sebou) a zvolte možnost Vytvořit vzor.

Ukládání bloků

Budete vyzváni, abyste blok pojmenovali. Bloky lze také pro lepší organizaci třídit do rubrik. Nakonec klikněte na tlačítko Vytvořit.

Vytvořit vzor

TIP: Jako vzor můžete uložit také sloupce či skupiny bloků a používat je opakovaně.

Blok se uloží a při přidávání nového bloku si jej můžete vybrat v záložce Vzory po kliknutí na ikonu + v horním panelu nebo je vyhledat pomocí zkratky / a názvu bloku. Použít jej můžete kdekoliv na webu.

Uložené vzory

Kromě vlastních uložených vzorů jsou součástí editoru také předpřipravené vzory, které můžete využít.

Publikování obsahu a správa nastavení v blokovém editoru Gutenberg

Každý WordPress příspěvek nebo stránka obsahuje různá meta nastavení. Mezi nimi najdete například datum publikování, rubriky, štítky, náhledový obrázek, atd.

Všechna tato nastavení najdete v pravém sloupci při úpravě obsahu dané stránky nebo příspěvku.

Nastavení stránky nebo příspěvku

Přidávání vybraných bloků v novém editoru

Nový editor umí vše, co uměl ten předchozí. Nicméně tvorba obsahu by měla být rychlejší a elegantnější než dříve.

Vložení obrázku

Je zde připravený blok Obrázek. Stačí vložit blok a nahrát obrázek nebo jej vybrat z mediální knihovny.

Vložení bloku obrázku

Nahrát obrázek můžete také přetažením souboru do okna prohlížeče.

Jakmile je obrázek nahraný, zobrazí se lišta nástrojů pro blok Obrázek a v pravé nabídce nastavení najdete položky jako alt obrázku, velikost nebo nastavení odkazu.

Nastavení obrázku

Vložení odkazu

Blokový editor obsahuje několik bloků, do kterých je možné vložit text. Nejčastěji používanějším bývá blok Odstavec.

Všechny bloky, které umožňují vložení textu mají v panelu nástrojů ikonu pro vložení odkazu.

Vložení odkazu

Vložení galerie

Blok Galerie funguje podobně jako blok Obrázek. Vložíte jej a vyberete obrázky, které chcete mít v galerii.

Blok galerie

Vložení shortcodu

Všechny shortody fungují stejně jako v klasickém editoru. Pro jejich vložení můžete použít blok Odstavec nebo Zkrácený zápis.

Blok Zkrácený zápis

Nové bloky v Gutenbergu

Gutenberg editor sliboval vyřešení starých problémů s použitelností.

Níže najdete některé vylepšení práce s obsahem, které nový blokový editor přinesl.

Přidání obrázku k textu

Nový blok Média a text umožňuje vložení obrázku vedle textu.

Blok Média a text

Přidání tlačítka

Přidání tlačítka v klasickém editoru bylo zbytečně složité. Gutenberg vše zjednodušuje a obsahuje blok Tlačítko.

Blok Tlačítko

Tvorba tabulek

Gutenberg obsahuje blok Tabulka, přes který jednoduše uděláte základní tabulky bez nutnosti znalosti HTML nebo CSS. Tabulku můžete zpětně upravovat, takže není problém přidat další sloupce nebo řádky.

Blok Tabulka

Tipy pro použití Gutenbergu

Pojďme si ukázat nějaké tipy nastavení nového editoru.

Panel nástrojů v horní části obrazovky

Pokud vám nevyhovuje nastavení plovoucího panelu nástrojů u každého bloku, můžete si jej přenastavit do horní lišty. Stačí, když v nastavení zaškrtnete možnost Horní panel nástrojů.

Horní panel nástrojů

Klávesové zkratky

Použijte klávesou zkratku Shift + Alt + H nebo klikněte na nastavení a Klávesové zkratky a zobrazí se okno s nabídkou klávesových zkratek, které můžete v Gutenbergu používat.

Klávesové zkratky

Často kladené dotazy ve spojení s Gutenbergem

Co se stane s mými starými příspěvky a stránkami? Budu je moci upravovat?

Ano, starý obsah zůstane nezměněn. Pokud chcete, můžete si jej dokonce převést do nového editoru. Uděláte to tak, že v pravém horním rohu klasického editoru rozbalíte menu skryté pod ikonou tří teček a z nabídky vyberete možnost Převést na bloky.

Můžu i nadále používat starý editor?

Ano, můžete. K jeho aktivování slouží plugin Klasický editor. Více jsme o něm psali v článku Jak deaktivovat Gutenberg a vrátit původní visuální editor.

Co dělat, když nový editor není kompatibilní se šablonou nebo pluginem, který používám?

Gutenberg byl ve vývoji opravdu dlouhou dobu. To dalo vývojářům spoustu času, aby udělali svůj produkt kompatibilní. V případě, že to tak neudělali nebo je zde i přesto chyba, můžete nainstalovat plugin Klasický editor a počkat na aktualizaci nebo najít kompatibilní šablonu či plugin.