Responzivita se stěhuje do editoru

Nejdůležitější novinka celého vydání se dá shrnout jednou větou: můžete nastavit, jak blok vypadá na různých velikostech obrazovky, přímo v editoru – a to jak v Globálních stylech, tak u jednotlivých bloků. Bez vlastního CSS.

Proč je to zpráva, pochopíte hned, když si vybavíte dosavadní postup: nastavím styl v editoru, otevřu si náhled na mobilu, zjistím, že nadpis přetéká, a pak už následuje jen otevření style.css nebo panelu „Additional CSS“, vymyšlení dostatečně specifického selektoru a napsání media query. U klientských webů to má nepříjemný důsledek. Jakmile jednou sáhnete po ručním CSS, klient si tu hodnotu už sám nezmění. Ztratí se přesně ta samoobslužnost, kvůli které se blokový editor stavěl.

WordPress 7.1 tenhle krok odstraňuje. Responzivní hodnoty jsou součástí stylového systému, takže se ukládají tam, kam patří, tedy do stylů bloku nebo do Globálních stylů, a jsou editovatelné stejným způsobem jako všechno ostatní.

Druhá polovina té samé novinky je určená vývojářům témat: breakpointy definovatelné v theme.json. Místo výchozích hodnot WordPressu si nastavíte hranice pro mobil a tablet sami, a responzivní styly i viditelnost bloků se jim přizpůsobí automaticky.

Stojí za to zdůraznit, že jde o krok, ne o cíl. Formulace v oznámení mluví o „významném kroku směrem k vestavěnému responzivnímu designu“, tedy ne o tom, že by tím byla celá agenda uzavřená. Realisticky se dá čekat, že složitější rozvržení si vlastní CSS pořád vyžádají. Pokrytá je ale ta nejčastější kategorie případů: velikost písma, odsazení, mezery a viditelnost prvků podle šířky obrazovky. Zkuste si vzpomenout, kolik vašich media query řeší ve skutečnosti něco jiného než tohle. U typického prezentačního webu jich moc nebude.

To je z pohledu tvorby témat důležitější, než se na první pohled zdá. Většina designových systémů má vlastní breakpointy, ať už zděděné z Tailwindu, z Bootstrapu nebo z návrhu, který přišel z Figmy. Dokud si WordPress trval na svých výchozích hodnotách, existovaly na jednom webu dvě sady zlomových bodů, které si navzájem nerozuměly. Teď je možné je sjednotit na jednom místě, v souboru, který už stejně máte otevřený.

Interaktivní stavy bez kódu

S responzivitou úzce souvisí druhé rozšíření stylového systému: stavy hover, focus a active u bloků Tlačítko a Odkaz v navigaci, nastavitelné přímo ve stylových ovládacích prvcích editoru, opět bez nutnosti psát kód.

Vypadá to jako detail, jenže :focus je věc, na kterou se v praxi zapomíná úplně nejčastěji, a přitom jde o jeden z pilířů přístupnosti pro uživatele klávesnice. Když je nastavení stavu součástí běžného editačního rozhraní, výrazně roste šance, že si ho někdo skutečně nastaví. Dokud se přístupnost dopisuje ručně někam do stylů, zůstává jako první věcí, na kterou v termínu nezbude čas.

Nový editor médií: jedno místo pro ořez, rotaci i metadata

Původní inline nástroj na ořezávání obrázků byl jedním z těch koutů administrace, které přežily hodně let bez větší pozornosti. WordPress 7.1 ho nahrazuje novým modálním editorem médií, který sdružuje volný i poměrový ořez, převrácení, přesnou rotaci a úpravu metadat do jednoho průchodu.

Cesta zůstává stejná – tlačítko Oříznout je tam, kde bylo –, jen se místo skromného inline ovládání otevře plnohodnotný prostor, kde obrázek upravíte před publikováním celý najednou.

Praktický přínos je hlavně v počtu přepnutí. Doteď se ořez, rotace a doplnění alt textu odehrávaly na různých místech a v různých krocích; teď jde o jeden souvislý úkon. Při desítkách fotek týdně se ten rozdíl sečte.

Zpracování obrázků v prohlížeči: libvips přes WebAssembly

Technicky nejzajímavější změna celého vydání, a zaslouží si víc než odstavec.

Komprese, změna velikosti i generování náhledů se přesouvají z PHP do prohlížeče, konkrétně na WebAssembly build knihovny libvips. Znamená to, že velké nahrávané soubory už nenarazí na memory_limit PHP a neskončí na sdíleném hostingu vypršením časového limitu.

Na levném sdíleném tarifu se odehrává pořád ta samá scéna: klient nahraje fotku rovnou z mobilu, ta má dvacet megapixelů, a nahrávání spadne s bílou stránkou nebo hláškou o překročení paměti. Řešením bylo obvykle zvýšit limity (pokud to hosting dovolí), nasadit plugin nebo klientovi vysvětlovat, ať si obrázky zmenšuje předem. Žádná z těch variant není dobrá.

Přesun do prohlížeče tuhle třídu problémů odstraňuje u kořene. Server se navíc zbavuje zátěže na CPU i paměti. A protože libvips je v tomhle ohledu výrazně efektivnější než typické PHP zpracování přes GD, jsou výsledné soubory menší, což ocení návštěvníci webu.

Bonusem je podpora formátů AVIF, HEIC a HDR gain map. HEIC je zvlášť užitečný: je to výchozí formát fotek z iPhonu, takže obrovské množství obrázků, které do WordPressu reálně putují, je přesně v něm.

Za zmínku stojí jedna věc, kterou si při nasazování ohlídejte: pokud vaše workflow spoléhá na serverové zpracování, ať už kvůli hookům, které do něj zasahují, nebo kvůli hromadným importům mimo prohlížeč, vyplatí se chování ověřit na staging webu dřív, než produkci pustíte dál.

Poznámky, které se dají používat pro skutečnou redakční práci

Inline poznámky dostávají v 7.1 sadu vylepšení, která je posouvají z kategorie „hezké demo“ do kategorie „použitelný nástroj pro redakci“:

• Formátovaný text – tučné, kurzíva, kód a odkazy, takže se dá zpětná vazba psát srozumitelně.
• Zmínky přes @ – napsání zavináče vyvolá seznam spolupracovníků, konkrétního člověka označíte a systém mu pošle e-mailové upozornění.
• Poznámka k výběru textu, ne jen k celému bloku.
• Více konverzací nad jedním blokem současně.
• Sbalování dlouhých poznámek, aby marginálie nezarostly.

Redakční kolečko přes Google Docs s následným ručním přenášením do WordPressu asi zažil každý, kdo publikuje ve víc lidech. Proto to není kosmetika. Kombinace zmínek, notifikací a poznámek kotvených na konkrétní pasáž je přesně to minimum, po kterém přestává mít smysl utíkat kvůli komentářům jinam.

Nové bloky: playlisty a záložky

Dva nové bloky se hodí zmínit zvlášť.

Playlist umožňuje vložit do příspěvku nebo stránky kolekci audio souborů, volitelně s vlnovým zobrazením (waveform), které ukazuje tvar stopy během přehrávání. Pro podcastery a hudebníky to je funkce, kvůli které se dosud instaloval plugin.

Záložky (tabs) organizují obsah do panelů místo toho, aby se všechno zobrazovalo najednou. Klasický vzor pro FAQ, specifikace produktu nebo cokoli, co má logické sekce a nemá zabírat tři obrazovky. Dosud doména pluginů a page builderů.

Pro autory pluginů a témat je tu ještě jedna novinka: vlastní sady ikon. Zaregistrované ikony budou dostupné napříč editorem vedle vestavěné knihovny WordPressu. U rozsáhlejších sad vlastních bloků byla dosud vizuální konzistence rozhraní věc, které se dalo dosáhnout jen s velkou dávkou trpělivosti.

Administrační lišta ve všech editorech

Administrační lišta nově zůstává s vámi napříč všemi editory, takže vždycky víte, kde jste. Dostala navíc drobné vizuální osvěžení.

Editor webu (Site Editor) měl dlouho tendenci působit jako oddělený svět bez zjevné cesty zpátky do administrace. Návrat konzistentní navigace tenhle pocit odstraňuje.

Přístupnost

WordPress 7.1 pokračuje v broušení přístupnosti napříč jádrem i Gutenbergem. Z novinek s největším dopadem stojí za zmínku nové API pro přístupné tooltipy, předvídatelnější chování pro čtečky obrazovky a lepší popisky na řadě míst v administraci. Editor sám dostal rozsáhlá vylepšení navigace a interakce.

API pro tooltipy je z pohledu vývojáře nejzajímavější položkou toho seznamu. Přístupný tooltip je překvapivě netriviální komponenta – musí správně pracovat s fokusem, s klávesnicí, s ARIA atributy a s dotykovým ovládáním. Pokud si ho každý plugin řeší po svém, výsledkem je administrace, kde se polovina nápověd chová jinak než druhá. Sdílené API tohle sjednocuje.

Co si z toho odnést

Na WordPressu 7.1 je zajímavý spíš směr než jednotlivé položky changelogu. Táhne se jím jeden motiv: věci, kvůli kterým se dosud sahalo po CSS nebo pluginu, se stěhují do jádra a do editoru.

Responzivní styly, interaktivní stavy, záložky, playlisty, editace obrázků, redakční poznámky – u každé z nich existovalo dosavadní řešení v podobě ručního kódu nebo doinstalované knihovny. Sjednocení do jádra znamená míň závislostí, konzistentnější chování napříč weby a hlavně obsah, který zůstane editovatelný i pro klienta, jemuž web předáváte.

Má to ovšem i druhou stranu, o které se v souvislosti s každým větším vydáním WordPressu mluví. Kdykoli jádro pohltí funkci, kterou dosud dodávaly pluginy, část ekosystému přijde o důvod existence. Bloky se záložkami, playlisty a nástroje na responzivní styly jsou přesně ty kategorie, kde dnes existuje řada komerčních řešení. Autorům takových pluginů 7.1 nutně neznepříjemní život, ale zúží prostor, ve kterém mohou přidávat hodnotu. Budou muset nabídnout víc než základ, který teď dostane každý zdarma.

Z hlediska kompatibility to znamená konkrétní úkol: pokud váš plugin nebo téma řeší některou z těchto oblastí vlastní implementací, ověřte, že se s tou novou v jádře netluče. Duplicitní stylové vrstvy nad stejnými bloky jsou klasický zdroj těžko dohledatelných chyb.

Pro vývojáře témat je nejpodstatnější dvojice breakpointy v theme.json a vlastní sady ikon. Obojí je o kontrole nad designovým systémem, který dodáváte.

Pro provozovatele webů na sdíleném hostingu je nejpodstatnější přesun zpracování obrázků do prohlížeče. Je to jediná změna v tomto vydání, která má šanci znatelně ovlivnit chování serveru, a to k lepšímu.

Na vydání se podílelo více než 800 přispěvatelů, což samo o sobě říká něco o tom, jak velké to vydání je.

Jako vždy platí obvyklé: než 7.1 nasadíte na produkci, projděte si vlastní i cizí pluginy na staging webu. Zásahy do stylového systému a do zpracování médií jsou přesně ta místa, kde se rozdíly ve chování projeví nejdřív.

Zdroj: wordpress.org/download/releases/7-1/