Náhled Wordpress editoru Gutenberg

WordPress Gutenberg: Jednoduché skládání stránek a ladění landing pages

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.

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.

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.

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.

Tahle metoda affiliate mi tam úplně vyhořela, ale o tom snad jindy.

Náhled webu o ukulele Ukulelko.cz
HP webu o ukulele – Ukulelko.cz

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.

Ukázka editoru Gutenberg
Tvrdá designerská práce s Gutenbergem

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.

Web na Gutenbergu
Jednoduchá produktová stránka

Pluginy pro Gutenberg

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.

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.

Diskuze

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *