WordPress obecně

Kompletní průvodce novým výchozím WordPress editorem (Gutenberg)

blok
Autor příspěvku Tomáš Cirkl

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

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

V tomto návodu si ukážeme jak nový výchozí WordPress editor 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 nového editoru, se podívejme na rozdíl mezi klasickým editorem a blokovým editorem.

Zde je, jak vypadá klasický editor ve WordPress:

Klasický editor

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:

Gutenberg

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 jiné 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

Blok Tabulka

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

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

Jak pracovat s novým WordPress editorem Guttenberg

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 Guttenberg.

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

Tvorba příspěvku

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

Jak přidat blok v Guttenbergu

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ů.

Vytvořit nový příspěvek

Vytvořit nový příspěvek

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 +

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

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

Použití lomítka pro př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

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

Další nastavení bloku

Pořadí bloků můžete měnit jejich chycením a přetažení myši nebo pomocí tlačítek nahoru a dolu na levé části bloku.

Posunutí bloku

Posunutí bloku

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

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 Přidat k opakovatelným blokům.

Přidat k opakovatelným blokům

Přidat k opakovatelným blokům

Budete vyzváni, abyste blok pojmenovali. Nakonec klikněte na tlačítko uložit.

Uložení bloku

Uložení bloku

Blok se uloží a při přidávání nového bloku si jej můžete vybrat ze seznamu Opakovatelné. Použít jej můžete kdekoliv na webu.

Opakovatelné

Opakovatelné

Všechny takto uložené bloky se ukládají do databáze a můžete je spravovat tak, že kliknete na odkaz Spravovat všechny opakovatelné bloky v sekci Opakovatelné.

Spravovat všechny opakovatelné bloky

Spravovat všechny opakovatelné bloky

Zde můžete bloky upravovat, mazat nebo třeba pomocí exportu/importu přesouvat na jiné WordPress instalace.

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

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.

Blok obrázek

Blok obrázek

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

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í odkazu

Vložení galerie

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

Blok Galerie

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

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

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

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

Blok Tabulka

Vytváření obsahu ve více sloupcích

Schopnost vytvářet obsah ve více sloupcích bylo něco, co v klasickém editoru prakticky vůbec nebylo. Blokový editor obsahuje speciální blok Sloupce, kterým si můžete určovat počet sloupců na řádce. Maximální počet je šest sloupců.

Blok Sloupce

Blok Sloupce

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ů

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

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 alternativní šablonu či plugin.

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

2 komentáře

  • Ahoj, když přidám blok sloupce, lze nastavit šířku jednotlivých sloupců?
    Např: 3 sloupce , první šířka 10%, druhý 20%, třetí 70% šířky stránky.
    Nemůžu na to přijít. Pavel

Zanechat komentář

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 5 let. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.