WordPress 7.1 Mary Lou: responzivní styly, média v prohlížeči a nové API

WordPress 7.1 „Mary Lou“ přináší změny, které se projeví jak při běžné práci v editoru, tak při vývoji šablon, bloků a administrace. Editor nově lépe pracuje s různými šířkami obrazovky, média zpracovává přímo v prohlížeči a spolupráci nad obsahem rozšiřují poznámky s formátováním a zmínkami.

Vydání nese jméno jazzové pianistky, aranžérky a skladatelky Mary Lou Williams. WordPress 7.1 si můžeš stáhnout jako samostatný balíček nebo aktualizovat obvyklou cestou ve správě webu.

Responzivní styly bez vlastního CSS

Site Editor nyní dovoluje určit, jak se blok zobrazí na různě velkých obrazovkách, a to v Globálních stylech i v nastavení konkrétního bloku. Dosavadní možnosti skrýt nebo zobrazit blok doplňují responzivní styly, takže pro běžné úpravy nemusíš psát vlastní CSS.

Při práci si můžeš změny rovnou prohlédnout v náhledu pro různé velikosti viewportu. Snáz tak sestavíš rozvržení, které se přizpůsobí způsobu, jakým návštěvníci web skutečně procházejí.

Administrace a úprava médií

Horní administrační lišta se nově zobrazuje ve všech editorech. Při přechodu mezi nástěnkou, editorem příspěvku a editorem webu tak zůstává navigace i známé nástroje stále po ruce; lišta zároveň dostala drobné vizuální úpravy.

Úpravy obrázků přesouvá nový dialog editoru médií do jednoho pracovního postupu. Tlačítko Crop zůstává vstupním bodem, ale v novém rozhraní můžeš volně ořezávat, ořezávat podle poměru stran, obrázek překlopit vodorovně i svisle, přesně nebo po krocích otáčet a upravit metadata.

Poznámky přímo v obsahu

Notes nově podporují formátovaný text a zmínky. V poznámce můžeš použít tučné písmo, kurzivu, kód a odkazy; napsáním @ zmíníš spolupracovníka a WordPress mu pošle upozornění.

Poznámku lze připojit ke konkrétní části textu, nejen k celému bloku. Na jednom bloku může běžet více samostatných konverzací a delší poznámky lze sbalit, aby okraj editoru neztratil přehlednost.

Média se zpracují rychleji a v nových formátech

Komprese obrázků, změna jejich rozměrů a tvorba náhledů se přesouvají do prohlížeče. WordPress pro to používá WebAssembly sestavení knihovny libvips, čímž sníží zátěž serveru, vytváří menší soubory a obchází limity paměti PHP i timeouty při nahrávání.

Knihovna médií má nativní podporu AVIF, HEIC a HDR gain maps, tedy formátů, které vytvářejí moderní telefony a fotoaparáty. Volitelný převod GIF na video obvykle zmenší výsledný soubor. Ukazatele průběhu nahrávání a automatické opakování pokusu pak zvyšují odolnost uploadu při výpadku připojení.

Nové bloky a ovládání vzhledu

Blok Playlist seskupí více zvukových stop do jednoho přehrávače. Volitelně k nim zobrazí průběh zvukové vlny, takže posluchač vidí průběh právě přehrávané stopy.

Blokové šablony mohou v theme.json definovat vlastní breakpointy pro mobil a tablet. Tyto hodnoty přepíší výchozí breakpointy, které WordPress používá pro responzivní styly a viditelnost bloků.

Nový blok Tabs rozdělí související obsah do panelů s kartami. Návštěvník tak nezobrazí vše najednou a stránka zůstane přehlednější.

Knihovnu ikon v editoru mohou vývojáři rozšířit o vlastní kolekce. Vlastní ikony pak budou k dispozici vedle vestavěné knihovny všude v editoru, kde se používá blok Icon.

U bloků Button nyní nastavíš přímo v ovládání stylů samostatný vzhled pro stavy hover, focus a active. Styl můžeš upravit jen pro jedno tlačítko, nebo jej použít pro všechna tlačítka.

Editor běží konzistentně v iframe

Editor příspěvků nyní WordPress vkládá do iframe u všech šablon, stejně jako Site Editor. Plátno s obsahem tak běží odděleně od administračního rozhraní a styly administrace do něj nezasahují.

Jednotky závislé na viewportu i media queries míří přímo na plátno editoru. Responzivní rozvržení se proto při tvorbě chová předvídatelněji, přestože většina uživatelů tuto technickou změnu přímo neuvidí.

Nástroje pro vývojáře

SVG Icon API je nyní veřejné API. Můžeš s ním registrovat vlastní kolekce a jednotlivé ikony a používat je napříč editorem přes wp_register_icon_collection(), wp_register_icon() a wp_get_icon().

Abilities API rozšiřuje infrastrukturu, kterou WordPress zavedl ve verzi 6.9. Přidává filtrovatelný životní cyklus spuštění, vlastní validaci a sdílené zjišťování dostupných schopností. Díky tomu se snáz staví integrace a automatizace nad WordPressem, včetně nástrojů poháněných AI.

Nový Design System vytváří základ pro stylování administračních rozhraní WordPressu. Pokrývá barvy, zaoblení a styl kurzoru; se sémantickými design tokeny a React komponentou ThemeProvider můžeš vytvořit konzistentní vlastní administraci, která přitom vizuálně zapadne do WordPressu.

Autoři šablon získávají v theme.json responzivní styly i styly pseudostavů hover, focus, focus-visible a active. Nové filtry dovolují konfigurovat obrazovky DataViews a DataForm, na nichž v Site Editoru stojí Stránky, Šablony, Části šablon a Vzory.

Přístupnost a práce s knihovnou médií

WordPress core a editor zlepšují přístupnost na více místech. Funkce wp_get_tooltip() a wp_get_toggletip() zpřístupňují přístupné tooltipy dalším částem administrace, včetně meta boxů příspěvků a přihlašovací obrazovky.

Čtečky obrazovky dostávají v administraci jasnější popisky a předvídatelnější navigaci v tabulkách se seznamem příspěvků. K širším změnám přispívají také bloky Tabs a Playlist a úpravy navigace i interakcí v editoru.

Knihovna médií ve výchozím stavu používá nekonečné posouvání. Každý uživatel si může přepnout zpět stránkování. Výchozí chování spekulativního načítání lze nastavit proměnnými prostředí nebo konstantami, takže hosting i vlastník webu řídí prefetch stránek bez nutnosti psát plugin.

Co zkontrolovat po aktualizaci

Po přechodu na WordPress 7.1 otestuj responzivní styly šablony v náhledech různých viewportů, zejména pokud používá vlastní breakpointy v theme.json. U vlastních administrativních rozhraní ověř chování v iframe editoru a zvaž, zda využít SVG Icon API, Design System nebo nové možnosti Abilities API.

Podrobnosti k instalaci, změnám, opraveným chybám a seznamu změněných souborů najdeš v Release Notes pro WordPress 7.1. Pro implementační poznámky určené vývojářům otevři Field Guide pro WordPress 7.1; návody, videa, interaktivní workshopy a lekce nabízí Learn WordPress včetně interaktivních workshopů.