6. diel - Nový editor Gutenberg vs starý TinyMCE

V minulej lekcii, Konflikty pluginov, šablón, WordPress a ako ich riešiť , sme si povedali niečo málo ku konfliktom medzi pluginy a šablónami. Dnes sa bližšie pozrieme na sľúbený editor Gutenberg a urobíme si také menšie porovnanie.

Nový vek vyžaduje lepšie technológie a pokrok je prakticky nevyhnutný. Už veľmi dlho mal v sebe WordPress integrovaný TinyMCE editor. Ten v podstate vyzerá a funguje podobne ako Microsoft Word alebo Google Docs. Vie toho samozrejme oveľa menej, ale je veľmi obratný a použiteľný aj pre menej zdatných užívateľov. Čo bola a stále je jeho veľká výhoda.

U Gutenberg už sa bavíme o robustným mini systému, ktorý sa skladá z blokov. Každý blok má svoje možnosti, atribúty a už v administrácii potom môžete vidieť, ako bude výsledná grafika vyzerať - máte totiž k dispozícii tzv. Preview mode (náhľad).

TinyMCE

Vyššie vidíte, ako TinyMCE editor vyzeral. Jedno veľké textové pole, do ktorého sa Narva všetko, čo je potrebné. A to je ten problém - absolútne všetko by malo byť v ňom.

Na druhú stranu - ako ľahký textový editor slúži dobre a oproti Gutenberg má mnoho výhod. Stačí si ich vyskúšať v praxi a uvidíte, že písanie je prirodzenejšie a rýchlejší. Do určitej miery aj prehľadnejšie.

Avšak budúcnosť webov na WordPress (a v podstate webov všeobecne) závisí od možnosti užívateľov si web prispôsobiť a vo chvíli, keď textové pole je plné shortcodů, strácate prehľad.

Nižšie si všimnime práve shortcodu [google-map-v3] a nejakého [wpcol_1third] vnútri ktorého je nadpis a text.

Výstupom bude mapa a stĺpec s nadpisom a textom. Čo ale užívateľ prakticky nemusí pochopiť, keď na to len tak pozerá. A teraz si predstavte weby, kde prakticky všetko je iba v hranatých zátvorkách, niekde sa upíšete a chybu potom hľadáte pokojne aj hodiny.

Problém je teda jasný a jeho riešenie sa tvoria už pekných pár rokov. Externý vývojári totiž dodávajú vizuálne editory, ktoré tento textový blok zakryjú a do neho nahrávajú obrovské množstvo dát.

Svoje "prehľadné" bloky potom ukazujú namiesto toho, vďaka čomu si môžete zložiť pomerne dobrý web. Ukážkou môže byť Elementor nižšie, pozri:

Vľavo sú bloky a do čárkovaného bloku je potom prenášate, upravujete a dodávate obsah. Čo dáva užívateľovi nové možnosti a predovšetkým prehľad / kontrolu. O niečo podobné sa práve snaží aj Gutenberg.

GUTENBERG

Teraz sa pozrieme, ako sa web skladá s využitím Gutenberg. Príklad uvediem na svojom referenčnom projekte.

Dostal som do rúk grafiku, ktorú som si nakódoval. Jednotlivé bloky rozmiestnil do príslušných súborov - nadpis, text, carousel (slider), stĺpce (možnosť mať stĺpce a v nich nadpis + text).

Náhľad bloku a jeho nastavenie potom následne vyzerá takto:

A teraz vidíme ten znateľný rozdiel. Máme prehľad o tom, aký nadpis a akého typu na stránke bude. Môžeme dodať menšie text nad nadpisom, tlačidlá a obrázky (blok bol vytvorený pomocou ACF pluginu, budeme rozoberať viac v neskoršom článku).

Ak si potom prepneme na náhľad, vidíme, ako blok bude približne vyzerať na stránke = rozmiestnenie obsahu, veľkosť tlačidla, grafika tlačidlá, textace, nadpisy atď.

Pomocou týchto blokov si môžeme následne skladať akúkoľvek stránku, pretože bloky sú dostupné kdekoľvek po WordPress (kde vývojár určí).

A to je obrovská výhoda. Vy totiž už len nepíšete text na web, ale máte prakticky nekonečné možnosti, ako skladať web a jeho obsah.

Navyše nemusíte chodiť mimo administráciu, aby ste mali prehľad o tom, čo na stránke bude. Samozrejme náhľad celej stránky je lepšie, pretože sa uistíte, čo ako vyzerá a ako to funguje. Avšak si predstavte pozerať na náhľad stránky 20x kvôli nejakým opravám. Tento blokový systém tak v týchto prípadoch značne urýchľuje prácu.

Gutenberg má samozrejme aj nevýhody a nie je ich málo. Je to pomerne nové rozhranie, u ktorého sa teda s nedokonalosťou čiastočne počíta. Ale vďaka pomerne slušnému vývoju to za pár rokov bude veľmi dobrý a prepracovaný systém.

Môj pohľad vývojárov

Pre tvorbu webových stránok a eshopu sa mi bloku pozdáva au svojich klientov ho rapídne rozširujem. Vďaka pluginu ACF som schopný tvoriť robustné bloky a mať v šablóne poriadok a vývoj sa tak urýchľuje.

Blokom by potom technicky vzaté išli priraďovať funkcie, ktoré vedia novodobej prehliadača. Hovorím konkrétne o načítanie CSS a JS len, keď sú potrebné v samotnom HTML dokumente (body).

Predstavte si mať na webe 40 unikátnych blokov. Každý vie niečo iné. Teoreticky by ste potom mohli mať 2 súbory - CSS a JS. Tie sa budú načítavať všade, ale napríklad 80% vôbec nemusí byť použité.

Tým, že by sme mali súbory napríklad header.css, footer.css, title.css, slider.css zariadime to, že keď používateľ túto časť uvidí, prehliadač mu dané CSS načíta. Pokiaľ sa ale užívateľ nedostane ani blízko k pätičke webu, prečo načítavať?

Čo keď máme robustné slider, kde sú rôzne animácie. Prečo jeho súbory načítať aj keď na stránke nie je?

To všetko sú otázky, ktoré si vývojár musí položiť a následne na nich vedieť aj odpovedať. Je totiž rozdiel len tak vypľuť web a alebo dodať klientovi produkt, ktorý mu vydrží roky bez nutnosti väčších zásahov.

A to je pre dnešok všetko. Nabudúce, Bezpečnosť vo WordPress , sa bližšie pozrieme na tému bezpečnosť.

Kto stojí za článkom?

Ahoj, volám sa Pavol Mareš a od roku 2012 pracujem v digitálnom prostredí. Prešiel som si kódovaním, vývojom webov, grafikou a v tejto chvíli pomáham svojim klientom tvoriť kvalitné stránky na mieru.

Ponúkam služby - UX, UI (grafika), kódovanie (Gulp, SASS, HTML5, CSS3, JS) a nasadenie webu na WordPress (vlastné šablóny). Môžete sa pozrieť na moje referencie.

Rýchly kontakt: +420 776 256 020 / info @ mares-pavel.cz

Nabudúce, v lekcii Bezpečnosť vo WordPress , sa bližšie pozrieme na tému bezpečnosť.