Gutenberg 23.7: Gallery detach, LaTeX και όλες οι αλλαγές

Το Gutenberg 23.7 φέρνει κυρίως διορθώσεις που κάνουν τον επεξεργαστή μπλοκ πιο προβλέψιμο στην καθημερινή χρήση: καλύτερη συμπεριφορά για αιωρούμενα blocks, σωστές προεπισκοπήσεις συσκευών και λιγότερες διακοπές όταν γράφετε LaTeX. Η έκδοση προσθέτει επίσης πιο σαφή ροή για το δυναμικό Gallery block και νέες δυνατότητες για όσους αναπτύσσουν interfaces πάνω στα components του Gutenberg.

Το Gutenberg είναι το plugin όπου το WordPress δοκιμάζει και εξελίσσει τον επεξεργαστή που βασίζεται σε blocks. Η έκδοση 23.7 είναι διαθέσιμη για εγκατάσταση από το αποθετήριο plugins του WordPress, ενώ μπορείτε να τη δοκιμάσετε απευθείας στο WordPress Playground.

Τι αλλάζει στον επεξεργαστή μπλοκ;

Η έκδοση εστιάζει σε μικρές, αλλά ορατές, βελτιώσεις στη διάταξη και στην αλληλεπίδραση του editor. Τα αιωρούμενα blocks δεν επικαλύπτουν πλέον sticky blocks, ενώ ο προσθέτης κενού block εμφανίζεται στη σωστή θέση μέσα σε blocks που διαχειρίζονται τη δική τους toolbar.

Το Pullquote block εφαρμόζει πλέον το προσαρμοσμένο ύψος γραμμής και μέσα στον editor, ώστε να συμφωνεί με την εμφάνιση στο front end. Επανέρχονται επίσης τα σταθερά ύψη προεπισκόπησης για mobile και tablet.

Πιο σαφής αποσύνδεση εικόνων στο δυναμικό Gallery block

Το δυναμικό mode του Gallery block είχε προστεθεί στο Gutenberg 23.6. Στην έκδοση 23.7, το αμφίσημο κουμπί toolbar «Convert to images» μετονομάζεται σε «Detach», ώστε να περιγράφει καθαρότερα την ενέργεια που εκτελεί.

Όταν επιλέγετε την αποσύνδεση, εμφανίζεται πλέον modal που εξηγεί τι θα συμβεί στις εικόνες. Η μετατροπή από dynamic mode γίνεται επίσης σε ένα μόνο επίπεδο undo, ώστε να μπορείτε να την αναιρέσετε με μία ενέργεια.

Σημαντικές αλλαγές για χρήστες και developers

Κληρονομικότητα στα Global Styles

Το interface για την κληρονομικότητα των Global Styles είναι πλέον πειραματικό και ενεργοποιείται μόνο αν το επιλέξετε από τη σελίδα Gutenberg Experiments. Τα controls του block inspector εμφανίζουν επίσης τις τιμές Global Styles που κληρονομεί το block.

Στο εσωτερικό της υλοποίησης, η διαχείριση κοινών presets διαχωρίζεται από shadows και μεγέθη γραμματοσειράς. Το theme.json εξισώνει την ειδικότητα των classes για presets σε επίπεδο block με το :where(), ενώ διορθώθηκε η επιλογή και εμφάνιση λανθασμένου preset όταν δύο χρωματικά presets έχουν το ίδιο hex, καθώς και η επίλυση styles για στοιχεία συνδέσμων στον inspector των blocks που είναι links.

Math block και LaTeX

Το Math block χρησιμοποιεί πλέον ValidatedTextareaControl για την εισαγωγή LaTeX. Τα σφάλματα ανάλυσης δεν εμφανίζονται πια σε κάθε πάτημα πλήκτρου: το πεδίο δίνει feedback όταν χάσει για πρώτη φορά το focus και σταματά η ανακοίνωση σφάλματος από screen reader σε κάθε χαρακτήρα.

Components και επιλογές σε ομάδες

Τα Combobox, Select και SelectControl αποκτούν τα subcomponents Group και GroupLabel. Έτσι, οι ομαδοποιημένες επιλογές συντίθενται με ενιαίο τρόπο στις οικογένειες components που ανοίγουν λίστα επιλογών.

Το DataViewsPicker υποστηρίζει επιλογή εύρους με Shift+Click στις διατάξεις picker-table, picker-grid και picker-activity. Τα πεδία αναζήτησης σε DataViews και Font Library αποκτούν σταθερό πλάτος, ώστε να μη μετακινείται η διάταξη, ενώ το Input κρύβει τα native spin controls για type="number".

Πλήρες changelog του Gutenberg 23.7

Βελτιώσεις

Στα base styles, μπορείτε να παρακάμψετε το χρώμα του focus ring στο outset-ring__focus. Το Widget Dashboard μετρά το διαθέσιμο χώρο του header και τεκμηριώνει το chrome, ενώ τα Widget Primitives διανέμονται πλέον ως script module.

Στα components, το sandbox component δέχεται sandbox prop, το SearchControl εμφανίζει suffix μόνο όταν υπάρχει, και προστίθεται το primitive Autocomplete.Row. Το Font Library διορθώνει το μέγεθος γραμματοσειράς στην επιλογή της σελίδας πλοήγησης ώστε να ταιριάζει με το DataViews.

Το Block Library αποκτά end-to-end κάλυψη user story για Table of Contents. Ο Post Editor προσθέτει τη ρύθμιση responsiveEditingEnabled, η οποία κρύβει την επιλογή Responsive styles. Στο real-time collaboration (RTC), το Quick Edit απενεργοποιείται όσο επεξεργάζεστε ένα post.

Διορθώσεις στη βιβλιοθήκη blocks

Η render_block_core_video() χειρίζεται πλέον και VIDEO tags που δεν γράφονται με πεζούς χαρακτήρες. Τα Cover και Accordion blocks βγαίνουν από την αντίστοιχη κατάσταση με Enter, ενώ το List block διατηρεί τον ordered τύπο του όταν κάνετε indent.

Ο Media Editor εμφανίζει κατάσταση φόρτωσης όσο φορτώνει το περικομμένο αρχείο. Αφαιρείται το πλεονάζον flag __heicUploadSupport, το Navigation διορθώνει την επιλογή «Add block» που έλειπε από το Link UI μέσα σε template parts και το Playlist συντομεύει την ετικέτα του κουμπιού track στην toolbar.

Το Query Loop προσθέτει context μετάφρασης στην ετικέτα ρύθμισης «Offset», ενώ το Social Link διορθώνει ένα περιττό closing tag στο markup του Tumblr icon. Το Gallery περιλαμβάνει τις αλλαγές του κουμπιού Detach και του modal, το Pullquote εμφανίζει σωστά το custom line height και η μετατροπή dynamic Gallery διατηρεί ένα μόνο βήμα undo.

Διορθώσεις στον Block Editor

Το control εικόνας φόντου δεν εμφανίζει πια διπλό focus ring. Διορθώνονται επίσης η θέση του caret όταν διαγράφετε προς τα εμπρός κενά blocks, τα imports των preset round-trip tests μετά την ενοποίηση των preset utilities και η θέση του empty block appender σε blocks που δεσμεύουν την toolbar.

Το RTC δεν παρεμποδίζει το undo όταν συγχρονίζει controlled blocks. Το Rich Text αφαιρεί ξανά το tabIndex από επεξεργάσιμα στοιχεία για να διορθώσει την επιλογή με Shift+Click, δεν εφαρμόζει input transform όταν λείπει το onReplace και δεν καταρρέει πλέον ο paste handler όταν επικολλάτε αρχεία.

Η ροή συγγραφής επεκτείνει επιλογές blocks με Shift+βελάκια όταν δεν υπάρχει native selection, αναγνωρίζει το Shift+Click ως multi-selection gesture και αποτρέπει το scroll της σελίδας όταν μετακινείτε το caret μέσα σε blocks ψηλότερα από το viewport.

Διορθώσεις στον Post Editor και στις σημειώσεις

Ο editor αφήνει το browser να διαχειριστεί το undo σε πεδία που διαχειρίζονται δικό τους ιστορικό undo. Τα meta boxes ταιριάζουν πλέον τυπογραφικά με τα Gutenberg panels και τα notices χρησιμοποιούν ThemeProvider με ακτίνα γωνίας μηδέν.

Οι Notes αποθηκεύουν το target block πριν αποθηκεύσουν σημείωση επιπέδου block, καταχωρούν το inline note format κατά το import, επιστρέφουν με συνέπεια επιτυχία αποθήκευσης και συγχρονίζουν την επιλογή στη sidebar με τον inline marker κάτω από το caret. Ακυρώνουν επίσης το hover highlight που εκκρεμεί όταν το focus φεύγει από ένα note thread.

Το Post Lock δεν αλλάζει λανθασμένα το modal σε «Someone else has taken over» για χρήστη που έχει αποκλειστεί από το post. Στο iOS αφαιρείται το jumping hack και προστίθεται typewriter. Η mobile και tablet προεπισκόπηση επαναφέρει σταθερό ύψος.

Media, API και data layer

Η μεταφόρτωση μεγάλων animated GIF δεν κολλά πλέον κατά τη μετατροπή: για στατικές εξόδους αποκωδικοποιείται μόνο το πρώτο frame. Τα media templates σταματούν να επιβάλλουν crossorigin στα IMG tags και το wp-build συγχρονίζει τη λίστα preload πεδίων του page template με το core-data.

Το Media REST API μεταφέρει στο Gutenberg τον έλεγχο μεγέθους upload για sideload από URL path. Ενημερώνονται η έκδοση του API ρυθμίσεων προβολής και οι κανόνες συγχώνευσης του view config: απορρίπτονται συγχωνεύσεις με ασύμβατο σχήμα, ορίζεται η σημασία των κενών arrays και αφαιρούνται null τιμές από μέλη που προστίθενται.

Το createInterpolateElement χειρίζεται ομαλά unmatched closing tags. Το Core Data μετακινεί το component EntitiesSavedState έξω από τον editor, ενώ το RTC διατηρεί μη αποθηκευμένες αλλαγές συνεργατών όταν άλλος χρήστης αποθηκεύει και εκτελεί compaction κατά τη serialization.

Προσβασιμότητα και απόδοση

Τα Alignment controls χειρίζονται καλύτερα τα props τους και το Navigation ενημερώνει σωστά το aria-expanded όταν κάνετε hover σε submenu μέσα σε overlay. Το Autocomplete συνδέει τη λίστα προτάσεων με aria-controls και aria-haspopup, ενώ το ExternalLink χρησιμοποιεί το κοινό mixin για focus ring.

Στην απόδοση, το Rich Text διαβάζει το contentEditable στο ownsSelection για να αποφύγει αναγκαστικό layout και περιλαμβάνει διόρθωση για regression στην ταχύτητα πληκτρολόγησης. Ο Post Editor αποφεύγει περιττά νέα αιτήματα για terms στο FlatTermSelector.

Πειράματα και ασφάλεια Dashboard

Πέρα από το opt-in interface κληρονομικότητας Global Styles, τα Dashboard Widgets ενισχύουν τον καθαρισμό των href στα action και help links. Οι αλλαγές αυτές αφορούν τις πειραματικές δυνατότητες του Dashboard και του Block Editor.

Τεκμηρίωση

Η τεκμηρίωση προσθέτει οδηγίες nvm use στο AGENTS.md, pattern προοδευτικής ανακάλυψης για οδηγίες και skills των agents, καθώς και την παγκόσμια τεκμηρίωση που έλειπε από το table-of-contents/index.php. Προσθέτει file-level και class-level docblocks στο WP_Icon_Collections_Registry και διευκρινίζει την ανακάλυψη οδηγιών agents, τη συμπεριφορά getBlock με inner block controllers και τη διαδικασία backporting στο WordPress core.

Ενημερώνονται οι οδηγίες για iframe στο Gutenberg 23.6, τα παραδείγματα admin color scheme στο Storybook και η καθοδήγηση σχεδιασμού για dialog έναντι drawer. Η τεκμηρίωση για server-side view configuration filters διευκρινίζει ότι τα callbacks πρέπει να επιστρέφουν το container, ενώ τα inline docs χρησιμοποιούν link για URL.

Ποιότητα κώδικα και εσωτερικές αλλαγές

Το ESLint προσθέτει components που έλειπαν από τη denylist και το webpack-dev-server ενημερώνεται σε ^5.2.1 για alerts εξαρτήσεων. Τα GitHub workflows διορθώνουν τους ελέγχους changelog για PRs από forks και το Interactivity API μετασχηματίζει τις directives σε αυτοκαταχωριζόμενα modules.

Το RTC χρησιμοποιεί array_any() για τον έλεγχο νεότερου compaction και str_contains() στο WP_Sync_Config. Το Storybook δημιουργεί resolve specifier ως string τύπου URL και τα εργαλεία επιλύουν εξαρτήσεις ανεξάρτητα από τη διάταξη του node_modules.

Στα components, το useSelectionProps γίνεται ανεξάρτητο από layout και τα Disabled, FormTokenField και SearchControl μεταφέρονται σε SCSS modules. Ενημερώνονται οι εξαρτήσεις date-fns σε 4.4.0 και Color.js σε 0.7.1, ενημερώνεται το colorjs.io και αφαιρείται μια προσωρινή λύση για bug. Η δημοσιευμένη package theme δεν επιτρέπει src, ενώ το Storybook βελτιώνει την αναγνωσιμότητα του component code με arrays για children.

Στο Block Library προστίθεται προστασία από attribute values που προκαλούν errors, το editableRoot γίνεται ιδιωτική ρύθμιση block αντί για δημόσιο support και εφαρμόζονται διάφορες διορθώσεις για συγχωνεύσεις WordPress-Develop 7.0. Το Page List χρησιμοποιεί null coalescing για parentPageID, το Table of Contents χρησιμοποιεί str_contains() αντί για έλεγχο strpos() και το Tabs αφαιρεί το προεπιλεγμένο paragraph από το template του tab panel.

Αφαιρούνται το πλεονάζον pragma @jest-environment jsdom, τα περιττά __next40pxDefaultSize props από form controls και διπλότυπα duotone και preset utilities. Το URLInput μετατρέπεται σε function component, τα SVG icons ελέγχονται για viewBox, τα unit test files των Global Styles μετονομάζονται χωρίς το επίθημα .spec.js και το Site Editor αντικαθιστά χρήση Theme με CSS στον canvas loader.

Ο κώδικας real-time collaboration μετακινείται στο lib/experimental/collaboration. Το memize ενημερώνεται σε 2.1.1 και τα Base Styles αφαιρούν την παράμετρο accent color από το input-control, μαζί με το ιδιωτικό Theme component.

Εργαλεία build και tests

Τα release tools ενημερώνουν το screenshot της φόρμας release για το νέο GitHub Release label UI και απαιτούν λειτουργικό GitHub CLI για cherry-picking. Το build προσθέτει ανεξάρτητο vendor package για React 18, χειρίζεται paths έργου που περιέχουν κενά στο dev script και υπολογίζει τα extracted styles στο asset version hash του DependencyExtractionWebpackPlugin.

Προστίθεται end-to-end έλεγχος συμβατότητας React 19 για το boolean inert attribute. Το build επιλύει ρητά το Prettier σε isolated layout, το Storybook αφαιρεί το Emotion ως JSX import source, το WP Build αποφεύγει άπειρο worker build loop και βελτιώνεται ο προληπτικός έλεγχος πρόσβασης στο npm. Τα typings των polymorphism props παραλείπονται σε intersection.

Στα tests, το Jest διορθώνει ignore pattern για TypeScript declaration files και ενημερώνεται στη σπαστική έκδοση 30. Το Flakiness.io χρησιμοποιείται μόνο στο canonical αποθετήριο Gutenberg, τα performance tests διορθώνουν τη μέτρηση «Selecting blocks» που επέστρεφε 0 ms και το RTC διορθώνει test διαγραμμένου χρήστη σε multisite. Το Site Editor προσθέτει end-to-end κάλυψη για την επεκτασιμότητα του view configuration.

Τι να ελέγξετε πριν κάνετε deploy

Εγκαταστήστε το Gutenberg 23.7 πρώτα σε περιβάλλον staging και ελέγξτε τα templates που χρησιμοποιούν Gallery dynamic mode, Pullquote με προσαρμοσμένο line height και αιωρούμενα ή sticky blocks. Δοκιμάστε επίσης τις mobile και tablet προεπισκοπήσεις, ειδικά αν το theme ή plugin σας επεκτείνει τα responsive styles του editor.

Αν αναπτύσσετε blocks ή interfaces με τα packages του Gutenberg, ελέγξτε τη χρήση των Combobox, Select και SelectControl για πιθανή αξιοποίηση των Group και GroupLabel. Ενεργοποιήστε την κληρονομικότητα Global Styles μόνο σε δοκιμαστικό site, επειδή παραμένει πειραματική δυνατότητα, και προσαρμόστε τα tests σας πριν περάσετε σε Jest 30.