Zet het vuurwerk maar klaar! Met 7.0 gaat WordPress een gedurfd nieuw tijdperk in.
Het is waarschijnlijk de grootste sprong die het platform de afgelopen jaren heeft gemaakt.
WordPress 7.0 verbetert de beheerinterface en introduceert het nieuwe blokken en ontwikkelaarstools, zoals de iframed post editor en PHP-only blokken.
Zet een kopje koffie en maak het je gemakkelijk, want dit wordt een lang en spannend verhaal.
Integratie met AI
Met 7.0 heeft WordPress een grote evolutionaire sprong voorwaarts gemaakt. Vergeet het blogging platform van de begindagen. Vandaag de dag is WordPress een samenwerkingsplatform dat helemaal klaar is voor kunstmatige intelligentie.
Dit ambitieuze project had als doel om een betrouwbare, veilige infrastructuur te bieden waarmee WordPress gebruikers en plugin-ontwikkelaars op een gestandaardiseerde manier kunnen communiceren met Large Language Models (LLM’s).
Het nieuwe architectuurparadigma maakt de weg vrij voor “agentic WordPress”. Het is een verschuiving naar agentic usability waarbij WordPress van nature in staat is om te communiceren met externe AI Agents via gestandaardiseerde, machinevriendelijke interfaces.
Er valt veel te zeggen, maar voordat we ingaan op de details van de AI-integratie, volgen hier enkele voorlopige definities.
WordPress AI architectuur: basisbegrippen
Om de AI architectuur van WordPress 7.0 te begrijpen, is het essentieel om vier kritieke componenten te identificeren.
- AI Client: Een provider-onafhankelijke AI-infrastructuur die een gestandaardiseerde manier biedt voor WordPress PHP en JS code om te communiceren met generatieve AI-modellen. Omdat de AI Client provider-agnostisch is, kan het systeem onafhankelijk van een bepaalde AI provider werken.
- AI Provider: De entiteit of het bedrijf dat grote taalmodellen (LLM’s) ontwikkelt, bezit en beheert, zoals Anthropic, Google en OpenAI.
- Connector: Het onderdeel dat integratie tussen WordPress en AI providers mogelijk maakt. WordPress 7.0 bevat 3 standaard connectors – OpenAI, Anthropic en Google – die toegankelijk zijn via Settings > Connectors.
- Abilities API: Een nieuwe functionele interface die is ontworpen om plugins, thema’s en de core van WordPress in staat te stellen hun opties kenbaar te maken in zowel mens- als machineleesbare formats, zodat AI-agents op een gestructureerde manier kunnen communiceren met WordPress functies (bijvoorbeeld berichten maken of een uittreksel toevoegen). Dit is wat WordPress 7.0 uit zichzelf agentic maakt.
Connectors
In eerdere versies van WordPress had je voor elke AI-provider een aparte plugin nodig. WordPress 7.0 introduceert een centrale interface voor het beheren van AI-connectors via Settings > Connectors.
Je hoeft je API-sleutels niet meer op meerdere plekken in te vullen. Voer je sleutels eenmalig in via de Connectors pagina en alle compatibele plugins kunnen die verbinding gebruiken via de AI Client.
Daarnaast kun je via de nieuwe interface eenvoudig wisselen tussen AI-providers, zonder het risico iets te breken.
Klik in de Connectors pagina op Install bij je AI-provider en voer je API-sleutel in. Sla je instellingen op en je bent klaar om te communiceren met de AI-provider op je WordPress site.
Weet je niet waar je moet beginnen? Installeer dan de AI Experiments plugin. Hiermee kun je AI-gegenereerde uitgelichte afbeeldingen, alt-tekst, samenvattingen en meer toevoegen.
De nieuwe AI-integratie introduceert niet alleen een vernieuwde gebruikersinterface, maar stelt ontwikkelaars ook in staat nieuwe AI-providers te registreren via de Connectors API.
Ontwikkelaars kunnen connectors registreren en beheren met de nieuwe core klassen en -methoden. Na registratie verschijnt elke connector als een kaart in het Connectors-scherm.
De nieuwe API biedt ook drie publieke functies.
wp_is_connector_registered(): Controleert of een connector is geregistreerd.wp_get_connector(): Haalt de gegevens van een enkele connector op.wp_get_connectors(): Haalt alle geregistreerde connectors op.
Daarnaast kun je met de nieuwe action hook wp_connectors_init de metadata van geregistreerde connectors overschrijven.
Bouwen met de AI Client
Het Connectors scherm verzorgt de AI-interface. De AI Client is de motor onder de motorkap – een uniforme abstractielaag die standaardiseert hoe WordPress met AI communiceert. Of het nu OpenAI, Anthropic of Google Gemini is, je code blijft hetzelfde. WordPress regelt de vertaling, zodat jij je kunt richten op de logica van je applicatie.
De nieuwe wp_ai_client_prompt() functie is het centrale onderdeel van deze aanpak.
Hier is een eenvoudig voorbeeld in PHP:
$ai_response = wp_ai_client_prompt( "Create a professional post about WordPress" )
->generate_text();
if ( is_wp_error( $ai_response ) ) {
wp_die( $ai_response->get_error_message() );
}
echo wp_kses_post( $ai_response );Het volgende voorbeeld laat zien hoe je het antwoordschema definieert om de gegevens direct bruikbaar te maken.
$taxonomy_schema = array(
'type' => 'object',
'properties' => array(
'category' => array( 'type' => 'string' ),
'tags' => array(
'type' => 'array',
'items' => array( 'type' => 'string' )
),
),
'required' => array( 'category', 'tags' ),
);
$post_body = "Working from a small tavern in Crete was a game-changer. I realized that Greece is becoming the ultimate hub for remote workers in 2026.";
$json = wp_ai_client_prompt( "Based on this text, suggest the most appropriate category and 3-5 relevant tags: $post_body" )
->using_temperature( 0.1 )
->as_json_response( $taxonomy_schema )
->generate_text();
if ( is_wp_error( $json ) ) {
return $json;
}
$suggested_taxonomies = json_decode( $json, true );Voor deze code geldt het volgende:
- Met
as_json_response()zorgt WordPress ervoor dat de uitvoer pure JSON is die voldoet aan het opgegeven schema ($taxonomy_schema). using_temperature()bepaalt hoe de AI reageert: meer of minder deterministisch. Een lage temperatuur (0.1) levert meer precisie op, een hogere waarde stimuleert creatievere uitvoer.- De array
$suggested_taxonomiesbevat de categorieën en tags die door de AI zijn gegenereerd. Je kunt deze automatisch toewijzen aan je bericht.
Gestructureerde uitvoer levert voorspelbare resultaten op en is ideaal voor gebruik met de Abilities API. De bovenstaande code kan bijvoorbeeld worden ingezet om automatisch een bericht aan te maken met de opgegeven categorie en tags.
De API ondersteunt meer dan alleen tekst. Met de methode generate_image() kan de AI Client ook afbeeldingen genereren.
Je kunt meerdere resultaten opvragen met één call. Wil je bijvoorbeeld 3 tekst- of afbeeldingsvariaties, geef dan een numerieke waarde mee aan generate_text() of generate_image(): door generate_image( 3 ) aan te roepen, krijg je 3 variaties van dezelfde afbeelding.
De API biedt ook een set methoden die extra informatie teruggeven. Deze methoden retourneren een GenerativeAiResult-object met uitgebreide metadata, zoals het tokengebruik, de provider en het model dat op de prompt heeft gereageerd:
generate_text_result()generate_image_result()convert_text_to_speech_result()generate_speech_result()generate_video_result()
Zoals je ziet, bieden deze methoden aanvullende mogelijkheden – waaronder ondersteuning voor tekst-naar-spraak, spraak en videoconversie.
Andere API-methoden zijn:
using_max_tokens(): Beperk de lengte van het antwoord (bijv.->using_max_tokens( 500 ))using_model_preference(): Stel een specifiek model in (bijv.->using_model_preference( 'gemini-2.5-flash' ))
Voor een uitgebreide analyse en aanvullende codevoorbeelden, zie de WP AI Client GitHub-projectpagina en de wijzigingen die zijn doorgevoerd ter voorbereiding op WordPress 7.0.
Nieuwe blokken en ontwerptools
WordPress 7.0 introduceert nieuwe blokken en ontwerptools die de bewerkingservaring aanzienlijk verbeteren. Dit is wat er nieuw is en hoe je creatieve workflows veranderen.
Nieuw: Breadcrumbs-blok
WordPress 7.0 introduceert een nieuw Breadcrumbs-blok dat de paginahiërarchie weergeeft.
Het nieuwe blok bevat een dynamische component die de WordPress-datastructuur bevraagt om automatisch de huidige locatie van sitebezoekers te bepalen – op basis van de paginahiërarchie (parent/child) of de taxonomietermen van het bericht.
In de afbeelding hieronder toont het Breadcrumbs-blok de categoriehiërarchie van een gewone blogpost.
Het Breadcrumbs-blok werkt ook samen met de Query Loop. Voeg je een Breadcrumbs-blok toe aan een Query Loop-blok, dan geeft het de paden weer van individuele berichten die uit de query zijn opgehaald.
Het Breadcrumbs-blok heeft een aantal configuratieopties waarmee je:
- De link naar de startpagina als beginpunt van de navigatie toont of verbergt.
- De huidige breadcrumb toont of verbergt.
- Het scheidingsteken tussen breadcrumbs aanpast.
- Breadcrumbs op de startpagina weergeeft.
- De voorkeur geeft aan berichthiërarchie (standaard) of taxonomietermenhiërarchie.
Het Breadcrumbs-blok ondersteunt de Gutenberg-ontwerptools en introduceert twee filters waarmee ontwikkelaars breadcrumbs programmatisch kunnen aansturen.
Met het nieuwe filter block_core_breadcrumbs_post_type_settings kunnen ontwikkelaars aangeven welke taxonomie en term moeten worden gebruikt als een post meerdere taxonomieën of termen heeft.
In het volgende voorbeeld wordt het filter gebruikt om tags weer te geven in plaats van categorieën:
add_filter( 'block_core_breadcrumbs_post_type_settings', function( $settings, $post_type ) {
if ( 'post' === $post_type ) {
$settings['taxonomy'] = 'post_tag';
}
return $settings;
}, 10, 2 );Met het filter block_core_breadcrumbs_items kunnen ontwikkelaars items wijzigen, toevoegen of verwijderen uit het uiteindelijke breadcrumb-pad voordat het wordt weergegeven. Enkele gebruikssituaties:
- Vervang het Home-pictogram door een afbeelding (een SVG, je bedrijfslogo, enz.) om ruimte te besparen of de uitvoer beter af te stemmen op de huisstijl van je site.
- Verkort de titel van een bericht in de breadcrumbs als die te lang is.
- Voeg aangepaste categorieën of termen in, bijvoorbeeld door een stap in het breadcrumb-pad af te dwingen.
De volgende code gebruikt het nieuwe filter om breadcrumb-labels in te korten als de lengte meer dan 20 tekens bedraagt:
add_filter( 'block_core_breadcrumbs_items', function( $items ) {
foreach ( $items as $key => $item ) {
if ( mb_strlen( $item['label'] ) > 20 ) {
// Truncate the string to 17 characters and append '...'
$items[$key]['label'] = mb_strimwidth( $item['label'], 0, 17, '...' );
}
}
return $items;
}, 10, 1 );Voor een uitgebreider overzicht van breadcrumb-blokfilters en aanvullende codevoorbeelden, zie de dev note.
Nieuw: Icon-blok
Met het nieuwe Icon-blok kun je SVG-pictogrammen toevoegen aan je inhoud. Het blok biedt een native standaardoplossing voor het beheren van markup en het waarborgen van toegankelijkheidsconsistentie – zonder dat je een plugin van derden nodig hebt voor een paar pictogrammen.
Op dit moment wordt het blok geleverd met een standaardset waaruit je kunt kiezen. Er zijn plannen om in de toekomst de mogelijkheid toe te voegen voor gebruikers om pictogrammensets van derden te registreren.
Het blok is gebouwd op een nieuwe server-side SVG Icon Registration API. Dit zorgt ervoor dat updates van het pictogrammenregister foutloos worden doorgevoerd voor alle gebruikers. Bij de introductie van het Icon-blok hoort ook een nieuw /wp/v2/icons API-eindpunt.
Aanpasbare navigatie-overlays
Vóór WordPress 7.0 waren mobiele navigatiemenu’s statisch – je kon het ontwerp, de layout of de standaardinhoud niet aanpassen. WordPress 7.0 introduceert aanpasbare navigatie-overlays, waarmee je volledige controle krijgt over je navigatiemenu’s. Je kunt een menu-overlay bouwen met blokken en patronen, en een nieuw Navigation Overlay Close-blok gebruiken om overal in de overlay een sluitknop toe te voegen.
Technisch gezien zijn navigatie-overlays sjabloononderdelen. Zodra je er een hebt aangemaakt, vind je die terug in de Patterns sectie van de Site Editor-zijbalk. Elke overlay wordt gekoppeld aan een navigatieblok, maar je kunt meerdere navigatieblokken aan dezelfde overlay toewijzen.
In feite zijn het blokcanvassen die elk type blok kunnen bevatten. Je kunt een navigatieblok toevoegen, maar welke blokken je gebruikt is volledig aan jou – denk aan sociale pictogrammen, een zoekveld of het logo van je site.
Navigatie-overlays zijn uitsluitend bedoeld voor gebruik in het navigatieblok. Om te voorkomen dat ze per ongeluk elders in een sjabloon worden ingezet, zijn ze uitgesloten van de blokken-invoeginterface.
Je kunt een aangepaste navigatie-overlay aanmaken via de sectie Overlays in de zijbalk van het navigatieblok in de Site Editor.
Als je het navigatieblok selecteert, toont de sjabloononderdeel-zijbalk de instellingen voor de navigatie-overlay, verdeeld in twee secties. De sectie Content toont de bloktypen die in de overlay zijn opgenomen, terwijl de sectie Design een reeks vooraf gedefinieerde ontwerpen biedt.
De blokzijbalk is verdeeld in twee tabbladen: één voor instellingen en één voor stijlen van het Navigation Overlay template part.
Op het tabblad Styles van het Navigation Overlay-blok kun je het uiterlijk van je overlay aanpassen via kleuren, achtergrondafbeelding, typografie, afmetingen, rand en schaduw.
Thema-ontwikkelaars kunnen eenvoudig kant-en-klare navigatie-overlays aan hun thema’s toevoegen. Je kunt zowel een standaard overlay-template part (de overlay zelf) als een set overlay patterns aanleveren – vooraf gemaakte ontwerpen die verschijnen wanneer je een navigatie-overlay bewerkt.
Voor een uitgebreider overzicht en codevoorbeelden, zie de officiële dev note en dit pull request.
Verbeteringen aan het Paragraph-blok
Verschillende nieuwe toevoegingen aan het Paragraph-blok bieden meer flexibiliteit in tekststijlen. Ten eerste kun je met een nieuwe optie in de Typografie-instellingen de inspringing van de eerste regel instellen.
Je kunt de inspringing instellen voor individuele alinea’s, of globaal toepassen via de Globale stijlinstellingen onder Editor > Styles > Blocks > Paragraph.
Thema-ontwikkelaars kunnen regelinspringing in- of uitschakelen en gedetailleerd instellen via het theme.json-bestand, met de nieuwe textIndent property.
Het Paragraph-blok ondersteunt nu ook brede en volledige uitlijning. De volgende afbeelding toont de nieuwe uitlijningmogelijkheid.
Een andere handige toevoeging is de ondersteuning voor tekstkolommen. Deze nieuwe optie is beschikbaar onder de Typography settings in de zijbalk van het blok.
Ingesloten achtergrondvideo’s voor het Cover-blok
Met WordPress 7.0 kun je ingesloten video’s – zoals die van YouTube of Vimeo – gebruiken als achtergrondvideo voor het Cover-blok. Voorheen kon je alleen geüploade video’s gebruiken.
Dit is met name handig als je bandbreedte wilt besparen door video’s op externe platforms te hosten.
Om een gehoste video toe te voegen, klik je op Add media in de werkbalk van het Cover-blok en kies je vervolgens Embed Video from URL.
Je wordt vervolgens gevraagd de video-URL in te voeren.
Je ingesloten video verschijnt als achtergrondvideo in je Cover-blok, zowel in de editor als op de frontend.
Responsief Grid-blok
Het Grid-blok is bijgewerkt en is nu van zichzelf responsief. In eerdere versies van WordPress konden gebruikers kiezen tussen de Auto- en de Handmatige modus. In de Auto-modus kon je de minimale kolombreedte instellen; in de Handmatige modus bepaalde je het aantal kolommen, dat vervolgens vast bleef.
Vanaf WordPress 7.0 is het Grid-blok van zichzelf responsief. Het aantal kolommen fungeert nu als maximum, en je kunt de minimale kolomgrootte en het maximale aantal kolommen nauwkeurig instellen terwijl het blok responsief blijft.
Custom CSS per blokinstantie
Je kunt nu custom stijlen toevoegen aan specifieke blokinstanties via de Geavanceerde instellingen van het blok.
Voeg je eigen stijlen toe aan een blok, dan voegt WordPress automatisch de class has-custom-css toe. Inspecteer je het blok in de code-editor, dan zie je iets als het volgende:
<!-- wp:image {
"id":848,
"sizeSlug":"large",
"linkDestination":"none",
"style":{ "css":"border: 4px solid blue;" }
} -->
<figure class="wp-block-image size-large has-custom-css">
<img src="http://example.com/wp-content/uploads/2026/03/example-768x1024.jpg" alt=" class="wp-image-848"/>
</figure>
<!-- /wp:image -->De aangepaste stijl wordt geladen ná de WordPress-standaardstijlen en globale stijlen, zodat jouw aanpassingen geen invloed hebben op andere instanties van hetzelfde blok.
Blokzichtbaarheid op basis van viewport
Vanaf WordPress 7.0 kun je blokken afzonderlijk verbergen of tonen op basis van het apparaat van de gebruiker: mobiel, tablet of desktop.
Deze eerste iteratie voegt de nieuwe viewport-eigenschap toe aan blockVisibility.
{
"metadata": {
"blockVisibility": {
"viewport": {
"mobile": false,
"tablet": true,
"desktop": true
}
}
}
}Je schakelt zichtbaarheidscontrole in door het bovenstaande JSON-object toe te voegen aan het blok via de Code-editor of het Opdrachtpalet.
Heb je blokzichtbaarheid ingeschakeld, dan open je de zichtbaarheidsopties via de popup in de blokwerkbalk, de blokinspector in de -zijbalk of het opdrachtpalet.
Toekomstige releases zullen configureerbare breekpunten en integratie met theme.json toevoegen voor blokzichtbaarheid.
Stylingopties voor het Math-blok
Vóór WordPress 7.0 was het uiterlijk van het Math-blok niet aan te passen. De nieuwe versie voegt kleur, typografie, afmetingen en rand toe als stylingopties voor het Math-blok.
De volgende afbeelding geeft een voorbeeld van de opmaak van het Math-blok:
Vernieuwd HTML-blok
Het HTML-blok is volledig vernieuwd. Voeg je nu een HTML-blok in, dan verschijnt er een popup met drie aparte tabbladen voor HTML, CSS en JavaScript.
Heb je meer ruimte nodig, dan schakel je met een knop rechtsboven in de popup naar volledig scherm.
Verbeteringen aan het Image-blok
Het Image-blok is bijgewerkt met verschillende verbeteringen die meer aanpassingsmogelijkheden bieden.
Het blok ondersteunt nu beeldverhouding voor brede en volledige uitlijning (PR #74519). Deze nieuwe functie is beschikbaar op het tabblad Styles in de blokinstellingen-zijbalk.
Een andere handige toevoeging is de focuspuntregeling. Hiermee pas je het zichtbare deel van een afbeelding aan wanneer deze wordt bijgesneden (PR #73115).
De bijsnijdcomponent in de editor is verplaatst naar een apart pakket en kan nu door de hele applicatie worden gebruikt, niet alleen in de blokeditor (PR #73277).
Verbeterde beheerervaring
Met WordPress 7.0 is het beheerpaneel opnieuw ontworpen en gemoderniseerd. Het is een substantiële verbetering van de beheerervaring, gericht op soepelere navigatie, meer consistentie en een frissere uitstraling.
Visuele verbeteringen
Open je het WordPress 7.0-beheerpaneel, dan valt meteen op hoe anders de interface-elementen eruitzien. Deze wijzigingen zijn uitgebreid besproken en waren nodig om het dashboard te moderniseren en inconsistenties tussen het klassieke dashboard en de blokeditor te verminderen.
Het doel is om het uiterlijk van de beheerinterface te moderniseren, inconsistenties tussen de oudere pagina’s en de nieuwere pagina’s van de blokeditor en site-editor te verminderen, en het geheel beter af te stemmen op het WordPress-ontwerpsysteem.
Het visuele herontwerp richt zich op een reeks kerncomponenten die door het hele beheerpaneel worden gebruikt. Zoals Fabian Kaegy al aangaf: dit zijn puur visuele wijzigingen, zonder architecturale of functionele aanpassingen.
Je kunt de nieuwe menu’s, knoppen en overgangen in WordPress 7.0 bekijken in het officiële WordPress Design System op Figma.
Visuele revisies
Revisies worden nu weergegeven als previews in een editor-achtige interface die visuele verschillen benadrukt. Je hoeft niet langer het hele artikel door te lezen om te zien wat er is veranderd – verschillen tussen versies worden nu gemarkeerd op blokniveau. Het systeem detecteert ook stijlwijzigingen, waardoor aanpassingen aan kleurenpalet, typografie, afmetingen en dergelijke direct zichtbaar zijn.
Verschillende kleuren geven verschillende soorten wijzigingen aan:
- Geel markeert een gewijzigd blok of stuk tekst.
- Rood markeert een verwijderd blok of stuk tekst.
- Groen markeert een toegevoegd blok of stuk tekst.
Met revisies zie je de kracht van Yjs in actie: bij het herstellen van een eerdere versie worden alleen de wijzigingen per blok teruggedraaid, niet de volledige inhoud.
Naar verwachting wordt het systeem in toekomstige updates verder uitgebreid. Voor een gedetailleerd overzicht van wat er al is gedaan en wat er nog aankomt, zie dit bericht van Mathias Ventura uit 2023 en de nummers #60096 en #61161.
Weergave-overgangen
Met WordPress 7.0 krijgt het opstartpakket – het onderdeel dat verantwoordelijk is voor het initialiseren van de editor en het beheren van overgangen tussen beheerschermen – een aanzienlijke upgrade. Navigeren tussen dashboardschermen vereist daardoor geen abrupte pagina-herlaadactie meer, maar verloopt via vloeiende overgangen die de beheerervaring merkbaar verbeteren.
Technisch gezien kan WordPress, door de View Transitions API in het opstartpakket te integreren, nu zoom- en slide-animaties orkestreren bij statuswijzigingen. Dit voorkomt dat het canvas opnieuw wordt opgebouwd bij routewijzigingen, wat resulteert in een vloeiende overgang voor de hoofdnavigatie.
Wijzigingen voor ontwikkelaars
WordPress 7.0 is meer dan een visuele update – het introduceert structurele wijzigingen die de ontwikkelworkflow aanzienlijk vereenvoudigen. Denk hierbij aan minder custom CSS dankzij een krachtiger theme.json, voorspelbaarder layoutbeheer door uitgebreid gebruik van iframes, nieuwe declaratieve tools voor beheerinterfaces met verbeterde DataViews, DataForm en Field API, en een nieuwe Client-side Abilities API die een gestandaardiseerde manier biedt om applicatiemogelijkheden via JavaScript te registreren en te gebruiken.
Dit zijn de belangrijkste technische wijzigingen in WordPress 7.0 voor ontwikkelaars.
Ondersteuning voor pseudo-klassen in theme.json
Goed nieuws voor thema-ontwikkelaars. Vanaf WordPress 7.0 kun je pseudo-class selectors (:hover, :focus, :focus-visible en :active) direct gebruiken op blokken en stijlvarianten in je theme.json.
Vóór WordPress 7.0 werden pseudo-klassen alleen ondersteund voor HTML-elementen zoals knoppen en links. Ze op blokniveau gebruiken was alleen mogelijk via aangepaste CSS.
Om pseudo-klassen op blokniveau te gebruiken, voeg je je stijlconfiguratie toe in de sectie styles van je theme.json-bestand. Hier is een eenvoudig voorbeeld voor een Button-blok (zie ook PR #71418):
{
"version": 3,
"styles": {
"blocks": {
"core/button": {
"border": {
"width": "2px",
"style": "solid",
"color": "#000000"
},
":hover": {
"border": {
"color": "#ff4400"
},
"shadow": "0 8px 15px rgba(255, 68, 0, 0.3)",
"typography": {
"textDecoration": "underline"
}
},
":active": {
"filter": "brightness(0.8)",
"shadow": "none"
}
}
}
}
}De volgende afbeelding toont de verschillende toestanden van het Button-blok.
Het volgende voorbeeld laat zien hoe je pseudo-klassen gebruikt voor een blokvariatie in theme.json:
{
"version": 3,
"styles": {
"blocks": {
"core/button": {
"variations": {
"neon": {
"border": {
"width": "2px",
"style": "solid",
"color": "#00ff00"
},
"color": {
"text": "#00ff00",
"background": "transparent"
},
":hover": {
"border": {
"color": "#ffffff"
},
"shadow": "0 0 20px #00ff00, 0 0 40px #00ff00",
"color": {
"text": "#ffffff"
},
"typography": {
"textDecoration": "none"
}
},
":active": {
"filter": "brightness(1.5) blur(1px)",
"shadow": "0 0 10px #ffffff"
}
}
}
}
}
}
}Iframed post editor
Vanaf WordPress 7.0 wordt de post editor geladen in een iframe als de inhoud uitsluitend blokken bevat die Block API versie 3 of hoger gebruiken. Vóór versie 7.0 werd de post editor alleen in een iframe geladen als álle geregistreerde blokken – ook de blokken die niet in de inhoud stonden – Block API v3 gebruikten.
Het belangrijkste voordeel van de iframed editor is dat de UI-stijlen van de editor worden geïsoleerd van de inhoudsstijlen van het thema. Zonder iframe bestaan de stylesheets van de editor en het thema naast elkaar in hetzelfde document, wat regelmatig leidt tot compatibiliteitsproblemen en het lastig maakt om visuele consistentie te bereiken tussen de backend en frontend.
De belangrijkste voordelen van de iframed post editor zijn:
Stijlisolatie
- Geen CSS-doorwerking: Het iframe voorkomt dat WordPress-admin-stijlen het editorcanvas binnendringen en vice versa, zodat het uiterlijk van blokken niet wordt beïnvloed door de omringende UI.
- Geen CSS-reset meer nodig: Ontwikkelaars hoeven niet langer handmatig WordPress-admin-CSS-regels te resetten om de inhoud van de editor overeen te laten komen met de frontend.
- Geen prefixing: Thema-ontwikkelaars hoeven geen voorvoegsels of high-specificity selectors meer toe te voegen aan hun CSS-regels om te voorkomen dat de admin-interface wordt verstoord.
Layoutconsistentie
- Viewport-relatieve eenheden: Zonder iframe verwijzen eenheden als
vw(viewport width) envh(viewport height) naar de hele beheerpagina, inclusief de zijbalk. Ze zijn alleen bedoeld voor gebruik op het editorcanvas. - Native media queries: Media queries werken van nature binnen het iframe en weerspiegelen de canvasgrootte van de editor in plaats van het volledige browservenster.
Ontwikkelervaring
- Vereenvoudigde workflow: Thema- en plugin-ontwikkelaars kunnen frontend-stijlen met minimale aanpassingen doorvoeren naar de editor.
- Blijvende selecties: Iframes houden de selectie in de editor zichtbaar – zoals geselecteerde tekst – ook als de gebruiker interacteert met UI-elementen zoals zijbalkregelaars.
- Voorspelbaarheid: De iframed editor lost ook het probleem van visuele inconsistentie op, doordat de editor niet langer plotseling van modus wisselt op basis van geïnstalleerde plugins.
Achterwaartse compatibiliteit
Bevat een bericht een blok dat oudere API-versies gebruikt, dan wordt het iframe automatisch verwijderd om achterwaartse compatibiliteit te garanderen. Om te profiteren van deze verbeteringen, worden blokontwikkelaars aangeraden hun blokken bij te werken naar Block API versie 3.
PHP-only blokregistratie
WordPress 7.0 introduceert de mogelijkheid om blokken uitsluitend via PHP te registreren met automatisch gegenereerde inspector-bedieningselementen. Deze toevoeging stroomlijnt de workflow voor ontwikkelaars en moedigt sites die hybride thema’s of klassieke PHP-functies en shortcodes gebruiken aan om de blokeditor verder te omarmen. Hier is een voorbeeld van een blok dat via PHP is geregistreerd:
/**
* Render callback (frontend and editor)
*/
function my_php_only_block_render( $attributes ) {
return '<div>
<h3>🚀 PHP-only Block</h3>
<p>This block was created with only PHP!</p>
</div>';
}
/**
* Register the block on the 'init' hook.
*/
add_action( 'init', function() {
register_block_type( 'my-plugin/php-only-test-block', array(
'title' => 'My PHP-only Block',
'icon' => 'welcome-learn-more',
'category' => 'text',
'render_callback' => 'my_php_only_block_render',
'supports' => array(
// Automatically registers the block in the Editor JS (previously auto_ssr)
'auto_register' => true,
),
) );
});Op dit moment zijn PHP-only blokken niet dynamisch en kunnen ze alleen bepaalde configuratiebedieningselementen gebruiken. Er zijn echter tal van gebruikssituaties te ontdekken. Daarom hebben we een aparte tutorial gepubliceerd over PHP-only blokken. Ben je PHP-ontwikkelaar, dan is het de moeite waard om die te bekijken.
Verbeteringen aan DataViews, DataForm en Field API
WordPress 7.0 introduceert diverse verbeteringen aan DataViews, waarmee een duidelijke stap wordt gezet richting een modernere, modulaire beheerinterface. Ontwikkelaars kunnen nu complexe aangepaste interfaces bouwen door hun regels in JSON-format te definiëren – de core genereert de interface automatisch.
Nieuwe toevoegingen zijn onder andere:
- Verbeteringen in datavisualisatie (DataViews): De nieuwe Activities layout gebruikt een activity-feed-tijdlijnstijl. Er is ook een nieuwe compacte weergavemodus voor lijsten.
- Formulierverbeteringen (DataForm): De nieuwe Details layout is nu beschikbaar, samen met bewerkingspictogrammen voor de Panel layout. Deze pictogrammen zijn configureerbaar zodat ze alleen verschijnen wanneer nodig.
- Verbeteringen aan databeheer (Field API): Automatische veldvalidatie is beschikbaar, samen met nieuwe opmaakopties voor numerieke velden en datumvelden.
Het volgende is een voorbeeld van hoe je een weergave definieert die gegevens groepeert en weergeeft in de compacte modus:
const myCompactView = {
type: 'list',
layout: {
density: 'compact'
},
groupBy: {
field: 'status',
direction: 'desc',
showLabel: true
}
};Voor een gedetailleerd overzicht van de verbeteringen aan DataViews, DataForm en Field API, zie de dev note.
Client-side Abilities API
WordPress 6.9 introduceerde de Abilities API – een nieuwe functionele interface die een gestandaardiseerd register biedt voor plugins, thema’s en de WordPress-core om hun mogelijkheden te registreren in zowel mens- als machineleesbare formaten.
WordPress 7.0 breidt dit uit met een JavaScript API waarmee je client-side functies – zoals navigeren of blokken toevoegen – direct vanuit JavaScript kunt inzetten op een veilige en gestandaardiseerde manier.
De nieuwe Client-side Abilities API bestaat uit twee pakketten.
@wordpress/core-abilities: Heeft je plugin toegang nodig tot de op de server geregistreerde abilities, dan koppel je aan dit pakket. Het haalt alle geregistreerde abilities en categorieën op via de REST API en slaat ze op in de@wordpress/abilities-store.@wordpress/abilities: Dit pakket biedt de abilities-store zonder de server-side abilities te laden. Hoeft je plugin alleen client-side abilities te registreren en heeft het geen toegang nodig tot server-side geregistreerde abilities, dan gebruik je@wordpress/abilities.
Zie de dev note voor een gedetailleerde analyse van de nieuwe Client-side Abilities API en diverse codevoorbeelden.
Wijzigingen in de Interactivity API
De Interactivity API is een WordPress-native API waarmee ontwikkelaars op een gestandaardiseerde manier interactiviteit aan hun sites kunnen toevoegen. WordPress 7.0 breidt de Interactivity API uit met een nieuwe watch()-functie waarmee je toestandswijzigingen programmatisch kunt observeren. Voorheen was je aangewezen op de data-wp-watch richtlijn om te reageren op statuswijzigingen.
Andere wijzigingen in WordPress 7.0 hebben betrekking op de core/router-store.
Voor een gedetailleerde beschrijving van de wijzigingen in de Interactivity API, zie de dev note.
Overige wijzigingen voor ontwikkelaars
Nog een aantal andere wijzigingen die het vermelden waard zijn:
- Vanaf WordPress 7.0 ondersteunen blokattributen die Block Bindings ondersteunen ook Pattern Overrides. Dit betekent dat je pattern overrides kunt gebruiken met elk blok, inclusief aangepaste blokken.
- Niet-gesynchroniseerde patronen en template parts staan nu standaard op
contentOnly. Gebruikers zien eerst de bedieningselementen voor tekst en media, zonder het risico de blokstructuur per ongeluk te verbreken. Heb je custom blokken gemaakt die bewerkbaar moeten blijven, stel dan"role": "contentOnly"in hetblock.jsonbestand in. Ontwikkelaars kunnen deze functie uitschakelen via PHP met deblock_editor_settings_all-filter, of via JavaScript doordisableContentOnlyForUnsyncedPatternsoptruete zetten. - WordPress 7.0 laat ondersteuning voor PHP 7.2 en 7.3 vallen. De minimaal aanbevolen versie van PHP blijft 8.3.
- Het ondersteuningssysteem voor afmetingen is aanzienlijk verbeterd. Je kunt
breedteenhoogteals standaard blokondersteuning gebruiken onderdimensionsinblock.json, en thema’s kunnen voorinstellingen voor afmetingen definiëren in huntheme.json.
Vooruitblik: WordPress 7.0 is het begin van een nieuw tijdperk
WordPress 7.0 is geen gewone update – het is een keerpunt voor zowel gebruikers als ontwikkelaars. Dankzij AI-integratie en de Abilities API kan AI nu door het dashboard navigeren, nieuwe inhoud aanmaken en bestaande berichten bewerken. We staan aan het begin van iets nieuws, en we kijken ernaar uit om deze AI-gedreven mogelijkheden verder te verkennen.
Maar WordPress 7.0 is meer dan AI. De bewerkingservaring is volledig vernieuwd: een nieuwe revisiearchitectuur op blokniveau, nieuwe kernblokken en belangrijke updates van het ontwerpsysteem.
Naast AI-integratie profiteren ontwikkelaars van verbeteringen die de ontwikkelworkflow stroomlijnen en nieuwe mogelijkheden ontsluiten. Van de iframed editor en pseudo-class-ondersteuning in theme.json tot de Client-side Abilities API en PHP-only blokken – WordPress 7.0 biedt een veelzijdige basis voor het bouwen van krachtigere sites en applicaties.
Om het volledige potentieel van WordPress 7.0 te benutten, heb je een hostingomgeving nodig die is geoptimaliseerd voor prestaties en beveiliging. Bij Kinsta vind je alles wat je nodig hebt om het maximale uit WordPress te halen. Bekijk onze pakketten en kies het pakket dat het beste past bij jouw use case.
Carlo is een gepassioneerd liefhebber van webdesign en front-end development. Hij werkt al meer dan 10 jaar met WordPress, ook in samenwerking met Italiaanse en Europese universiteiten en onderwijsinstellingen. Hij heeft tientallen artikelen en gidsen over WordPress geschreven, gepubliceerd op zowel Italiaanse als internationale websites en in gedrukte tijdschriften. Je kunt Carlo vinden op X en LinkedIn.
