[Návod] WordPress Gutenberg: co to je, jak ho používat

Nebudu tady vypisovat, co je Gutenberg zač, jak se používá nebo jaká je jeho historie. Na to je na internetu spousta jiných stránek. Tímhle článkem chci ukázat, proč jsem si WordPress Gutenberg editor oblíbil, co jsem v něm už vytvořil a co dalšího jsem k tomu potřeboval. Přesně tak, co jsem potřeboval dalšího.

V základu je Gutenberg dobrý jen k formátování postů, kvůli kterému tedy asi vznikl. Nicméně, pak se sešlo pár chytrých hlav, a náhodou to nebylo v Polské lidové republice, a začali Gutenberg ohýbat i k jiným účelům. Tím z něho udělali slušný builder stránek, co jde dost dobře použít pro vytváření a ladění landing pages.

Co je WordPress Gutenberg

Gutenberg je nový editor WordPressu, který byl poprvé představen ve verzi 5.0. Tento editor přináší zcela nový přístup k úpravě a vytváření obsahu ve WordPressu. Oproti klasickému WYSIWYG editoru (What You See Is What You Get) nabízí Gutenberg tzv. „blokový“ editor, kde je každý prvek na stránce – odstavec, obrázek, hlavička, seznam a další – reprezentován jako samostatný blok.

Tento přístup umožňuje uživatelům větší flexibilitu a kontrolu nad tím, jak je jejich obsah strukturován a zobrazen. Můžete snadno přidávat, upravovat a přesouvat jednotlivé bloky, což usnadňuje proces tvorby stránek a příspěvků.

Dokáže Gutenberg nahradit Elementor, Divi nebo jiný builder stránek?

Gutenberg je skvělý krok vpřed pro standardní WordPress editor, ale otázkou zůstává, zda je dostatečně silný na to, aby nahradil specializované buildery stránek jako je Elementor nebo Divi. Z mé zkušenosti záleží na konkrétních potřebách a preferencích uživatele.

Pro základní webové stránky a blogy je Gutenberg více než dostatečný. Jeho jednoduchost, integrovanost přímo do WordPressu a stále rostoucí knihovna bloků a vzorů dávají uživatelům dostatek nástrojů pro vytváření atraktivního a funkčního obsahu.

Na druhou stranu, pokud potřebujete pokročilejší designové možnosti, komplexnější rozložení a větší kontrolu nad stylováním, můžete dát přednost Elementoru, Divi, nebo jinému builderu stránek. Tyto nástroje nabízejí rozšířené možnosti a více přizpůsobitelných komponent, které mohou být pro některé projekty nezbytné. Kromě toho s Elementorem, Divi, Bricks, s těmito buildery dokážete měnit rozložení stránek WoooCommerce, rozložení kategorií a samotných článků. Tohle přes samotný Gutenberg neuděláte. Nicméně na jednoduchý web, kam nechcete pouštět klienta, na to vám tenhle editor bohatě stačí.

Jak používat bloky ve WordPress Gutenberg

1. Seznámení s rozhraním Gutenberg:

Gutenberg je navržen jako intuitivní, blokově orientovaný editor, který uživatelům umožňuje pracovat s obsahem webových stránek jako s kolekcí samostatných bloků. Tyto bloky mohou obsahovat text, obrázky, tlačítka, seznamy a mnoho dalších prvků. Pracovní plocha Gutenbergu umožňuje přidávat, upravovat a přeskupovat bloky, což poskytuje velkou flexibilitu při designu stránek.

Když s Gutenbergem pracuji, začínám vždy výběrem relevantního bloku z nabídky, která se otevírá kliknutím na tlačítko „Přidat blok“. To mi umožňuje rychle vybrat typ obsahu, který chci na stránce umístit. Každý blok lze individuálně nastavit a přizpůsobit, což mi dává kontrolu nad vzhledem a funkcí každého segmentu stránky.

2. Práce s textovými bloky

Textové bloky jsou základem každé stránky. Ve WordPress Gutenbergu lze snadno přidávat odstavce, nadpisy, seznamy a citace. Co mi na tomto editoru imponuje, je možnost přímé editace textu přímo v bloku a jeho formátování pomocí jednoduchého, ale efektivního nástrojového panelu. To zahrnuje možnosti jako změna písma, zarovnání textu, vytvoření odrážkových nebo číslovaných seznamů a další.

3. Vkládání multimediálních prvků

Gutenberg usnadňuje integraci multimediálních prvků, jako jsou obrázky, videa a audio soubory. Můžu například snadno vložit obrázek, přizpůsobit jeho velikost a umístění nebo přidat popisek. To platí i pro další média, jako jsou videa, kde lze využívat bloky pro vložení videa z YouTube nebo jiných platforem.

4. Použití pokročilých bloků

Gutenberg také nabízí řadu pokročilých bloků, jako jsou bloky pro tlačítka, tabulky, galerie obrázků a dokonce vlastní HTML. To mi dává možnost experimentovat a inovovat při tvorbě obsahu. Například, blok pro tlačítka mi umožňuje vytvořit atraktivní CTA (výzvu k akci), která může vést návštěvníky k přihlášení k odběru novinek nebo k nákupu produktu.

Jak přidat do Gutenberg další bloky

Jak jsem psal výše, tak samotný Gutenberg je docela o ničem. Efektivně formátovat články s ním jde, ale na složitější úpravy vzhledu si bez pluginu nebo CSS nevystačíte. Protože jsem líný a nechci kvůli drobnostem otevírat editor CSS, tak jsem hledal doplňky, co by to vyřešily, určené přímo pro Gutenberg. No a našel jsem docela slibné pluginy Ultimate Addons for Gutenberg a Page Builder Gutenberg Blocks – CoBlocks. Určitě jich bude víc.

Funkcí mají oba dva hodně, protože neumím udělat printscreen se všemi funkcemi z administrace, co oba pluginy mají, tak ho ani dělat nebudu a ani je zde nebudu vypisovat. Prostě mají možnost vkládat rychle různá hejblátka, šouplátka, tlačítka atd., ale také rychle formátovat jednotlivé bloky, co do velikosti nebo jim nastavovat různá odsazení, barvy, bordery a tak dále. Je to prostě stejné, jako u visual builderů, ale výhodou je to, že nemusíte nutně používat robustní řešení typu Divi nebo Elementor, když je jinak nevyužijete.

1. Použití Pluginů jako Kadence Blocks: Kadence Blocks je jeden z mnoha dostupných pluginů pro Gutenberg, který přidává rozšířenou sadu bloků a funkcí. Tyto nové bloky zahrnují například pokročilé galerie, tlačítka s dalšími stylovými možnostmi, nebo speciální layoutové bloky. Instalace Kadence Blocks je jednoduchá – stačí ji najít v WordPress plugin repository a nainstalovat do svého WordPress webu. Po aktivaci pluginu se nové bloky automaticky objeví v nabídce bloků v Gutenberg editoru.
2. Další Doporučené Pluginy pro Bloky: Kromě Kadence Blocks existuje řada dalších pluginů, které rozšiřují možnosti Gutenberg editoru. Mezi ně patří například Ultimate Addons for Gutenberg, CoBlocks nebo Stackable. Tyto pluginy nabízí širokou škálu nových bloků a funkcí, jako jsou pokročilé možnosti layoutu, animace, pokročilé typografické nástroje a mnoho dalšího. Výběr správného pluginu závisí na konkrétních potřebách vašeho projektu a stylu tvorby obsahu.

Jak jsem začal všude nasazovat Gutenberg

U jednoho z mých skomírajících affiliate projektů o Ukulele jsem už nutně potřeboval aktualizovat šablonu Hueman, kterou jsem jako každý zkušený WordPressák upravoval natvrdo bez child šablony. Vytvářením child šablon údajně WordPressáci ztratí ročně až 3000 hodin času. Hehe, kecám. Určitě víte, co taková blbost způsobí po aktualizaci.

Šablona byla už dost stará, rozpadala se, a mě se nechtělo hledat všechny ty provizorní úpravy, co jsem tam za léta udělal. Zároveň se mi nechtělo dělat je složitě znovu. No a protože je to projekt skoro nevýdělečný, tak jsem si řekl, že na něm provedu pokus s Gutenbergem a šablonou Astra, kterou jsem se snažil přeložit do Češtiny, aby si jí mohli užívat i lidi bez znalosti angličtiny. To je ale jiná písnička. Nicméně je to jedna z nejlepších WordPress šablon.

Taky jsem dlouho plánoval vyzkoušet na tom webu agresivní formu affiliate. Tedy nabízet produkty pomocí různých TOPovacích nebo doporučujících boxů.

Nejen pro tyto účely je v Gutenbergu možné ukládat si vytvořené bloky pro opakované použití. V praxi si nastajlujete blok, který pak jednoduše používáte ve více postech a vždycky jen změníte text a obrázky, ale jinak jeho vzhled pasuje do celkového dyzajnu webu. Já myslím, že tohle je super fičura, protože dřív jsem si musel ukládat různé bloky HTML kódu, co jsem chtěl opakovaně použití, do textových souborů nebo je různě vyhledávat ve starých článcích.

Protože mě rychlost práce s Gutenbergem vážně překvapila, a to hlavně u vytváření HP Ukulelko.cz, řekl jsem si, že by to chtělo otestovat trochu víc.

V tom se mi ozval jeden klient, který chtěl vytvořit webové stránky s rezervačním systémem, aby mohl půjčovat karavany online. Samozřejmě měl bláznivou představu o tom, jak by měly stránky vypadat, jak by tam měl ze stran přijíždět text a jaké další všelijaký blbiny tam musí být. Normálně bych mu vyhověl, to je jasný. Prachy jsou prachy. Naštěstí jsem mu to rozmluvil.

Nakonec jsme se domluvili, že ten web uděláme co nejjednodušší, aby šel lehce používat (hlavně na mobilech) a zákazník byl co nejrychleji odbaven bez toho, aby na webu musel bloudit mezi hromadou vizuálních hovadin. Tady se použití Gůti prostě nabízelo.

Tak jsem vytvořil web, který používá půjčovna karavanů Kladno. Web pro půjčovnu karavanů, který je postavený na Gutenbergu, CoBlocks (více dále) a pár CSS. CSS jsem musel použít z toho důvodu, že klient měl starožitné PCčko s XPčkama a starým neaktualizovaným Firefoxem, takže se mu některé prvky prostě vůbec nezobrazily.

No a takhle vypadá třeba stránka karavanu. Celá vytvořená v editoru Gutenberg. Vážně mě překvapila třeba ta galerie s náhledy. Tu takhle dokáže vytvořit samotný Gutenberg, ale pro náhledy fotografií pak potřebujete nějaký fancybox.

Proč vznikl Gutenberg?

Popravdě nevím a nechtělo se mi o tom nic hledat. Určitě to má být náhrada za pravěké WYSIWYG editory jako je TinyMCE. Ačkoli jsme s ním byli všichni zvyklí po léta pracovat, tak faktem je, že TinyMCE byl prostě jen na formátování textu (písma). Pokud jste chtěli formátovat článek nějak smyslupněji nebo upravit vzhled celé landing page, tak jste museli sáhnout po různých shortkódech, pluginech a vlastním CSS. No a tak přišel Gutenberg. A to je dělo na content UX. Tedy na opravdové formátování textů/stránek pomocí různých bloků a elementů tak, jak to známe z vizuálních builderů.

Jak už to u nasazování inovací bývá, tak i Gutenberg si se svým nástupem získal řadu negativních reakcí. I já jsem na něj nadával, protože jsem do té doby větší volovinu neviděl. Údajně měl/má podobný editor i Medium, ale to používají jen podivíni, takže nevím. Popravdě jsem okamžitě, po nasazení Gutenbergu WordPressem, rád přivítal plugin Klasický Editor, který Gutenberg editor deaktivoval a dal mi zpět můj starý dobrý TinyMCE, abych mohl dál bastlit stránky i články pomocí pluginu Shortcodes Ultimate, vlastních CSS a jiných fičurek.

No a proč o tom píšu

Určitě se najde ještě hodně odpůrců editoru WordPress Gutenberg. Těm chci ukázat, že dát mu šanci se vyplatí. No a pak jsem chtěl napsat něco o WP a rozporuplný Gutenberg se přímo nabízel. Jasně, že ho nejde používat všude a na ostatní klientské projekty se mi zatím nehodil, ale je to slibný pomocník, ze kterého se dá v budoucnu vytěžit daleko víc, než si teď dokážeme představit.