Gutenberg 23.7: opravy editora, galérie a Global Styles

Gutenberg 23.7 prináša najmä sériu presných opráv editora, ktoré odstránia rušivé vizuálne chyby pri písaní a úpravách rozloženia. Nová verzia zároveň sprehľadňuje dynamický režim bloku Galéria, pridáva voliteľné dedenie globálnych štýlov a upravuje komponenty, build aj testovaciu infraštruktúru.

Plugin je dostupný na stiahnutie a môžeš si ho hneď otvoriť aj v pripravenom Gutenberg Playgroundi. Gutenberg vydáva novú verziu každé dva týždne; 23.7 nadväzuje na zmeny z verzie 23.6.

1. Editor opravuje rozloženie aj ovládanie blokov

Plávajúce bloky už neprekrývajú sticky bloky. V blokoch, ktoré si preberajú vlastný toolbar, sa prázdny appender opäť zobrazí na správnom mieste. Blok Citát s odsadením tiež rešpektuje vlastnú výšku riadka priamo v editore, takže jeho vzhľad zodpovedá front endu.

Editor obnovuje pevne určenú výšku náhľadu zariadení pre mobil a tablet. Pri pohybe kurzora v blokoch vyšších než viewport sa už nebude posúvať celá stránka; výber blokov vieš rozšíriť cez Shift a šípky, keď prehliadač nemá vlastný textový výber, a Shift + klik sa správne vyhodnotí ako gesto pre viacnásobný výber.

2. Dynamická galéria jasnejšie odpojí obrázky

Dynamický režim bloku Galéria prišiel vo verzii 23.6, no tlačidlo toolbaru „Convert to images“ nehovorilo jasne, čo spraví. Gutenberg 23.7 ho premenoval na „Detach“ a pred odpojením zobrazí modálne okno s vysvetlením dôsledku.

Odpojenie dynamickej galérie sa teraz zapíše ako jedna úroveň histórie undo. V praxi tak jedným krokom vrátiš celú konverziu, namiesto toho, aby si musel vracať zmeny obrázkov postupne.

3. Dedenie globálnych štýlov zapneš iba vedome

Rozhranie pre dedenie Global Styles má v 23.7 experimentálny charakter a predvolene sa nezapne. Aktivuješ ho na stránke Gutenberg Experiments v nastaveniach pluginu. Inšpektor blokov potom zobrazuje hodnoty zdedených globálnych štýlov a pre bloky fungujúce ako odkazy správne vyhodnotí štýly prvku odkazu.

Gutenberg tiež vyčlenil spoločnú správu presetov zo správ tieňov a veľkostí písma. Ak majú dva farebné presety rovnaký hex kód, panely Global Styles už neuložia ani nezobrazia nesprávny preset. Pri theme.json sa špecificita tried presetov na úrovni blokov vyrovnáva cez :where().

4. Math blok prestane hlásiť chybu pri každom znaku

Math blok nahradil vstup pre LaTeX komponentom ValidatedTextareaControl. Chybu parsovania už nevyvolá pri každom stlačení klávesu: spätnú väzbu dostaneš až keď pole prvýkrát stratí focus. Zmizne aj upozornenie pre čítačky obrazovky pri každom znaku.

Form primitives dostávajú podkomponenty Group a GroupLabel pre Combobox, Select a SelectControl. Zoskupené možnosti sa tak skladajú konzistentne vo všetkých rodinách komponentov s vyskakovacím zoznamom položiek.

5. Zmeny v komponentoch a knižniciach blokov

V komponentoch pribudli tieto zlepšenia:

• DataViews a Font Library používajú pri vyhľadávaní pevnú šírku poľa, aby rozloženie neskákalo.
• DataViewsPicker podporuje výber rozsahu cez Shift + klik v rozloženiach tabuľky, mriežky aj aktivity.
• Komponent sandbox prijíma vlastnosť sandbox; Input skrýva natívne ovládače krokovania pri type="number".
• SearchControl vykreslí suffix len vtedy, keď existuje, a UI získava primitívu Autocomplete.Row.
• DataForm už nepresmeruje focus z validácie v kartách ani v detailoch; GradientPicker vyberá podľa slugu, preto si dva presety s rovnakým gradientom zachovajú vlastnú identitu.
• ToolsPanel prešiel na SCSS Module. Storybook opravuje jsxImportSource pre Emotion a pri čitateľnosti kódu používa polia detí.
• Autocomplete odkazuje na zoznam návrhov cez aria-controls a aria-haspopup; ExternalLink používa spoločný mixin focus ringu a hook useSelectionProps už nezávisí od rozloženia.
• Komponenty Disabled, FormTokenField a SearchControl migrujú na SCSS Module. Balíky aktualizujú date-fns na 4.4.0, Color.js na 0.7.1 a colorjs.io; odstránil sa aj pôvodný obchádzací kód pre chybu Color.js.
• Base Styles odstraňujú parameter accent color z input-control a odstraňuje sa súkromný komponent Theme.

Knižnica blokov rozširuje end-to-end pokrytie používateľského scenára pre blok Obsah. Zároveň ošetruje hodnoty atribútov, ktoré vyhadzujú chybu, presúva editableRoot medzi súkromné nastavenia bloku, používa null coalescing pre atribút parentPageID v Page List, odstraňuje redundantnú Jest @jest-environment jsdom pragmu a lintuje jej použitie.

• Table of Contents používa str_contains() namiesto kontroly cez strpos() a Tabs odstránil predvolený odsek zo šablóny panela záložky.
• Form controls už nedostávajú zbytočné vlastnosti __next40pxDefaultSize; opravy zahŕňajú aj zlúčenia s WordPress-Develop 7.0.
• Video blok v render_block_core_video() zohľadní značku VIDEO bez ohľadu na veľkosť písmen.
• V blokoch Cover a Accordion ukončíš úpravu klávesom Enter. Pri odsadení zoznamu sa zachová číslovaný typ.
• Media Editor zobrazí stav načítania, kým sa načíta orezaný súbor, a Media odstraňuje redundantný príznak __heicUploadSupport.
• V rozhraní odkazu Navigácie sa vo vnútri častí šablóny opäť zobrazuje voľba „Add block“. Toolbar Playlist skracuje popis tlačidla stopy.
• Nastavenie Offset v Query Loop dostáva kontext pre preklad. Ikona Tumblr v Social Link už neobsahuje nadbytočnú ukončovaciu značku.

6. Opravy editora, príspevkov a spolupráce

• Ovládací prvok obrázka pozadia odstraňuje duplicitný focus ring. Opravil sa kurzor pri forward delete prázdnych blokov aj importy testov round-trip presetov po konsolidácii utility funkcií.
• RichText nespustí input transform bez onReplace a pri vkladaní súborov už nepadne paste handler. Editovateľné prvky opäť nemajú tabIndex, čo opravuje výber cez Shift + klik.
• Editor necháva undo na prehliadač v poliach, ktoré spravujú vlastnú históriu undo. Meta boxy majú rovnaké štýly nadpisov ako panely Gutenbergu a notices sa obalia v ThemeProvider s nulovým polomerom rohov.
• Poznámky pred uložením zachytia cieľový blok, inline formát zaregistrujú pri importe, konzistentne vracajú úspech uloženia a synchronizujú výber sidebaru s inline značkou pod kurzorom. Pri strate focusu vlákna poznámky zrušia prebiehajúce zvýraznenie po hoveri.
• Post Lock už neprepne zamknutému divákovi modálne okno na správu „Someone else has taken over“. iOS odstraňuje hack so skákaním a pridáva typewriter.
• Pri spolupráci v reálnom čase (RTC) Quick Edit nefunguje, kým niekto upravuje článok. Synchronizácia kontrolovaných blokov nepreberie undo a neuložené úpravy spolupracovníkov zostanú zachované, keď iný používateľ uloží zmeny.
• RTC počas serializácie kompaktuje dáta, používa array_any() pri kontrole novšej kompakcie v polling sync serveri a str_contains() vo WP_Sync_Config. Kód spolupráce sa presúva do lib/experimental/collaboration; baseline strip test odpája core filter kses pre zmienky.

7. API, médiá, prístupnosť a výkon

Gutenberg aktualizuje verzovanie view configuration API. Pri spájaní konfigurácií odmietne nezhodné štruktúry, definuje význam prázdnych polí a z pripojených členov odstráni hodnoty null. Funkcia createInterpolateElement bezpečne spracuje nespárované ukončovacie značky.

• Media REST API preberá kontrolu veľkosti uploadu pri sideloadovaní z cesty URL. V wp-build sa zoznam polí preloadu šablóny stránky synchronizuje s core-data.
• Konverzia dlhých animovaných GIFov už neuviazne: pri statickom výstupe dekóduje len prvý frame. Mediálne šablóny prestávajú nútiť crossorigin na značkách IMG.
• Navigácia aktualizuje aria-expanded pri hoveri submenu v overlayi. Vlastnosti ovládacích prvkov zarovnania sa spracúvajú lepšie.
• Rich text číta atribút contentEditable v ownsSelection, aby nevynútil layout, a opravuje regresiu výkonu písania. FlatTermSelector nebude zbytočne znova načítavať termy.
• Core Data presúva komponent EntitiesSavedState mimo editora. Metrika testov výkonu „Selecting blocks“ už nebude chybne hlásiť 0 ms.

8. Experimentálna nástenka a bezpečnejšie odkazy

Widget Dashboard meria prispôsobenie hlavičky a dokumentuje chrome. Widget Primitives sa distribuujú ako script module. Experimentálne widgety nástenky prísnejšie sanitizujú href v akčných aj pomocných odkazoch.

9. Čo sa zmenilo v kóde, builde a testoch

• Interactivity API prerába directives na samoregistrujúce moduly. Duotone utility sa zbavujú duplicít presunom do global-styles-engine, konsolidujú sa aj utility pre presety a URLInput sa prerába na funkčný komponent.
• ESLint pridáva chýbajúce neodporúčané komponenty do denylistu. webpack-dev-server aktualizuje na ^5.2.1, čo má pomôcť s upozorneniami na závislosti, a workflow GitHubu opravuje kontroly changelogu pri PR z forkov.
• Nástroje vyriešia závislosti nezávisle od rozloženia node_modules. Storybook skladá resolve specifier ako reťazec v URL formáte a published package témy zakazuje priečinok src.
• Build pridáva samostatný vendor balík React 18, spracuje cesty projektu s medzerami v dev skripte a predchádza nekonečnej slučke worker buildu vo WP Build.
• DependencyExtractionWebpackPlugin zahrnie extrahované štýly do hashu verzie assetov. Pre izolované rozloženie sa Prettier vyhľadá explicitne a preflight kontroly lepšie overia prístup k npm.
• Typy komponentov preskočia polymorphic props pri intersection. Kompatibilita s React 19 získava end-to-end test booleovského atribútu inert; Storybook prestáva používať Emotion ako zdroj importu JSX.
• Jest opravuje ignore pattern pre deklarácie TypeScriptu a aktualizuje sa na verziu 30, ktorá obsahuje breaking changes. Flakiness.io sa používa len v kanonickom repozitári Gutenbergu.
• Testy opravujú scenár zmazaného používateľa na multisite a Site Editor získava end-to-end pokrytie rozšíriteľnosti view configuration.

10. Dokumentácia dopĺňa pravidlá pre vývoj

• AGENTS.md dopĺňa pokyny pre nvm use, postupné objavovanie pokynov a schopností agenta aj vysvetlenie, ako objaviť príslušné usmernenia.
• Dokumentácia dopĺňa chýbajúcu globálnu dokumentáciu v table-of-contents/index.php, file-level a class-level docblocky pre WP_Icon_Collections_Registry a vysvetľuje správanie getBlock s controllermi vnorených blokov.
• Rozširuje sa návod na backportovanie do core WordPressu. Callbacky filtrov view configuration musia vracať container; aktualizujú sa aj pravidlá pre server-side filtre view configuration.
• Dokumentácia upravuje odporúčania pre iframe po Gutenbergu 23.6, príklady farebných schém administrácie témy a dizajnové pravidlá pre dialóg oproti draweru.
• Inline dokumentácia používa odkaz pre URL. Nástroje aktualizujú snímku formulára releasu pre nové UI štítku Release na GitHube a pri cherry-pickingu vyžadujú funkčný GitHub CLI.

Aktualizuj a over vlastné rozšírenia

Ak vytváraš bloky, témy alebo rozhranie nad komponentmi Gutenbergu, otestuj aktualizáciu najmä pri dynamických galériách, dedení Global Styles, LaTeX vstupoch a vlastných select komponentoch. Skontroluj aj integrácie view configuration API, mediálne uploady, správanie výberu blokov a build pipeline s Jestom 30 alebo Reactom 18 a 19.

Gutenberg 23.7 si môžeš nainštalovať cez adresár pluginov WordPress.org. Experiment dedenia globálnych štýlov nechaj vypnutý, kým si jeho správanie neoveríš na vývojovej alebo testovacej webovej stránke.