Čo je nové pri tvorbe web stránok vo WordPresse - Gutenberg editor

Od svojho vydania pred 8 mesiacmi sa Gutenberg výrazne vylepšil a ponúka používateľskú skúsenosť oveľa bohatšiu ako všetko ostatné, čo bolo možné na WordPress. Pozrime sa na jeho najnovší vývoj a na to, kam smeruje.

Je to už 8 mesiacov, čo bol Gutenberg uvedený ako predvolený editor obsahu vo WordPress. Podľa toho, koho sa pýtate, môžete počuť, že Gutenberg je najhoršia alebo najlepšia vec, ktorá sa na WordPresse stala. Zdá sa však, že väčšina ľudí súhlasí s tým, že Gutenberg sa neustále zlepšuje. Pri súčasnom tempe vývoja je len otázkou času, kedy budú vyriešené jeho najvýznamnejšie problémy a užívateľský zážitok sa stane skutočne príjemným.

Gutenberg neustále pokračuje. Pri jeho používaní zažívam šialené nepríjemnosti, ako napríklad plávajúce možnosti - floating options, na ktoré nemôžem kliknúť, pretože sa namiesto nich vyberie blok umiestnený nižšie, neintuitívne zoskupenie blokov, stĺpce s priveľkými medzerami, ktoré ich robia zbytočnými, a prvok „+“, ktorý kričí najviac z celej stránky o moju pozornosť. Problémy, s ktorými sa stretávam, sú však stále relatívne zvládnuteľné (čo je vylepšenie oproti predchádzajúcim verziám) a navyše Gutenberg začal ukazovať svoje zjavné výhody: Mnoho z jeho najnaliehavejších chýb bolo vyžehlených, problémy s prístupnosťou sa neustále zlepšujú a pribúdajú nové a zaujímavé funkcie. To, čo zatiaľ máme, je celkom slušné a bude to len a len lepšie a lepšie.

Pozrime sa na nový vývoj, ktorý nastal od uvedenia Gutenberga a kam smeruje.

Poznámka: Ak chcete získať viac informácií o tejto téme, odporúčam vám sledovať prednášku zakladateľa WordPress Matta Mullenwega počas nedávneho WordCamp Europe 2019.

Prečo bol Gutenberg potrebný

Gutenberg dorazil práve včas, aby naštartoval omladenie WordPressu a pokúsil sa znova urobiť WordPress lákavým pre vývojárov (a zvrátiť jeho súčasný stav pre niektorých obávanej platformy). WordPress prestal vyzerať atraktívne kvôli tomu, že sa sústredil na neporušenie spätnej kompatibility, ktoré bránilo do WordPressu začleniť moderný kód, vďaka čomu vyzeral chabo v porovnaní s novšími, lákavejšími variantmi.

Mnoho ľudí tvrdí, že WordPress nebol v ohrození života (koniec koncov, ovláda viac ako 1/3 webu), takže Gutenberg nebol skutočne potrebný a môžu mať pravdu. Aj keď však WordPress nebol v žiadnom bezprostrednom nebezpečenstve, odpojením od moderných vývojových trendov smeroval k zastaraniu, pravdepodobne nie v krátkodobom horizonte, ale určite v strednodobom až dlhodobom horizonte. Pozrime sa, ako Gutenberg vylepšuje prostredie pre rôzne zainteresované strany WordPress: vývojárov, správcov webových stránok a používateľov webových stránok.

Vývojári sa v poslednej dobe ujali vývoja pri tvorbe webov prostredníctvom knižníc JavaScriptu Vue a React, pretože (okrem iných dôvodov) ide o výkonné a pohodlné komponenty, čo sa prejaví v spokojnosti vývojárov. Skočením do rozbehnutého vlaku a prijatím tejto techniky umožňuje Gutenberg WordPressu opäť prilákať vývojárov a umožniť im kódovať spôsobom, ktorý je pre nich potešiteľný.

Správcovia webových stránok môžu jednoduchšie spravovať svoj obsah, zvyšovať svoju produktivitu a dosahovať veci, ktoré predtým neboli možné. Napríklad umiestnenie videa na Youtube cez blok je jednoduchšie ako cez TinyMCE Textarea, bloky môžu slúžiť na optimalizované obrázky (komprimované, veľkosťou zmenené podľa zariadenia, prevedené do iného formátu atď.), čo eliminuje potrebu robiť to ručne, a možnosti WYSIWYG (What You See Is What You Get) sú dostatočne slušné na to, aby poskytovali náhľad v reálnom čase na to, ako bude obsah vyzerať na webových stránkach.

Poskytnutím prístupu k výkonným funkciám budú mať používatelia webových stránok vyššiu spokojnosť s prehliadaním stránok, podobne, ako sú spokojní so skúsenosťou pri používaní vysoko dynamických a užívateľsky prívetivých webových aplikácií, ako sú Facebook alebo Twitter.

Spoločnosť Gutenberg navyše pomaly, ale isto modernizuje celý proces tvorby web stránok. Aj keď ho v súčasnosti možno použiť iba ako editor obsahu, v budúcnosti sa z neho stane plnohodnotný nástroj na tvorbu webových stránok, ktorý umožní umiestniť komponenty (nazývané bloky) kamkoľvek na stránku vrátane hlavičky, päty, bočného panela atď. (Spoločnosť Automattic, ktorá stojí za webom WordPress.com, už začala pracovať na doplnku pridávajúcom kompletné možnosti úprav svojich komerčných stránok, z ktorého by ho bolo možné prispôsobiť pre softvér WordPress s otvoreným zdrojom.) Prostredníctvom funkcie vytvárania webových stránok netechnický založení používatelia budú môcť na vlastnom webe veľmi ľahko pridať pokročilé funkcie, takže WordPress bude naďalej vítať väčšiu komunitu ľudí pracujúcich na webe (nielen vývojárov).

Rýchly vývoj

Jedným z dôvodov, prečo spoločnosť Gutenberg zaznamenala také rýchle tempo vývoja, je skutočnosť, že je hostená na GitHube, čo zjednodušuje správu kódu, problémov a komunikáciu v porovnaní s programom Trac (ktorý pracuje s jadrom WordPress).

Keďže je Gutenberg odpojený od jadra WordPress, môže ťažiť z rýchlej iterácie. Aj napriek tomu, že nová verzia WordPressu vychádza asi každé 3 mesiace, Gutenberg je k dispozícii aj ako samostatný doplnok, ktorý nové vydanie uvidí každé dva týždne (zatiaľ čo najnovšie vydanie WordPressu obsahuje Gutenberg verziu 5.5, najnovšia verzia pluginu je 6.2. ). Prístup k novej výkonnej funkcii pre naše stránky každé dva týždne je skutočne veľmi pôsobivý a umožňuje odomknúť ďalšie funkcie zo širšieho ekosystému (napríklad doplnok AMP vyžaduje pre niekoľko funkcií doplnok Gutenberg 5.8).

Headless WordPress podporuje všestranný vývoj

Jedným z vedľajších efektov Gutenbergu je to, že WordPress je čoraz viac „bezhlavý“, čo ďalej oddeľuje rendering (vykreslenie) aplikácie od správy obsahu. Je to preto, že Gutenberg je front-end client, ktorý interaguje s back-endom WordPressu prostredníctvom API (WP REST API), a vývoj Gutenbergu si vyžadoval neustále rozširovanie dostupných API. Tieto API nie sú obmedzené iba na Gutenberg; môžu byť použité spolu s akýmkoľvek client-side frameworkom, aby umožnil vývoj s použitím akéhokoľvek dev-stacku (kombinácie programovacích jazykov).

Príkladom stack, ktorý môžeme využiť pre našu aplikáciu WordPress, je JAMstack, ktorý presadzuje architektúru založenú na statických stránkach rozšírených prostredníctvom služieb tretích strán (API) tak, aby sa stali dynamickými. Týmto spôsobom môžeme hosťovať náš obsah na WordPresse (využívať ho ako systém na správu obsahu, v čom je skutočne dobrý), vytvoriť aplikáciu, ktorá pristupuje k obsahu prostredníctvom API, vygenerovať statickú stránku a nasadiť ju na Content Delivery Network, ktorá poskytuje nižšie náklady a vyššiu rýchlosť prístupu.

Nové funkcionality

Poďme sa hrať s Gutenbergom a pozrime sa, aké funkcie boli pridané za posledných pár mesiacov.

Správca blokov

Prostredníctvom správcu blokov môžeme rozhodnúť, ktoré bloky budú k dispozícii v editore obsahu; všetky ostatné budú deaktivované. Odstránenie prístupu k nežiadúcim blokom môže byť užitočné v niekoľkých situáciách, napríklad:

• Mnoho doplnkov je zväzok blokov; pri inštalácii takéhoto pluginu sa všetky ich bloky pridajú do editora obsahu, aj keď potrebujeme iba jeden
• S jadrom WordPressu kooperuje až 40 poskytovateľov, pre aplikáciu však možno budeme pravdepodobne potrebovať iba zopár z nich, napríklad Vimeo a Youtube
• Mať k dispozícii veľké množstvo blokov nás môže ohromiť a narušiť náš pracovný postup pridaním ďalších vrstiev, v ktorých sa používateľ musí orientovať, čo vedie k neoptimálnemu využitiu času; Dočasné deaktivovanie nepotrebných blokov nám preto môže pomôcť zvýšiť efektívnosť
• Podobne, ak máme iba bloky, ktoré potrebujeme, vyhneme sa potenciálnym chybám spôsobeným použitím nesprávnych blokov;

Povolenie / zakázanie blokov prostredníctvom správcu

Krycí blok s vnorenými prvkami

Krycí blok (ktorý nám umožňuje pridať nadpis nad obrázok na pozadí, ktorý je všeobecne vhodný na vytváranie hlavičiek hero headers), teraz definuje svoje vnútorné prvky (t.j. nadpis a tlačidlá, ktoré je možné pridať na vytvorenie výzvy na akciu) ako vnorené prvky, čo nám umožňuje jednotne upravovať jeho vlastnosti naprieč blokmi (napríklad môžeme nadpis zvýrazniť tučným písmom a pridať k nemu odkaz, umiestniť jedno alebo viac tlačidiel a zmeniť farbu ich pozadia a ďalšie).

Krycí blok s vnorenými prvkami

Blokové zoskupenie a vnorenie

Pozor: Tieto funkcie majú stále veľmi výrazné nedostatky! Venuje sa im však dostatok času a energie, takže môžeme očakávať, že čoskoro budú fungovať hladko.

Zoskupenie blokov umožňuje zoskupiť niekoľko blokov dohromady, takže pri ich posúvaní nahor alebo nadol na stránke sa všetky pohybujú spoločne. Vnorenie blokov znamená umiestniť blok dovnútra bloku a hĺbka vnorenia nie je obmedzená, takže bloky môžeme mať vo vnútri blokov a v nich ďalšie bloky ... (už ste ma dostali). Vnorenie blokov je obzvlášť užitočné na pridávanie stĺpcov do rozloženia prostredníctvom bloku stĺpcov a potom každý stĺpec môže obsahovať akýkoľvek druh bloku, napríklad obrázky, text, videá atď.

Bloky môžu byť zoskupené a vložené do seba

Migrácia už existujúcich widgetov

Zatiaľ čo v minulosti existovalo niekoľko spôsobov pridávania obsahu na stránku (obsah TinyMCE, krátke kódy, widgety, ponuky atď.), bloky sa tomu všetkému snažia dať jednotnú formu. V súčasnosti staršie kódy, napríklad widgety, migrujú do blokového formátu.

Nedávno bol widget „Posledné príspevky“ implementovaný ako blok, ktorý podporuje náhľad v reálnom čase a ukazuje, ako celkový vzhľad rozloženia vyzerá (zmena počtu slov, ktoré sa majú zobraziť, ukážka alebo celý príspevok, zobrazenie dátumu alebo nie, atď.)

Widget „Najnovšie príspevky“ obsahuje niekoľko možností na prispôsobenie svojho vzhľadu

Pohybová animácia

Pohybovanie blokov hore alebo dole po stránke viedlo k prudkému prechodu, čo niekedy sťažovalo pochopenie toho, ako boli bloky znova usporiadané. Od verzie Gutenberg 6.1 nová funkcia pohybovej animácie rieši tento problém pridaním realistického pohybu zmien, napríklad pri vytváraní, odstraňovaní alebo zmene poradia bloku, čím poskytuje výrazne vylepšenú vizuálnu stopu akcií vykonaných pri usporadúvaní blokov.

Plynulý efekt pri usporadúvaní blokov

Funkčnosť (dúfajme) čoskoro

Podľa zakladateľa WordPress Matta Mullenwega je doposiaľ implementovaných iba 10% kompletného plánu Gutenbergu, takže nás čaká veľa zaujímavých nových vecí. Práce na nových funkciách uvedených nižšie už buď začali, alebo tím s nimi momentálne experimentuje.

• Adresár blokov
  Nová položka na najvyššej úrovni v programe wp-admin, ktorá zabezpečí nájdenie bloku. Týmto spôsobom je možné bloky inštalovať nezávisle bez toho, aby ste ich museli dodávať prostredníctvom doplnku. 
• Bloky navigácie
  V súčasnosti musia byť ponuky navigácie vytvárané prostredníctvom ich vlastného rozhrania. Avšak čoskoro ich budeme môcť vytvoriť prostredníctvom blokov a umiestniť ich kdekoľvek na stránke. 
• Inline inštalácia blokov
  Aby bolo možné rozširovať funkcionalitu blokov, ďalším logickým krokom je možnosť inštalovať nový blok za chodu, kde je to najviac potrebné: V editore príspevkov. Budeme môcť nainštalovať blok počas písania príspevku, pomocou nového bloku vygenerovať jeho HTML, uložiť jeho výstup na príspevok a odstrániť blok, a to bez toho, aby sme niekedy prechádzali na inú stránku v správcovi. 
• Snap to grid when resizing images
  Keď na svoj príspevok umiestnime niekoľko obrázkov, zmena ich veľkosti na rovnakú šírku alebo výšku sa môže ukázať ako bolestivý proces opakovaného pokusu a omylu, až kým nedosiahne správne hodnoty. Čoskoro bude možné vziať (snap) obrázok na virtuálnu mriežku, ktorá sa objaví na pozadí počas toho, ako budete meniť veľkosť obrázka.

WordPress sa stáva atraktívnym (znova)

Existuje niekoľko dôvodov, vďaka ktorým sa WordPress čoskoro stane tak atraktívnou platformou na tvorbu webstránok, ako to bolo kedysi. Pozrime sa na pár z nich.

Modernizácia PHP 

Snaha WordPressu o modernizáciu nekončí začlenením moderných knižníc a nástrojov JavaScriptu (React, webpack, Babel): Rozširuje sa tiež na jazyk PHP. Minimálna verzia PHP pre WordPress bola nedávno zvýšená na 5.6 a mala by byť aktualizovaná na verziu 7.0 už v decembri 2019. PHP 7 ponúka oproti PHP 5 pozoruhodné výhody, predovšetkým viac ako zdvojnásobuje jeho rýchlosť a novšie verzie PHP (7.1 , 7.2 a 7.3) sa stali ešte rýchlejšími.

Aj keď sa zdá, že neexistujú oficiálne plány na ďalšiu aktualizáciu z PHP 7.0 na jej neskoršie verzie, po dosiahnutí určitej hybnej sily je celkom jednoduché ju udržať. A samotné PHP sa tiež neúnavne vylepšuje. Nadchádzajúce PHP 7.4, ktoré má byť vydané v novembri 2019, bude obsahovať množstvo nových vylepšení, vrátane funkcií šípok a mechanizmus na predbežné načítanie knižníc a rámcov do OPCache na ďalšie zvýšenie výkonu.

Opätovná použiteľnosť kódu naprieč platformami

Veľkým vedľajším účinkom odpojenia Gutenbergu od WordPressu je, že ho možno integrovať aj do iných frameworkov. A presne to sa stalo! Gutenberg je teraz k dispozícii pre Drupal a pre Laraberg (pre Laravel) bude čoskoro oficiálne uvedený (v súčasnosti sa testuje jeho beta verzia). Krása tohto fenoménu je, že prostredníctvom Gutenbergu môžu všetky tieto rôzne frameworky teraz zdieľať / opätovne používať svoje kódy!

Záver

Nikdy nebol lepší čas byť webovým vývojárom. Tempo vývoja pre všetky príslušné jazyky a technológie (JavaScript, CSS, optimalizácia obrázkov, variabilné písma, cloudové služby atď.) je ohromujúce. WordPress sa donedávna díval na tento vývojový trend zvonku a vývojári mohli mať pocit, že im uteká vlak modernizácie. Teraz však prostredníctvom Gutenbergu WordPress drží krok a snaží sa tak dohnať zameškané.

Gutenberg ešte nemusí byť plne funkčný, pretože má pred sebou veľa problémov, ktoré treba vyriešiť, a ešte môže nejaký čas trvať, kým skutočne splní svoje sľuby. Zatiaľ to však vyzerá dobre a s každým novým vydaním vyzerá čoraz lepšie: Gutenberg neustále prináša nové možnosti pre WordPress ako aj pre tvorbu webov. Je to teda skvelý čas na prehodnotenie možnosti vyskúšať Gutenberga (teda ak ste tak ešte neurobili). Každý, kto nejakým spôsobom pracuje s WordPressom (správcovia webových stránok, vývojári, správcovia obsahu, používatelia webových stránok), môže mať prospech z tejto novej normy. Povedal by som, že je to niečo, z čoho treba byť nadšený, no nie?