WordPress 5.0 a Gutenberg – čo nové nám prinesú?

wordpress 5.0 gutenberg

WordPress 5.0 prinesie najväčšiu zmenu vo WordPress za posledné roky – nový editor, známy ako Gutenberg. Čo to vlastne je? Aké výhody a nevýhody prinesie?

Čo je to Gutenberg

Gutenberg je nový editor, ktorý nahradí doteraz používaný TinyMce editor. Editor TinyMce používa WordPress už niekoľko rokov. Gutenberg bude fungovať odlišným spôsobom. Namiesto práce na báze textového editora, bude používať tzv. bloky. Jednotlivé bloky sa budú dať upravovať priamo na stránke. Z blokov potom vytvoríte webovú stránku.

gutenberg-plugin

Ak sa vám tento spôsob vytvárania stránky zdá byť povedomý, máte pravdu. Blokový editor ako Visual Composer alebo Divi Builder používajú viaceré WordPress šablóny. Gutenberg bude k dispozícii od WordPress verzie 5.0. Ak si ho chcete vyskúšať skôr, v súčasnej dobe je dostupný ako plugin.

Gutenberg je nový editor, ktorý nahradí doteraz používaný TinyMce editor.

Pre lepšiu predstavu, takto bude vyzerať práca s týmto editorom:

WordPress Gutenberg
WordPress Gutenberg – ukážka

Čo nám tento editor prinesie?

Vývojári sľubujú zmenu zážitku tvorby obsahu stránky. Jeho cieľom je uľahčiť tvorbu stránky pomocou komplexného súboru nástrojov. Tento editor umožní užívateľom nie len písať články, ale prakticky vytvárať stránku. Jeho prínos ocenia hlavne začiatočníci v tvorbe webu.

Čo je to blok?

Bloky, s ktorými tento editor pracuje, sú spôsoby, ako vytvoriť štýl vzhľadu stránky. V rámci bloku je možné pracovať s textom ako v textovom editore.

Blokový editor si môžete predstaviť ako Visual Composer alebo Divi Builder, ktoré používajú viaceré WordPress šablóny.

Zjednodušenie vytvárania funkcionality stránky

Gutenberg zjednoduší proces práce so shortcodes, widgetmi, menu, meta boxmi a mnohými inými zložkami formátovania a vytvárania funkcionality stránky. Všetky tieto funkcie budú k dispozícii ako bloky. Mnoho funkcií formátovania vzhľadu internetovej stránky bude možné vykonať bez znalosti kódovania.

Úprava blokov

V editore sa dajú jednotlivé bloky ľahko editovať a posúvať po stránke na vybrané miesto. V rámci jedného bloku existuje viacero oblastí na zobrazenie panela nástrojov. Užívateľ sa tak bude môcť lepšie sústrediť na samotnú tvorbu stránky.

gutenberg-video
Bloky v editore

Možno vás tiež zaujíma, či bude možné v editore pridávať YouTube a Vimeo videá. Áno, bude. Pre každý audio a video príspevok vytvoríte jeho vlastný blok.

Ako Gutenberg ovplyvní už existujúce stránky?

Editor by nemal narušiť chod už existujúcej WordPress stránky. Všetky jej súčasti sa budú dať preniesť bez zbytočných zmien. Podporuje totiž už existujúcu funkcionalitu stránok. Pre prenos shortcodes a meta boxov sa postupne vytvárajú nástroje, ktoré to umožnia. Aspoň taká je teória, uvidíme čo prinesie prax 🙂

Shortcodes a meta boxy

Shortcodes budú ďalej pracovať bez zmien. Ak ich používate aj pri vytváraní stránky, budete ich môcť používať aj naďalej. Gutenberg ponúka nový spôsob ich vytvárania a náhľadu:

gutenberg-shortcode
Práca so shortcodes

Väčšina meta boxov bude ďalej pracovať bez zmien. Niektoré budú potrebovať aktualizáciu, iné editor pretvorí na bloky. Všetky ostatné zvyčajné typy príspevkov editor podporuje.

Výhody Gutenberg

Zmena tvorby a editácie webu prinesie:

  1. Nový spôsob vytvárania stránky ako celku prostredníctvom priamej editácie umožní zjednodušený prístup k úprave jej jednotlivých súčastí.
  2. Existujúcemu rozhraniu uberá na zložitosti tým, že zjednocuje viacero rozhraní.
  3. Prináša zmodernizovanie a zjednodušenie editácie, písania a zverejnenia stránky a jej súčastí.
  4. Uľahčuje pridávanie funkcionality webovej stránky.
  5. Intuitívny dizajn uľahčuje prácu s niektorými doterajšími funkciami ako napríklad prepájanie príspevkov a pridávanie obrázkov.
  6. Bloky zjednodušujú proces personalizácie stránky.
  7. Vďaka priamemu pohľadu na celkový vzhľad stránky sa otvárajú nové možnosti pre JavaScript.
  8. Umožňuje pracovať na jednotlivých sekciách niekoľkým ľudom naraz.
  9. Vďaka množstvu nástrojov editácie blokov umožňuje vytvárať komplexnú štruktúru webu.

Editácia blokov

Na stránke sa dá samostatne editovať každý blok. Naraz si môžete vytvoriť viacero blokov. Môžete tiež prepínať medzi obsahom a html.

gutenberg-menu
Ukážka editácie

Bloky sa dajú jednoducho posúvať po stránke. Toto je asi najväčším prínosom editora. Spôsob presúvania je oproti predchádzajúcemu spôsobu vytvárania stránky oveľa presnejší. Pre grafickú úpravu stránky je v každom kroku jej vytvárania k dispozícii živý náhľad.

Ďalšie funkcie WordPress Gutenberg

Logo Gutenberg
Logo Gutenberg

V tomto editore je tiež možné nastaviť zaradenie do kategórií, tagy, vzhľad úryvku príspevku a podobne.

Práca s editorom je veľmi intuitívna. Pochopí ju aj začiatočník. Pre pridanie bloku stačí stlačiť enter. Pre pridanie obrázkov, náhľadu a podobne, je potrebné zrolovať až naspodok stránky.

Veľmi dobre je nastavená funkcia Copy a Paste, formátovanie nadpisov a samotného textu.

Bloky používajú výstup HTML5.

Nevýhody a obavy používateľov

Napriek všetkým výhodám, ktoré nový editor sľubuje, majú používatelia a komunita WordPress isté výhrady:

  • Vykonávanie niektorých krokov vyžaduje viacero kliknutí než v pôvodnom editore.
  • Samotné menu obsahuje tri stĺpce. Sťažuje to vyhľadanie niektorých funkcií.
  • Meta boxy sú ukryté pod nastaveniami.
  • Viaceré staršie šablóny nepodporujú HTML5 formát.
  • V priebehu vývoja bola zmenená technológia. Stále je dosť nejasné, ako budú pracovať vnorené shortcodes.
  • Nie je celkom jasné, ako budú pracovať meta boxy pluginov. Ich úprava na bloky bude časovo veľmi náročná.
  • Používatelia pluginu sa sťažujú na nedostatočnú dokumentáciu pre vývojárov.
  • Zatiaľ tiež nie je celkom jasné, kedy bude WordPress 5.0 k dispozícii.
  • Nie sú jasné odpovede na otázky týkajúce sa spätnej kompatibility WordPress 5.0.

Čo ešte prinesie WordPress 5.0?

Okrem spomínaného editoru prinesie WordPress 5.0 aj ďalšie vylepšenia:

Bezpečnosť

WordPress 5.0, tak ako aj predchádzajúce verzie, kladie dôraz na bezpečnosť a prinesie aktualizácie aj pre túto oblasť. Pre lepšie zabezpečenie stránky WordPress odporúča používať SSL certifikát, silné heslá a dvojfázové overenie.

Front-end editor

Možno ste už vyskúšali Front-end plugin. WordPress 5.0 obsahuje Front-end editor. Vďaka nemu si budete môcť meniť a upravovať príspevky priamo na stránke. Pracuje na podobnom princípe ako Visual Composer, ale ľahšie sa ovláda. Front-end editor urýchli prácu pri úprave webovej stránky.

Optimalizácia pre mobilné zariadenia

WordPress neustále vylepšuje responzívnosť. Nemalý dôraz kladie na optimalizáciu pre mobily. WordPress 5.0 zabezpečí, že sa vaša stránka bude dať prezerať z ktoréhokoľvek zariadenia.

Orezanie pozadia stránky

WordPress 5.0 prináša vylepšenie aj do zmeny pozadia stránok. Zjednodušuje postup orezania obrázku. V terajšej verzii ho musíte odstrániť, orezať, znovu nahrať do knižnice a potom znovu umiestniť na stránku. Pri novom spôsobe výmeny obrázka na pozadí to bude o niečo jednoduchšie.

Slovo na záver

Zo skúsenosti si myslím, že zmena na Gutenberg neprebehne až tak ľahko ako tvorcovia prezentujú. Avšak napriek možným dočasným nepríjemnostiam  treba napredovať a inovovať. Preto som rád, že sa rozhodli zaradiť nový editor do WordPress čím skôr. Zaujímavé bude sledovať, ako táto zmena ovplyvní v súčasnosti obľúbené WordPress buildery, ako sú napríklad Visual ComposerDivi Builder.

🤷‍♂️ Neviete si rady? Pozrite si služby, ktoré vieme zabezpečiť.
Pomohol vám tento článok? Podporte nás 🧡
WordPress Návod v PDF

6 Komentáre

  1. Dobrý deň, potrebovala by som poradiť.Moja stránka sa volala miriamasante.sk, chcela by som rozloženie článkov ako mám na úvodnej stránke, tak by to bolo všade v každej kategorií. Kde si upravím rozloženie článkov v kategoriach ?
    Na pravej strane ako mám instagram je biely obdlžnik aby som mohla vstúpiť do instagramu. Ako zmením farbu? lebo je biely a nevidno tam písmo?
    Ďakujem za rady

    • Dobrý deň, nastavenie rozloženia článkov v kategóriách závisí od použitej šablóny – každá to má inak riešené. Ak to nenájdete v jej nastaveniach, tak to neumožňuje a je možné to spraviť zmenou v kóde šablóny. Čo sa týka farby tlačidla tak tam podobne – buď to nájdete v nastaveniach daného pluginu, alebo to neumožňuje a vtedy sa to dá spraviť cez CSS.

VLOŽIŤ KOMENTÁR

Please enter your comment!
Please enter your name here