Kompletná anatómia WordPress editora Gutenberg

Hĺbková analýza nového editora Gutenberg a jeho vplyvu na smerovanie WordPressu. V tomto článku sa dozviete niekoľko praktických trikov, ktoré sa osvedčia, najmä ak používate Gutenberg po prvýkrát.

Zdá sa, že Gutenberg je vo svete WordPressu v poslednom čase kontroverznou témou. Editor Gutenberg, ktorý je tento rok považovaný za najvýznamnejšiu zmenu WordPress 5.0, dostal zmiešané reakcie od vývojárov webu, ale aj od bežných ľudí. Celý tento chaos v skutočnosti komplikuje nazeranie na Gutenberg v jeho pravom svetle. Takže v tomto článku sa pokúsime urobiť v zmätku poriadok.

Budeme sa venovať nasledujúcim bodom:

1. Čo je Gutenberg?

Pomenovaný po Johannesovi Gutenbergovi, ktorý vynašiel mechanickú tlačiarenskú tlač, Gutenberg pre WordPress stránky predstavil svetu Matt Mullenweg na WordCamp Europe v roku 2017. Gutenberg je v podstate nový editor pre WordPress s desiatkami najmodernejších funkcií. Zjednodušuje tvorbu webových stránok ako aj ich úpravy, pre priemerného netechnického používateľa.

Získal niekoľko superlatívnych prívlastkov, od “Nový zážitok pri publikovaní na WordPresse” po “Budúcnosť tvorby webstránok”. Niektorí skeptici si myslia, že je to klinec do rakvy pre WordPress. Okrem toho, Gutenberg bude viac než len editor WordPressu (o čom budeme hovoriť ďalej).

Umožňuje tvorcom webových stránok vytvárať webové stránky pomocou blokov, čo sú malé jednotky typu drag-and-drop. Nahrádza teda súčasný nekonzistentný a rušivý proces prispôsobovania. V čase písania tohto článku je Gutenberg stále doplnkom. Komunita ho však plánuje tento rok zlúčiť s WordPress 5.0.

2. Viac ako iba editor

Gutenberg nie je len editor, pretože vám umožňuje spracovávať obsah webových stránok v prispôsobiteľných blokoch. Nemusíte ovládať HTML alebo písať krátke kódy. Celé rozloženie webu (back-end aj front-end) môžete ovládať z jednej konzoly.

Tento nový editor sa pokúša skombinovať najlepšie funkcie z oboch doplnkov na tvorbu stránok vo wordpresse, ako sú Divi a Visual Composer, ako aj z kutilských platforiem, ako sú Medium, Wix a Squarespace. Rovnako ako aj tieto doplnky na vytváranie stránok, tak aj vy môžete spravovať rozloženie webstránok cez jediné rozhranie.

Znamená to koniec platforiem ako Divi a Elementor? Toto je téma pre ďalší článok, ale krátka odpoveď je - nie. Je nepravdepodobné, že Gutenberg tieto doplnky úplne nahradí. Môžete ich naďalej používať, aj keď sa Gutenberg stane predvoleným editorom.

3. Čo Gutenberg zmení na WordPresse?

Jediným účelom editora Gutenberg je poskytnúť alternatívu k súčasnému otvorenému textovému editoru, nehovoriac o ťažko zapamätateľných krátkych kódoch, s agilným a vizuálnym používateľským rozhraním (UI). Na rozdiel od súčasného editora WordPress teda nemusíte:

• importovať obrázky, multimédiá a schválené súbory z knižnice médií alebo pridávať HTML kódy;
• kopírovať a vkladať odkazy;
• písať krátke kódy pre špecifikáciu rôznych doplnkov;
• vytvárať odporúčané obrázky, ktoré sa majú pridať v hornej časti príspevku alebo stránky;
• pridávať widgety pre obsah na bočnej strane stránky.

Stručne povedané, Gutenberg nemení fungovanie WordPressu. Mení však spôsob, akým s nimi vlastníci webových stránok (alebo tvorcovia) interagujú. Namiesto množstva krátkych kódov a metaboxov budete používať jednoduché bloky.

Čo sú bloky?

Blok považujte za najzákladnejšiu jednotku nového editora. Budú základnými kameňmi WordPress 5.0. Inými slovami, všetko - vrátane obsahu, obrázkov, úvodzoviek, galérií, titulných obrázkov, zvuku, videa, nadpisov, vložení, vlastných kódov, odsekov, oddeľovačov a tlačidiel - sa zmení na bloky. Nakoľko môžete každý blok presunúť myšou, identifikácia týchto položiek a ich umiestnenie na stránke je oveľa jednoduchšie.

4. Inštalácia Gutenbergu

Najnovšiu Gutenberg verziu si môžete stiahnuť priamo z úložiska WordPress. Môžete ho vyhľadať aj v časti doplnkov „Pridať nové“ na svojom paneli WordPress. Na inštaláciu editora Gutenberg však budete potrebovať najnovšiu verziu WordPress (verzia 4.8 alebo novšia).

• Prihláste sa do hlavného panela správcu WordPress.
• Prejdite do ponuky Pluginy na ľavej strane menu.
• Kliknutím na „Pluginy“ otvoríte ponuku „Pridať nové“.
• Do vyhľadávacieho poľa v ľavom hornom rohu zadajte „Gutenberg“.
• Vo výsledkoch uvidíte doplnok Gutenberg.
• Kliknite na tlačidlo „Inštalovať teraz“.
• Kliknutím na tlačidlo „Aktivovať“ spustíte doplnok.

Kroky pre inštaláciu Gutenberg

5. Preskúmanie Gutenberga

Po nainštalovaní a aktivácii zobrazí Gutenberg ikonu na ľavom paneli s ponukami. Pri prvom spustení uvidíte nový vzorový príspevok s názvom „Gutenberg Demo“. Pred vytvorením vlastného príspevku si môžete zacvičiť na ukážke.

A. Pridať nový

Prejdite na položku „Príspevky“ na ľavom paneli s ponukou. Nový príspevok sa najskôr otvorí v Gutenbergu. Neskôr ho môžete upravovať ako v klasickom editore, tak aj v Gutenbergu.

Pridanie nového príspevku do Gutenberg

B. Editácia

Prejdite do ponuky „Príspevky“ a umiestnením kurzora myši na uložený príspevok zobrazte možnosť výberu medzi dvoma editormi. Aj keď je zatiaľ k dispozícii možnosť klasického editora, s najväčšou pravdepodobnosťou bude odstránená zavedením WordPress 5.0.

Úpravy príspevku v Gutenbergu

C. Prepínanie medzi editormi

Pri úprave príspevku môžete tiež prepínať medzi týmito dvoma editormi. Kliknutím na rozbaľovaciu ponuku v pravom hornom rohu môžete prepínať medzi režimom vizuálneho editora a textovým editorom (t. j. kódom). Medzi editormi môžete tiež prepínať pomocou skratky Ctrl+Shift+Alt+M.

D. Skopírujte všetok obsah

Táto funkcia umožňuje kopírovať všetok obsah vo verzii HTML jediným kliknutím. Túto funkciu môžete otvoriť v oboch editoroch kliknutím na rozbaľovaciu ponuku v pravom hornom rohu.

Nástroj „Kopírovať všetok obsah“ v Gutenbergu

E. Štruktúry obsahu

Táto funkcia umožňuje spočítať počet slov v celom príspevku. Jediným kliknutím tiež zobrazíte počet nadpisov, odsekov a blokov. Kliknite na informačnú ikonu (i) v ľavej hornej oblasti.

F. Obnoviť a odvolať

Tieto možnosti nájdete vedľa informačnej ikony (i). Umožňujú vám vrátiť alebo znova obnoviť posledný príkaz.

G. Nastavenia stránky a dokumentu

Takto môžete meniť rôzne nastavenia stránok a dokumentov. Nájdete ho na pravom paneli s ponukou. Môžete vykonať nasledujúce úpravy:

• Nastaviť príspevok ako verejný alebo súkromný.
• Zmeniť dátum zverejnenia.
• Vybrať formát príspevku.
• Pridať alebo upraviť kategórie a značky.
• Nahrať obrázky.
• Napísať úryvok.
• Povoliť a zakázať komentáre, spätné odkazy a spätné odkazy.

H. Prilepiť na prednú stranu

Táto funkcia sa vám bude hodiť, ak prevádzkujete blog. Keď ju zapnete v nastaveniach dokumentu, daný príspevok sa vždy zobrazí na titulnej stránke vášho blogu. Ak ho chcete následne odstrániť z titulnej stránky, funkciu stačí jednoducho znova vypnúť.

Prilepenie vášho príspevku na titulnú stránku.

I. Používanie blokov

Ako už bolo spomenuté, bloky sú základnou jednotkou nového editora Gutenberg. Aby ste mohli Gutenberg využívať efektívne, musíte pochopiť, ako tieto bloky používať. Postupne odhalíme hlavné bloky jeden po druhom. Kliknutím na tlačidlo plus (+) vedľa možnosti obnoviť/odvolať otvoríte ponuku blokov.

Spoločné bloky

Spoločné bloky vám umožňujú pridať prvky potrebné na vytvorenie bohatého používateľského rozhrania UI.

• Odsek
  Blok odsekov má niekoľko vynikajúcich funkcií, ako napríklad vlastné veľkosti písma, veľké písmená, farby pozadia a farby textu. Tiež tu môžete pridať viac tried CSS.
• Obrázky
  Tento prvok prichádza s novou funkciou, ktorá umožňuje prepínať medzi rozložením galérie a obrázka. Získate tiež väčšiu kontrolu nad obrázkami, pretože pre každý obrázok môžete nastaviť konkrétne rozmery, percentuálne pomery veľkosti a alternatívny textový popis.
• Medzi ďalšie prvky patria:
• • citácie,
  • galérie,
  • titulné obrázky,
  • nadpisy,
  • zoznamy,
  • audio,
  • súbory,
  • podnadpisy,
  • video.

Formátovanie

Ako už názov napovedá, v týchto blokoch sú zahrnuté všetky formátovacie nástroje.

• Tabuľka
  Pridanie tabuľky pomocou vlastného kódu HTML bola namáhavá práca. S blokom tabuľky je však úloha oveľa ľahšia. Ste schopní pridávať a odstraňovať riadky a stĺpce tabuľky bez kódovania.
• Vlastné HTML
  V Gutenbergu môžete použiť vlastný kód HTML. A príjemnou časťou je, že môžete vložiť kód a zobraziť ukážku v samotnom bloku.

Vlastné HTML v Gutenbergu

• Medzi ďalšie prvky patria:
• • kód,
  • klasický,
  • predformátovaný,
  • citát
  • verš.

Rozloženie

Použite svoju fantáziu na vytvorenie ohromujúceho rozloženia pomocou tohto bloku. Každý prvok v tomto bloku má vynikajúce vlastnosti.

• Tlačidlo
  Pomocou tohto bloku môžete pridať tlačidlá ako „Prihlásiť sa na odber“ a „Kúpiť“. Má rôzne možnosti vrátane zarovnania a štýlov písma. Môžete tiež nastaviť farbu pozadia a tvar tlačidla.
• Stĺpce (beta)
  Vytváranie stĺpcov v editore založenom na kóde je časovo náročné a namáhavé. Tento blok umožňuje pridať textové stĺpce. V jednom riadku môžete pridať jeden až šesť stĺpcov.
• Ďalšie prvky vrátane:
• • prečítať viac,
  • zlom strany,
  • oddeľovač,
  • medzerník.

Widgety

Tieto bloky vám umožňujú pridať archív, kategórie, najnovšie príspevky a najnovšie komentáre jediným kliknutím kamkoľvek na stránke. Tieto prvky ste schopní upraviť aj bez kódovania.

• Posledný príspevok
  Pomocou tohto prvku bloku môžete zobraziť príspevky v mriežke alebo v zozname, usporiadať ich do kategórií a zoradiť podľa abecedy alebo podľa dátumu zverejnenia. Môžete si tiež zvoliť zobrazenie dátumu zverejnenia.

Embeds

Pomocou týchto blokov môžete veľmi ľahko vložiť čokoľvek do príspevku. Či už chcete pridať odkaz na YouTube alebo Twitter, je to veľmi jednoduché a rýchle. Všetko, čo musíte urobiť, je vložiť URL do daného prázdneho priestoru a Gutenberg za vás vloží kód. Tu je príklad vloženia odkazu na YouTube:

Vložený odkaz na YouTube do Gutenbergu

Opätovne použiteľné bloky

Opätovne použiteľné bloky poskytujú vývojárom vylepšenú použiteľnosť. Akýkoľvek blok môžete premeniť na opakovane použiteľný blok, aby ste ho mohli použiť na inom mieste. Môžete ho tiež upraviť a uložiť ako nový blok na opakované použitie.

Môžete tiež vidieť ukážku opakovane použiteľného bloku. Všetky opakovane použiteľné bloky sú dostupné v možnostiach „Zdieľaný blok“. Najdôležitejšie je, že ich môžete kedykoľvek zmeniť na obyčajný blok.

Opakovane použiteľné bloky v Gutenbergu 

Najpoužívanejšie

Pod touto voľbou uvidíte najpoužívanejšie bloky pre rýchly prístup. Prípadne môžete pomocou vyhľadávacieho poľa vyhľadať blok podľa názvu.

J. Upraviť blok

Ak chcete upraviť ktorýkoľvek blok, otvorte rozbaľovaciu ponuku kliknutím v pravom hornom rohu bloku. Uvidíte rôzne možnosti, napríklad úpravy ako HTML, duplikovanie a pridanie k opakovane použiteľným blokom.

K. Vložiť blok

Pomocou tejto funkcie môžete kedykoľvek vložiť nový blok. Keď presuniete myš na blok, zobrazí sa ikona plus (+). Kliknutím na ňu vložíte nový blok.

L. Slash Autocomplete

Funkcia Slash Autocomplete je k dispozícii v Gutenberg 1.1.0 a novších verziách. Je pravdepodobné, že podobnú funkciu v Slacku už poznáte. Bol pridaný, aby sa znížilo množstvo klikania, ktoré je potrebné na vytvorenie nových blokov.

Po otvorení nového bloku vyberte stlačením klávesy / (lomítko) na klávesnici niektorú z možností automatického dopĺňania. Funguje iba v predvolenom bloku odsekov, ale v budúcnosti by sa mohol stať súčasťou iných typov blokov.

Slash Autocomplete v Gutenbergu

M. Presun blokov

Gutenberg vám umožňuje posúvať každý blok hore a dole. Pomocou šípok (na ľavej strane každého bloku) ich môžete posúvať zvisle.

6. Gutenberg - Klady a zápory

Klady

• Na vytvorenie vlastného rozloženia blogového príspevku alebo vytvorenie web stránky nie sú potrebné žiadne technické zručnosti. Funguje to ako médium, takže si ho ľudia, ktorí hľadajú tento štýl práce a užívateľsky prívetivé úpravy, zamilujú.
• Umožňuje vám vytvoriť konzistentný a pokročilý dizajn bez toho, aby ste sa spoliehali na TinyMCE.
• Bloky sú navyše vynikajúcim konceptom. Umožňujú vývojárom intuitívne vytvárať zložité rozloženia. Ak s tvorbou webov vo WordPresse nemáte vôbec žiadne skúsenosti, alebo ste nováčikom, stále ho budete milovať.
• Samotný editor Gutenberg funguje dobre na mobilných zariadeniach (je responzívny). Na rozdiel od svojho predchodcu umožňuje rýchle úpravy na cestách. Vývojári, ktorí sú zdatní v mobilných zariadeniach, v skutočnosti dokážu viac ako len niekoľko rýchlych úprav.
• Ukázalo sa, že vďaka zväčšenému priestoru obrazovky majú používatelia a vývojári menej rušivý zážitok z editovania.
• Hardcore vývojári môžu stále vytvárať prispôsobené opakovane použiteľné bloky pomocou HTML5. Zdá sa teda, že je to prínos pre oboch, aj pre netechnických používateľov.

Zápory

• V beta verzii editora WordPress zatiaľ podpora Markdown nie je.
• Stále nepodporuje responzívne stĺpce. Aby táto funkcia reagovala, budete musieť urobiť nejaké vlastné kódovanie. Používanie tejto funkcie v mobilných zariadeniach teda momentálne nie je možné.
• Možnosti rozloženia návrhu sú v tejto chvíli nedostatočné.
• Niektorí používatelia WordPress môžu mať problémy s kompatibilitou.
• Získate iba čiastočnú podporu pre meta boxy, vývojári však tvrdo pracujú na rozšírení podpory meta boxov.
• Spätná kompatibilita bude pre väčšinu vývojárov primárnym záujmom. Pochová súčasné doplnky a témy, najmä tie, ktoré si vyžadujú integráciu s TinyMCE.

7. Pochopenie problémov s kompatibilitou

Napriek svojej jednoduchosti a svižnosti nemusí byť Gutenberg šálkou čaju pre každého. Väčšina WordPress vývojárov s ním môže mať problém pracovať, najmä na začiatku. Budú si musieť natrénovať reflexy, aby si zvykli na nové UX.

• Z dôvodu problému so spätnou kompatibilitou budete musieť aktualizovať veľa doplnkov a tém, aby ste sa uistili, že sú plne kompatibilné s novým editorom.
• Bloky sú zatiaľ viac zamerané na obsah. Výsledkom je, že Gutenbergu chýba presnosť a kontrola nad rozložením vlastných webových stránok.
• Skratky sú nahradené blokmi skratiek. Z bloku widgetov však budete môcť naďalej pridávať krátke kódy.
• Meta boxy budú k dispozícii pod novým názvom a novým používateľským rozhraním. Konfliktné meta boxy pravdepodobne povedú namiesto Gutenbergu ku klasickému editoru. Aj keď by sa tento systém mohol ukázať ako užitočný, niektoré meta boxy nebudú v Gutenbergu podporované.
• Vlastné typy príspevkov sú podporované a v Gutenbergu zostávajú spätne kompatibilné.
• Po integrovaní do jadra WordPressu nebudete môcť Gutenberg vypnúť. Môžete ho však kedykoľvek deaktivovať pomocou oficiálneho pluginu.

8. Gutenberg je budúcnosť

Na rozdiel od všeobecného názoru, Gutenberg nenahrádza súčasný textový editor. Je to nový spôsob vytvárania webových stránok vo WordPresse. Radi to považujeme za Facebook pre WordPress.

Na zverejňovanie vecí na Facebooku alebo inej platforme sociálnych médií nemusíte byť počítačový expert. Gutenberg je iba spôsob, ako priniesť túto jednoduchosť a flexibilitu do WordPressu, aby ľudia nepotrebovali vedieť kódovať, ak chcú vytvárať a publikovať webové stránky. Preto si myslím, že to bude budúcnosť nielen pre WordPress, ale aj pre web všeobecne.

Pravdaže, Gutenberg má pred sebou ešte dlhú cestu. Ľudia (vrátane nás) mali niekedy problémy s jeho implementáciou, ale čoskoro tu budeme mať všade témy, doplnky a nástroje použiteľné pre Gutenberg. Napriek tomu musíme všetci niekde začať. Takže máte možnosť byť už od začiatku súčasťou tejto zmeny.