WordPress 7.1 ‘Mary Lou’: responsieve stijlen, media en nieuwe blocks

WordPress 7.1, met codenaam ‘Mary Lou’, richt zich op de dagelijkse werkstroom in het dashboard en de editor. Je krijgt meer controle over responsieve ontwerpen, media, samenwerking en blockcontent, terwijl de release ook nieuwe API’s en verbeteringen voor toegankelijkheid toevoegt.

De release eert jazzpianist, arrangeur en componist Mary Lou Williams. Ze trad vanaf haar zesde publiek op, werkte in swing, bebop en sacred jazz en vernieuwde haar geluid voortdurend. In de jaren veertig gebruikte ze haar appartement in Harlem als avondlijke werkplek waar Thelonious Monk, Dizzy Gillespie en Bud Powell ideeën uitwisselden en bebop vormgaven.

Responsieve stijlen in de Site Editor

Je kunt blocks nu voor verschillende schermgroottes stijlen vanuit Globale stijlen of vanuit de instellingen van een afzonderlijk block. Daarvoor hoef je geen eigen CSS meer te schrijven. Wissel tijdens het ontwerpen tussen viewportformaten om direct te zien hoe je layout zich aanpast aan verschillende schermen.

De adminbalk blijft zichtbaar in elke editor

De WordPress-adminbalk volgt je voortaan door alle editors. Daardoor houd je tijdens het schrijven van een bericht en het aanpassen van het siteontwerp toegang tot dezelfde vertrouwde navigatie en tools. De balk kreeg ook kleine visuele verbeteringen.

Afbeeldingen bewerken vanuit één venster

De nieuwe media-editor vervangt de eerdere inline tool voor bijsnijden. De bekende knop Bijsnijden opent nog steeds de bewerking, maar je werkt nu in een apart venster. Daar combineer je vrij bijsnijden en bijsnijden op beeldverhouding met horizontaal of verticaal spiegelen, nauwkeurig of vast roteren en het bewerken van metadata.

Notities op tekst met vermeldingen en opmaak

Notities ondersteunen rich text en @-vermeldingen. Maak tekst vet, cursief of als code, voeg links toe en vermeld een samenwerker om diegene een melding te sturen. Je kunt een notitie bovendien aan een specifiek tekstdeel koppelen, in plaats van alleen aan een volledig block.

Meerdere gesprekken kunnen naast elkaar op hetzelfde block blijven bestaan. Klap langere notities in om de marge overzichtelijk te houden. Daarmee ondersteunt de editor beter het heen-en-weer tijdens gezamenlijke contentreviews.

Snellere media en moderne afbeeldingsformaten

WordPress comprimeert, schaalt en maakt thumbnails nu in de browser. Dat verlaagt de belasting van je server en levert kleinere bestanden op, zonder tegen PHP-geheugenlimieten of uploadtimeouts aan te lopen. De browserverwerking gebruikt een WebAssembly-build van libvips.

De mediaverwerking ondersteunt ook AVIF, HEIC en HDR gain maps rechtstreeks. Daarmee kan WordPress overweg met beeldformaten die moderne camera’s en telefoons al produceren.

Nieuwe blocks en fijnere ontwerpcontrole

Maak afspeellijsten

Met het nieuwe Playlist-block breng je meerdere audiotracks samen in één afspeellijst. Je kunt optioneel een waveform tonen, zodat luisteraars tijdens het afspelen een visuele indruk van iedere track krijgen.

Bepaal breakpoints vanuit je blockthema

Blockthema’s kunnen in theme.json eigen breakpoints voor mobiel en tablet vastleggen. Die waarden overschrijven de standaardwaarden voor responsieve stijlen en blockzichtbaarheid.

Orden content met tabs

Het nieuwe Tabs-block verdeelt gerelateerde content over panelen met tabs. Zo toon je niet alle informatie tegelijk en houd je een pagina overzichtelijker.

Voeg eigen iconen toe

Ontwikkelaars kunnen de iconenbibliotheek van WordPress uitbreiden met eigen collecties. Die aangepaste iconen worden vervolgens naast de ingebouwde bibliotheek beschikbaar in de hele editor.

Stijl knopinteracties

Stel voor Button-blocks aparte stijlen in voor de staten hover, focus en active. Pas die stijlen toe op één knop of op alle knoppen, rechtstreeks vanuit de stijlopties van de editor.

Een consistenter bewerkingscanvas

De berichteditor draait nu voor alle thema’s volledig in een iframe, net als de Site Editor. Het bewerkingscanvas staat daardoor los van de WordPress-admininterface en adminstijlen beïnvloeden je content niet meer. Viewportrelatieve eenheden en media queries richten zich direct op het canvas, waardoor responsieve layouts tijdens het bouwen voorspelbaarder werken.

Nieuwe mogelijkheden voor ontwikkelaars

De SVG Icon API is nu een publieke API. Registreer eigen iconencollecties en afzonderlijke iconen en gebruik ze overal in de editor met wp_register_icon_collection(), wp_register_icon() en wp_get_icon().

De Abilities API bouwt voort op de infrastructuur uit WordPress 6.9. De API krijgt een filterbare uitvoeringslevenscyclus, eigen validatie en gedeelde discovery. Daardoor kun je eenvoudiger integraties en automatisering op WordPress bouwen, waaronder tooling met AI.

Een nieuw Design System legt een basis voor het thematiseren van WordPress-admininterfaces. Het ondersteunt kleuren, afrondingen en cursorstijlen. Gebruik semantische designtokens en de React-component ThemeProvider om eigen admininterfaces consistenter te maken zonder dat ze vreemd aanvoelen binnen WordPress.

Themaontwikkelaars krijgen via theme.json responsieve styling en pseudostaten voor hover, focus, focus-visible en active. Nieuwe filters maken het ook mogelijk om de schermen van DataViews en DataForm te configureren die in de Site Editor pagina’s, templates, templateonderdelen en patronen aansturen.

Toegankelijkheid in core en editor

De functies wp_get_tooltip() en wp_get_toggletip() maken toegankelijke tooltips beschikbaar op meer plekken in de WordPress-admin. Je kunt ze onder meer gebruiken in postmetaboxen en op het inlogscherm.

Schermlezers krijgen duidelijkere labels en een voorspelbaardere navigatie in berichtlijsten. Het Tabs-block, het Playlist-block en verbeteringen aan navigatie en interactie in de editor dragen ook bij aan de toegankelijkheid van deze release.

Uploads en navigatie presteren beter

Je kunt GIF-naar-video-conversie inschakelen om doorgaans kleinere bestanden te produceren. Uploads tonen voortgang en proberen automatisch opnieuw verbinding te maken wanneer die wegvalt. Daardoor blijven uploads robuuster bij instabiele verbindingen.

De mediabibliotheek gebruikt standaard oneindig scrollen. Elke gebruiker kan in de eigen instellingen terugschakelen naar paginering. Hosts en site-eigenaren kunnen standaardwaarden voor speculatief laden via omgevingsvariabelen of constanten instellen, zodat WordPress pagina’s vooraf ophaalt zonder dat je daarvoor een plugin schrijft.

Werk je WordPress-installatie bij naar 7.1 nadat je back-up en compatibiliteit van thema’s en plugins hebt gecontroleerd. Verken daarna de nieuwe mogelijkheden in de feature showcase van WordPress 7.1 of via Learn WordPress, met how-to-video’s, interactieve workshops en lesplannen.