Wat is er nieuw in WordPress 6.3: Een vernieuwde site-editor, een nieuw opdrachtpalet, stijlherzieningen, nieuwe blokken en nog veel meer!

WordPress 6.3 “Lionel” is uitgebracht! Het is de allerlaatste major release van fase 2 van de WordPress roadmap.

Tijdens de tweede fase richtte de ontwikkeling zich voornamelijk op de Site Editor, werd de functionaliteit ervan uitgebreid en werden de interface en bruikbaarheid verbeterd.

Dat betekent dat sitebouwers tegenwoordig layouts kunnen ontwerpen en content kunnen beheren binnen dezelfde interface, zonder van het ene naar het andere beheergebied te hoeven springen en zonder ook maar één regel code te hoeven schrijven.

Met WordPress 6.3 zijn 10 versies van de Gutenberg plugin samengevoegd in de core, en als je Gutenberg niet gebruikt op je website, zul je veel veranderingen zien in de interface van de Site Editor.

Met WordPress 6.3 is de bewerkingservaring aanzienlijk verbeterd. Verschillende technische wijzigingen hebben de Site Editor beïnvloed, wat heeft geresulteerd in een nieuwe manier van het verkennen van blokkenthema’s en het gebruik van de Site Editor zelf. Verbeterde navigatie, afleidingsvrije modus, previews van blokkenthema’s, stijl- en templaterevisies, een nieuw Command palette en nog veel meer.

Er valt veel te zeggen over WordPress 6.3. Geen tijd te verliezen, laten we uitzoeken wat er nieuw is met de nieuwste release van fase 2.

Bekijk onze videohandleiding over WordPress 6.3:

Verbeterde navigatie in de Site Editor

Met WordPress 6.3 is de navigatie in de Site Editor aanzienlijk verbeterd met de toevoeging van nieuwe toegangspunten tot verschillende delen van de editor. Voor 6.3 waren deze beheergedeeltes bereikbaar via toegangspunten in verschillende beheermenu’s en schermen. Het resultaat van deze veranderingen is een eenvoudigere en consistentere bewerkingservaring.

De volgende afbeelding vergelijkt het navigatiemenu van de editor in WordPress 6.2 en 6.3.

Het eerste wat je opvalt in bovenstaande afbeelding zijn de twee knoppen in de rechterbovenhoek van de zijbalk van de editor. De knop View site verschijnt bij mouseover en biedt snelle toegang tot de voorkant van je WordPress website. Dit is een kleine maar nuttige toevoeging waarmee je snel naar de pagina’s van je site kunt gaan, ongeacht waar je je in de Site Editor bevindt als het navigatiemenu geopend is.

De knop Open command palette (het lenspictogram) biedt toegang tot een nieuwe WordPress 6.3 feature, het Command palette (waarover hieronder meer).

De nieuwe editor Navigation bevat de volgende onderdelen.

Navigatie

Zodra je een navigatiemenu hebt gemaakt, verschijnt het in het Navigation menu van de Site Editor. Hier kun je de menu-items omhoog of omlaag verplaatsen of verwijderen uit een vervolgkeuzelijst. Je kunt ook items drag-and-droppen om de menuvolgorde te ordenen.

Als je op een menu-item klikt, ga je naar de paginadetails. Hier kun je ook de paginacontent en -layout bewerken (zie hieronder).

Styles

Vanuit het menu Styles heb je toegang tot stylevariaties in bladermodus. Hier kun je een voorbeeld van de beschikbare stijlen bekijken, er een toepassen en je eigen aanpassingen maken.

Het oog-icoon start het Style book, een feature die werd geïntroduceerd in 6.2 en die een preview geeft van de beschikbare blokken met de verschillende stijlen, die je kan toepassen zonder de interface van de editor te verlaten.

Pages

Het menuonderdeel Pages geeft je toegang tot de 10 laatst bijgewerkte pagina’s van de site plus verschillende bewerkingsfeatures. In dit onderdeel kun je nieuwe pagina’s maken, inhoud en layout van bestaande pagina’s bewerken, paginadetails bekijken en nog veel meer.

De meest interessante toevoeging hier is dat het nu mogelijk is om nieuwe pagina’s te maken zonder de interface van de editor te verlaten.

Als je op het + pictogram in het Navigation panel klikt, kun je in een nieuw modal in het midden van de pagina een titel voor de nieuwe pagina instellen, waarbij ook een tooltip wordt getoond met suggesties voor je titel.

Als je op Create concept klikt, word je doorgestuurd naar de berichteditor waarin al een nieuwe pagina is geladen.

Onder Pages kun je de paginacontent ook rechtstreeks vanuit de Site Editor bewerken.

Je kunt nu zowel de paginacontent als de stijl op dezelfde plaats bewerken. Dit geeft je meer controle over alle aspecten van de pagina en zou de bewerkingservaring aanzienlijk moeten verbeteren.

In de bewerkingsmodus kun je eenvoudig schakelen tussen de pagina-editor en de template-editor. Dit voorkomt verwarring over wat je aan het bewerken bent en laat je bepalen of je wijzigingen alleen van invloed moeten zijn op de huidige pagina of ook van toepassing moeten zijn op de andere pagina’s die dezelfde template gebruiken.

Hetzelfde scherm toont ook paginadetails.

Details die je hier kan vinden zijn momenteel:

• Status
• Slug
• Template
• Parent
• Woorden
• Tijd om te lezen
• Laatst gewijzigd

Templates

Hier heb je toegang tot paginatemplates. De structuur van het scherm Templates verandert niet veel. Echter, in WordPress 6.3, wanneer je een nieuw template maakt, krijg je een nieuwe popup overlay met een lijst van pagina’s die je kunt kiezen voor je template.

Als tweede stap biedt een nieuw venster een lijst met blokpatronen die je kunt gebruiken om je template op te bouwen.

Patterns

De beheersectie Patterns, die in een vorige iteratie de naam Library kreeg, bevat een aantal opmerkelijke wijzigingen met betrekking tot het blokpatroonsysteem. Dit zijn niet alleen wijzigingen in de UI. Het is een algehele herziening van de hele architectuur van blokpatronen.

In het beheergedeelte Patterns kun je templateonderdelen en patronen beheren. Hier vind je een menu dat je toegang geeft tot templateonderdelen en blokpatronen – verdeeld per categorie. Een sloticoon geeft de themapatronen aan die niet door de gebruiker gewijzigd kunnen worden.

In dit gedeelte kun je nieuwe templateonderdelen en custom blokpatronen maken en beheren, naast de patronen van je thema.

Wanneer je op de knop Create pattern klikt, kun je in een nieuw modaal popupvenster een naam aan je patroon toekennen en instellen welk type patroon je gaat maken, gesynchroniseerd of niet gesynchroniseerd.

Zodra je ten minste één custom blokpatroon hebt gemaakt, kun je het openen via My patterns, dat bovenaan het menu Patterns verschijnt.

Je kunt je blokpatroon selecteren en een nieuw paneel openen waar je de details van het patroon kunt zien. Door de hendel naar rechts of links te bewegen, kun je het patroon op verschillende resoluties bekijken en de reactiesnelheid controleren.

Het gedeelte Details toont de synchronisatiestatus van het huidige patroon.

Onderaan het menu Patterns vind je ook een paar links: Manage all template parts en Manage all my patterns. Deze links geven direct toegang tot templateonderdelen en custom patronen.

Dit ging over de nieuwe Pattern beheerinterface in de Site-editor. Laten we nu eens kijken wat er verandert in de structuur en functionaliteiten van het blokpatroonsysteem.

Een nieuw blokpatroonsysteem

Vanaf WordPress 6.3 (en Gutenberg 16.1):

• Reusable blocks zijn hernoemd naar Synced patterns.
• Standaard blokpatronen heten nu Not synced patterns,
• Het custom berichttype wp_block is uitgebreid om aangepaste velden te ondersteunen en er is een nieuw metaveld wp_block_sync_status toegevoegd om de synchronisatiestatus van een patroon op te slaan,
• Er is een source property toegevoegd aan het schema en de respons van de blokpatronen om onderscheid te maken tussen core- en gebruikerspatronen,
• De REST API is uitgebreid met een nieuw attribuut

Het is nu duidelijker dat alle wijzigingen aan een gesynchroniseerd patroon worden toegepast op elke instantie van dat blok op je hele website.

Anderzijds zullen wijzigingen aan een niet gesynchroniseerd blokpatroon alleen van invloed zijn op die specifieke instantie van dat patroon en niet worden toegepast op andere instanties die je hebt toegevoegd aan andere berichten of pagina’s van je website.

Dankzij het nieuwe patroonbeheersysteem kun je nu gesynchroniseerde en niet gesynchroniseerde blokpatronen rechtstreeks vanuit de site- of bericht-editor maken, waar het voorheen alleen mogelijk was om herbruikbare blokken (nu dus Not synced patterns) te maken.

Om deze nieuwe feature uit te proberen in de Post editor, open je WordPress dashboard en ga je naar Posts -> Add new. Maak daar een nieuwe groep blokken aan of selecteer gewoon de blokken die je aan je blokpatroon wilt toevoegen. Selecteer vervolgens Create pattern/reusable block in het popup menu van de werkbalk voor blokken.

Daarnaast kun je in de Site editor met een knop Create pattern een nieuw templateonderdeel of patroon maken.

Als je klikt op Create pattern, wordt er een modal/popup geopend waarin je een naam kunt opgeven voor je templateonderdeel en voor welk deel van de pagina het templateonderdeel bedoeld is.

Als je klikt op Create pattern, verschijnt er een ander venster waarin je een naam kunt opgeven voor je patroon en kunt kiezen of je een gesynchroniseerd of niet gesynchroniseerd patroon wilt maken.

Bevestig en bouw je patroon of templateonderdeel in de Site editor.

Als je tevreden bent met je bewerkingen, sla je het blokpatroon op en ga je terug naar de Site editor. Open de Patterns sectie en klik op Manage all my patterns. Het scherm Patterns toont jouw nieuwe custom blokpatroon.

Blokpatronen maken ook gebruik van de Aspectratio regeling van het blok Image. Als je nu een beeldverhouding instelt voor een afbeelding, dan blijft die behouden als je de afbeelding vervangt door een andere met andere afmetingen. Dit is vooral handig met blokpatronen omdat je je geen zorgen meer hoeft te maken over afbeeldingsafmetingen als je afbeeldingen vervangt in blokpatronen.

Voor een diepgaander overzicht van de wijzigingen in het blokpatroonsysteem, zie PR’s #51078, #51144 en #50028.

Stijlrevisies zichtbaar in de Site Editor

De Site Editor laat nu een revisiegeschiedenis zien, zodat je door de wijzigingen kunt bladeren en er een kunt kiezen om te herstellen.

Om de revisiegeschiedenis te openen, klik je op de nieuwe knop Revisions in het paneel Styles.

Dit paneel geeft een lijst van revisies in een tijdlijn. Het toont ook de naam van de auteur van elke revisie en de datum en tijd van elke revisie in een tooltip. Je kunt alle revisies bekijken en de revisie kiezen die je wilt herstellen.

Je kunt in de interface Global styles door de revisies navigeren, een preview bekijken en je content op elk gewenst moment herstellen.

De ontwikkeling van revisies stopt hier niet. Naarmate we fase 3 ingaan, zullen revisies worden verbeterd door nieuwe toevoegingen en verbeteringen die hun bruikbaarheid verder zullen verbeteren en nieuwe features mogelijk zullen maken.

Het Command palette

Het Command palette is een nieuwe feature waarmee je veelgebruikte acties, zoals het springen naar andere pagina’s of templates in de editor, kunt uitvoeren met behulp van commando’s.

Klik in de Site Editor op het lenspictogram of druk op cmd + k (ctrl + k onder Windows en Linux). Hiermee wordt het Command palette geopend.

Als je begint met het typen van een opdracht, stelt het Command palette een aantal opdrachten voor waaruit je kunt kiezen. Dit biedt een snelle manier om taken uit te voeren of specifieke gebieden van de Site Editor te bereiken.

De eerste editie van deze feature biedt een snelle zoekfunctie en een paar acties, zoals navigeren door de Site Editor, een nieuw bericht/pagina maken, UI-elementen schakelen, een template of templateonderdeel resetten of verwijderen, en nog veel meer. Meer commando’s zouden in toekomstige iteraties moeten worden toegevoegd.

De nieuwe tool geeft je eindeloze gebruiksmogelijkheden. Het Command palette kan bijvoorbeeld gebruikt worden om ontwerpopties voor specifieke berichten of pagina’s te tonen.

Je kunt ook je eigen commando’s registreren dankzij de nieuwe Command Palette API voor het renderen, registreren en uitschrijven van commando’s.

Er zijn verschillende manieren om commando’s te registreren, afhankelijk van het type commando dat je registreert.

• Statische commando’s: Developers kunnen custom statische commando’s registreren met de wp.data.dispatch( wp.commands.store ).registerCommand actie of de wp.data.useCommand React hook.
• Dynamische commando’s: Deze commando’s worden opgenomen in de lijst met commando’s afhankelijk van de zoekterm die de gebruiker invoert in het invoerveld van het commandopalet of wanneer een commando alleen beschikbaar is als aan bepaalde voorwaarden is voldaan.
• Contextuele commando’s: Deze commando’s krijgen prioriteit in specifieke contexten, wat betekent dat ze automatisch verschijnen in de juiste context (bijvoorbeeld wanneer je een template aan het bewerken bent). De commando’s template resetten en template verwijderen zijn voorbeelden van contextuele commando’s. Op dit moment zijn er twee contexten geïmplementeerd:
  • site-editor: Deze context wordt ingesteld wanneer je door de Site Editor navigeert
  • site-editor-edit: deze context wordt ingesteld als je iets aan het bewerken bent (template, templateonderdeel of pagina) in de editor

Je kunt de lijst met beschikbare commando’s op wp.data.select( wp.commands.store ).getCommands() opvragen in de console van de browser.

Het Command palette is in eerste instantie beschikbaar in Bericht- en Site-editors, maar zou in de toekomst uitgebreid moeten worden naar de hele admin.

Kijk voor een ontwikkelaarspreview van het Opdrachtpalet op Request for callback.

Extra features en verbeteringen in de Site Editor

Naast de features en verbeteringen die in de vorige paragrafen zijn besproken, brengt WordPress 6.3 ons:

Thema preview in de Site Editor

Vanaf 6.3 maakt een nieuwe theme_preview parameter het mogelijk om elk blokkenthema in de Site Editor te laden en een voorbeeld te bekijken voordat het wordt geactiveerd.

Om een voorbeeld van een blokkenthema te bekijken, navigeer je naar het scherm Appearance > Themes en ga je met de muis over een blokkenthema. Je zou een Live Preview knop moeten zien boven elk blokthema. Klik op deze knop om de voorbeeldweergave van het thema te starten in de Site Editor. Voor niet-blokthema’s start de knop Live Preview de thema Customizer.

Verbeteringen aan de laadstatus

Met WordPress 6.3 is de laadstatus van de editor verbeterd om te voorkomen dat de gebruiker interactie heeft met de editor voordat deze volledig is geladen.

Afleidingsvrije modus

WordPress 6.3 introduceert een afleidingsvrije bewerkingsmodus in de Site Editor. Dat is dezelfde feature die sinds WordPress 6.2 beschikbaar is in de editor voor berichten

Je kunt deze feature activeren in het optiepaneel van de Site Editor. Zodra de afleidingsvrije modus is ingeschakeld, verdwijnen zijbalken en werkbalken, zodat je je helemaal kunt concentreren op je bewerkingen.

Extra UI verbeteringen

• Een nieuw <ViewLink> component toont nu een knop om elk gepubliceerd berichttype in een nieuw venster te openen. Dit is een kleine maar nuttige feature waarmee je het huidige berichttype kunt bekijken zonder te hoeven zoeken naar de link in de zijbalk met instellingen (PR #50260)
• Templatebeschrijvingen zijn verbeterd om beter uit te leggen wat elke template precies doet. Dit zou gebruikers moeten helpen om de juiste template te kiezen om aan te passen in de Site Editor.
• Voorheen waren de Duotone filterinstellingen alleen beschikbaar in de blokwerkbalk. Met 6.3 zijn de Duotone instellingen nu beschikbaar via de zijbalk met instellingen (PR #49838)
• Voor WordPress 6.3 waren grote lettertypen niet schaalbaar genoeg op kleine schermen. Nu schaalt vloeiende typografie soepel dankzij een logaritmische schaalfactor die wordt gebruikt om een minimale lettergrootte voor kleine schermen te berekenen (PR #49707)

Nieuwe blokken en verbeterde designtools

WordPress 6.3 levert ook twee handige blokken waar veel contentschrijvers blij van zouden moeten worden.

Nieuw Footnote blok

WordPress 6.3 brengt ons ook een super handig Footnote blok.

Met deze geweldige toevoeging is het toevoegen van een footnote aan een tekstblok (alinea, kop en lijsten) een kwestie van een paar klikken. Plaats de cursor waar je de link wilt toevoegen en klik op de knop Footnote in het contextmenu van het blok. Dit voegt een voetnoot toe onderaan de pagina.

Het Footnote blok voegt automatisch voetnoten toe, verwijdert ze en ordent ze opnieuw terwijl je je tekst bewerkt en dit is erg handig, vooral bij langere artikelen.

Nieuw Details blok

Dankzij het nieuwe blok Details kun je nu een stuk content verbergen totdat de lezer klaar is om je FAQ te lezen, je video te bekijken of naar je geweldige podcast te luisteren.

Het nieuwe blok bestaat uit twee afzonderlijke elementen: samenvatting en verborgen inhoud. Standaard is de inhoud verborgen, maar je kunt de instelling wijzigen in de zijbalk met blokinstellingen.

Het blok gebruikt een details element met een richt text summary en een div met het verborgen element (zie ook PR #45055).

Verbeteringen aan het Cover blok

Het Cover blok is verbeterd met een aantal ontwerpkenmerken die het gemakkelijker te gebruiken maken en meer mogelijkheden bieden om het aan te passen.

Ten eerste ondersteunt het Cover blok nu de tool voor het ontwerpen van tekstkleuren. Dankzij deze toevoeging kunnen gebruikers en thema-auteurs de kleur voor alle binnenste blokken wijzigen door simpelweg de tekstkleur op het Cover blok in te stellen. Het maakt het ook gemakkelijker om transformaties te verwerken vanuit het Media & Text  blok, omdat tekstkleuren nu soepel worden doorgegeven aan de resulterende blokken.

Een andere toevoeging aan het Cover blok in WordPress 6.3 is de ondersteuning voor alle rand-gerelateerde ontwerptools. Deze toevoeging zou de behoefte aan aangepaste blokstyling moeten verminderen.

WordPress 6.3 voegt ook ondersteuning voor beperkte/vloeiende layout toe aan het Cover blok dat nu kan worden afgehandeld zoals voor het Group blok. Deze verandering voegt consistentie toe aan de layout afhandeling en zou het voor zowel gebruikers als themadevelopers eenvoudiger moeten maken om hun aanpassingen te maken.

Themadevelopers moeten echter een paar tests uitvoeren op hun bestaande thema’s, omdat het blokindelingssysteem custom implementaties kan overschrijven.

Verbeterd Duotone filter

Een paar wijzigingen verbeteren de manier waarop we het Duotone filter gebruiken.

Ten eerste kun je nu wereldwijd een Duotone filter instellen vanuit het Style paneel van de Site Editor. Voorheen kon je Duotone filters alleen globaal toepassen vanuit de theme.json.

Dit is mogelijk omdat Duotone filter nu worden ingesteld met kleurslots in plaats van kleurwaarden. Dit betekent ook dat je Duotone waarden één keer kunt instellen en toepassen, ongeacht het huidige thema of de huidige themavariant, zolang het dezelfde slug gebruikt.

Tot slot, voor degenen die meer technisch onderlegd zijn: Duotone stijlen worden nu gegenereerd met behulp van de WordPress Style Engine en worden opgeslagen met blokondersteunende CSS in plaats van dat ze worden ingelijnd.

Extra verbeteringen

• Het Button blok ondersteunt nu randkleur, stijl en breedte (PR #44574)
• Excerpt length controle toegevoegd aan het Post Excerpt blok (PR #44964)
• Je kunt nu de hoogte-breedteverhouding van het blok Featured Image bepalen (PR #47854)
• De interface Global Styles bevat nu regelaars voor kleur en typografie voor het Caption element (PR #49141)
• Er is een Post Modified Date variant toegevoegd aan het Post Date blok. Handig als je snel de gewijzigde datum van een bericht wilt toevoegen in plaats van de publicatiedatum (PR #49111)
• Het sitelogo kan nu worden vervangen vanuit de zijbalk (PR #49992)

Prestatieverbeteringen en wijzigingen voor developers

WordPress 6.3 brengt ook veel veranderingen en nieuwe features die bedoeld zijn om de prestaties van de site en de workflows van developers te verbeteren. Van de vele toevoegingen hebben we de volgende uitgekozen:

Geen ondersteuning meer voor PHP 5

Vanaf WordPress 6.3 wordt PHP 5 niet meer ondersteund. De nieuwe minimaal ondersteunde versie zal PHP 7.0.0 zijn. De aanbevolen versie van PHP is 7.4 of hoger. 7.4 is de meest gebruikte versie en wordt gebruikt door 50,8% van de WordPress websites.

Dit is niet alleen belangrijk voor developers maar voor alle WordPress gebruikers omdat het de veiligheid en prestaties van je website verbetert.

Dit is ook de reden waarom Kinsta hosting alleen ondersteunde versies van PHP toestaat. We voeren regelmatig onze prestatiebenchmarks uit van de ondersteunde versies van PHP om de prestatieverbeteringen van nieuwere versies te controleren.

Prestatieverbeteringen bij het laden van afbeeldingen

Vanaf WordPress 6.3 wordt het fetchpriority attribuut met een waarde van "high" toegewezen aan de afbeelding om te bepalen of het de LCP (Largest Contentful Pain) afbeelding is, terwijl de Largest Contentful Pain een metric is die de rendertijd van het grootste element binnen de viewport rapporteert.

Het fetchpriority attribuut instrueert de browser om prioriteit te geven aan deze afbeelding, zelfs voordat de layout is berekend.

Een andere verbetering is de automatische afhandeling van het lazyloaden van afbeeldingen met het loading attribuut. Dit attribuut werd voor het eerst geïntroduceerd in WordPress 5.5, daarna werd het verbeterd met WordPress 5.9 om het loading="lazy" attribuut weg te laten voor de eerste afbeelding in de content (zie Prestatieverbeteringen bij lui laden in WordPress 5.9). Nu, met WordPress 6.3, zouden alle resterende problemen opgelost moeten zijn, wat leidt tot solide prestatieverbeteringen.

Zowel fetchpriority als loading attributen worden nu aangestuurd door de nieuwe functie wp_get_loading_optimization_attributes(). Deze functie retourneert een associatieve matrix van attributen om de laadprestaties te optimaliseren. Op dit moment zijn de mogelijke attributen die door deze functie worden geretourneerd:

• loading met een waarde van "lazy"
• fetchpriority met een waarde van "high"

Let op dat geen enkel element beide attributen mag hebben, omdat ze elkaar uitsluiten. Als een element beide attributen bevat, wordt er een waarschuwing gegeven.

Voor een meer diepgaand overzicht van de wp_get_loading_optimization_attributes() functie en de fetchpriority en loading attributen met voorbeelden van gebruik, zie Prestatieverbeteringen van afbeeldingen in WordPress 6.3.

Ondersteuning voor HTML 5 async en defer attributen

async en defer zijn twee HTML 5 attributen die de browser instrueren om JavaScript te downloaden zonder de HTML parsing te onderbreken.

Er is een belangrijk verschil tussen de twee attributen:

• Scripts met het async attribuut worden asynchroon uitgevoerd zodra ze worden geladen. Zodra het script is geladen, pauzeert de browser het parsen van de HTML en wordt het script uitgevoerd.
• Scripts met het defer attribuut worden pas uitgevoerd als het parsen van de pagina is voltooid.

Vanaf WordPress 6.3 kun je scripts met de attributen async en defer nu registreren met behulp van de $in_footer booleaanse parameter van de wp_register_script() of wp_enqueue_script() functies (zie ook Hoe je Assets in WordPress kunt enqueueren).

Deze parameter is uitgebreid en accepteert nu een nieuwe $args array parameter waarmee je een laadstrategie voor je scripts kunt opgeven.

Hier is een voorbeeld van hoe je een uitstelstrategie kunt definiëren in het PHP bestand van een plugin met behulp van wp_register_script (de code zou hetzelfde zijn met wp_enqueue_script):

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'strategy' => 'defer'
	) 
);

Achterwaartse compatibiliteit is toegestaan, dus je kunt WordPress blijven instrueren om je script in de footer te laden:

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'in_footer' => true,
		'strategy' => 'defer'
	) 
);

Dankzij de nieuwe implementaties is het nu mogelijk om te voorkomen dat een script in een onverwachte volgorde in de script dependency tree wordt geladen, wat niet mogelijk was met de tools die beschikbaar waren vóór WordPress 6.3. Voor een meer gedetailleerd overzicht van de wijzigingen aan de Scripts API, met aanvullende voorbeelden en technische details, bekijk je de dev note van Simon Dowdles.

Development modus

WordPress 6.3 introduceert een nieuwe Development modus die developers kunnen inschakelen met behulp van een nieuwe constante WP_DEVELOPMENT_MODE. Deze nieuwe constante wordt aanbevolen voor elke ontwikkelsite en de waarde is afhankelijk van het soort ontwikkeling dat plaatsvindt.

WP_DEVELOPMENT_MODE kan een van de volgende mogelijke waarden aannemen:

• core – Wordt gebruikt om aan te geven dat een website wordt gebruikt als core ontwikkelomgeving.
• plugin – Gebruikt voor plugin-ontwikkeling.
• theme – Gebruikt voor thema-ontwikkeling.
• all – Dit wordt gebruikt om aan te geven dat een website voor alle drie de soorten ontwikkeling wordt gebruikt.
• Een lege string is de standaard en geeft aan dat de website niet wordt gebruikt als ontwikkelomgeving.

WP_DEVELOPMENT_MODE moet alleen worden gebruikt in ontwikkelingsinstallaties. Het is niet relevant in productie.

De Development modus beïnvloedt enkele aspecten op laag niveau van het gedrag van WordPress. Op het moment van schrijven betreft het enige verschil het cachen van het theme.json bestand, dat wordt omzeild als WP_DEVELOPMENT_MODE is ingesteld op 'theme'.

WP_DEVELOPMENT_MODE werkt anders dan de WP_DEBUG en WP_ENVIRONMENT_TYPE constanten die gewoonlijk worden gebruikt bij ontwikkeling, omdat WP_DEBUG en WP_ENVIRONMENT_TYPE het gedrag van WordPress op geen enkele manier beïnvloeden. Je zou waarschijnlijk WP_DEVELOPMENT_MODE gebruiken als WP_ENVIRONMENT_TYPE of 'development' of 'local' is, omdat ontwikkeling nooit op live websites zou moeten gebeuren.

Je kunt de Deveopment modus op deze manier inschakelen:

define( 'WP_DEVELOPMENT_MODE', 'theme' );

WordPress 6.3 introduceert ook een nieuwe wp_in_development_mode() functie waarmee je kunt controleren of je website in de ontwikkelmodus staat. De nieuwe functie maakt het ook mogelijk om te controleren welk type ontwikkeling momenteel is ingeschakeld, dankzij een parameter $mode waarvan de mogelijke waarden 'core', 'plugin' en 'theme' zijn:

if ( wp_in_development_mode( 'theme' ) ) { ... }

Je kunt de huidige waarde van WP_DEVELOPMENT_MODE ook controleren in het Info paneel van de tool Site Health.

Extra wijzigingen voor developers

• Thema-ontwikkelaars kunnen nu de property template_types gebruiken om een of meer templatetypes toe te wijzen bij het registreren van een templatepatroon om deze op te nemen in de modale overlay die verschijnt wanneer een gebruiker een nieuw template maakt.
• De get_pages() functie is bijgewerkt en gebruikt nu intern WP_Query.
• De klasse WP_User_Query is aanzienlijk verbeterd, met name met de implementatie van querycaching.
• Er zijn verschillende verbeteringen doorgevoerd in de Cache API.
• De link Edit site laadt nu de huidige template in plaats van de startpagina van de editor.
• Een nieuwe Block Selectors API maakt het mogelijk om meerdere CSS selectors voor blokken te configureren om te gebruiken in globale stijlen.
• De toegepaste kleuren van sociale pictogrammen worden nu dynamisch bijgewerkt op basis van theme.json en globale stijlen
• Verdere updates hebben betrekking op internationalisatie (I18N) en layoutondersteuning.

Samenvatting

Met WordPress 6.3 komen we aan het einde van Fase 2: Customization van de Gutenberg ontwikkelings roadmap. Deze nieuwe release brengt ons aanzienlijke verbeteringen in de bewerkingservaring, waaronder nieuwe bewerkingsfuncties binnen de Site Editor, een nieuw en flexibeler blokpatroonsysteem, nieuwe blokken, betere prestaties, verbeteringen in toegankelijkheid en internationalisatie, en nog veel meer.

Met de volgende versie van WordPress, die wordt verwacht in november 2023, gaan we fase 3: Collaboration in, waarvan het hoofddoel is om geavanceerde samenwerkingsmogelijkheden naar de editor te brengen.

Als je WordPress wilt testen en/of eraan wilt bijdragen, kun je het beste onze gratis lokale WordPress ontwikkelsuite DevKinsta gebruiken.

Nu over naar jou: Heb je WordPress 6.3 al getest in je ontwikkelomgeving? Welke features van 6.3 vind je het leukst? Deel je gedachten in de comments hieronder.