Wat is er nieuw in WordPress 6.2: Browse modus, Style Book, verbeterde navigatiemenu’s, nieuwe API’s en nog veel meer

WordPress 6.2 “Dolphy” is uitgebracht en het is tijd voor ons om te verkennen wat er allemaal voor nieuws te vinden in alweer de eerste release van 2023.

Met WordPress 6.2 komen we in de laatste fase van fase 2 van de langetermijn roadmap voor de ontwikkeling van Gutenberg, en verlaat de blokeditor officieel de bètafase.

Deze release richt zich vooral op het verbeteren van de interface en het stroomlijnen van de bewerkingservaring.

Ook is er een nieuwe aanpak voor het navigeren tussen templates en templatedelen geïntroduceerd, evenals de mogelijkheid om widgets te importeren in blokthema’s, een nieuwe schrijfmodus zonder afleiding, een geschaalde ervaring met blokinstellingen, en veel grote en kleine verbeteringen aan bestaande blokken, prestaties en bruikbaarheid.

Maar als er iets is dat qua functionaliteit en bruikbaarheid een sprong voorwaarts maakt, dan is het wel het Navigation blok. Sinds het voor het eerst werd uitgebracht, heeft het Navigation menu verschillende versies doorlopen die het bewerkingsproces in de loop der tijd aanzienlijk hebben gestroomlijnd. Met WordPress 6.2 gaat de ontwikkeling door, en in dit artikel laten we je zien hoe eenvoudig je nu een navigatiemenu kunt beheren.

Bekijk onze videohandleiding om uit te vinden wat er nieuw is in WordPress 6.2

Verbeterde bewerkingservaring

WordPress 6.2 introduceert een verbeterde bewerkingservaring, waarbij de algehele sitestructuur centraal staat. Je kunt nu gemakkelijker navigatiemenu’s beheren, stijlwijzigingen van een enkel blok naar globale stijlen pushen, en moeiteloos navigeren tussen templates en templatedelen met gekleurde templatedelen en herbruikbare blokken.

Maar er is nog veel meer. Laten we de belangrijkste toevoegingen en wijzigingen aan de interface van de editor in detail verkennen.

Een vernieuwde Site Editor interface en Browse modus

Met WordPress 6.2 komen verschillende verbeteringen aan de editor interface naar de core. De eerste en meest interessante update beïnvloedt de Site Editor interface. Dankzij een nieuwe Browse modus is het nu gemakkelijker om door templates  en templatedelen te navigeren.

Met de nieuwe interface kun je ook direct vanuit de zijbalk van de editor een nieuw template  of templatedeel toevoegen door simpelweg te klikken op het plus (+) pictogram rechts van de menutitel.

Volgens Ryan Welcher, medewerker WP Core en Documentatie, “Het werken aan deze feature is gaande en zal blijven verbeteren naarmate nieuwe Gutenberg versies worden uitgebracht.”

De workflow is nu soepeler en naadlozer. Om te beginnen met het bewerken van het huidige template/templatedeel, klik je gewoon op de knop Edit in het linkermenu, of op het Template preview in het midden van de pagina.

Distraction Free modus

WordPress 6.2 introduceert een nieuwe Distraction Free bewerkingsmodus, die overbodige dingen van het canvas wegneemt en je in staat stelt je te concentreren op de content van de pagina.

Je kunt deze feature activeren in het optiepaneel dat verschijnt door te klikken op het ellipspictogram (drie puntjes) in de rechterbovenhoek.

Zodra de Distraction Free modus is geactiveerd, verdwijnen de externe zijbalken en werkbalken, zodat op het scherm alleen de content overblijft waaraan je werkt.

Block Inspector met tabbladen

WordPress 6.2 introduceert een nieuwe Block Inspector die zich richt op het aanbrengen van orde in de zijbalk door het verdelen van instellingscontroles in aparte panelen.

Blokinstellingen zijn nu verdeeld in tabbladen om stijlinstellingen te scheiden van andere blokinstellingen.

Indien beschikbaar worden de tabbladen van de Block Inspector in de volgende volgorde weergegeven:

• List view: Bevat bedieningselementen voor het beheer van de childs van een blok, zoals submenu’s en links in het Navigation blok
• Settings: Bevat configuratie-instellingen die geen betrekking hebben op het uiterlijk van het blok
• Appearance: Bevat instellingen die specifiek betrekking hebben op de vormgeving van het huidige blok, zoals typografie en kleuren

Dit is een opmerkelijke verbetering van de bruikbaarheid van de interface, vooral voor geavanceerde blokken met veel configuratie-opties zoals het Group blok of Navigation blok.

Merk op dat:

• De nieuwe Inspector toont alleen een tabblad als het elementen bevat om weer te geven.
• Als het tabblad Settings alleen het paneel Advanced bevat, wordt het verplaatst naar het tabblad Appearance.
• Als de Block Inspector slechts één tabblad heeft, dan wordt deze weergegeven zoals vóór WordPress 6.2.

Bekijk de dev note voor meer informatie op de nieuwe Block Inspector.

Gekleurde templatedelen en Reusable blokken

Om ze gemakkelijker te onderscheiden van groepen en blokken, worden Template Parts en Reusable blokken nu gemarkeerd in een andere kleur in List View, Blok Inserter, Blok Toolbar, en in het editor canvas.

Dit gebeurt zowel in de site-editor als in de posteditor, zoals de afbeelding hieronder laat zien.

Een vernieuwde Block Inserter

In de Block Inserter zijn verschillende veranderingen aangebracht die de algehele bewerkingservaring aanzienlijk verbeteren.

Ten eerste verbetert een nieuw interfaceontwerp de navigatie tussen patroon- en mediacategorieën en biedt het grotere previews voor patronen en media-items.

Als er media bestaan op de site, verschijnt er een Media tab in de Block Inserter om het invoegen van media binnen de content te vereenvoudigen. Je kunt afbeeldingen/media verslepen of gewoon op je media klikken om ze aan de content toe te voegen.

Binnen het tabblad brengt een knop Open Media Library je naar de WordPress Media Library.

Openverse integratie in de Block Inserter

Openverse is een tool dat tot doel heeft om werken met een open licentie of in het publieke domein te delen voor algemeen gebruik. Met WordPress 6.2, is Openverse geïntegreerd in de Block Inserter.

Om toegang te krijgen tot deze nieuwe feature klik je op het tabblad Media van de Block Inserter. Dit toont een paneel met een zoekveld en afbeeldingen die direct uit de Openverse repository komen.

Zie voor de technische details het Openverse integratie pull request.

Widgets migreren naar blokthema’s

Vanaf WordPress 6.2 kunnen gebruikers met een site met een klassiek thema die besluiten over te stappen op een blokthema hun bestaande widgetgebieden migreren naar het nieuwe thema, waarbij ze worden omgezet in templatedelen.

Laten we eens kijken hoe dat werkt.

Maak eerst een widgetgebied in een klassiek thema. Je kunt bijvoorbeeld Twenty-Eleven activeren en een kalender toevoegen aan Footer Area One.

Verander nu het thema in Twenty Twenty-Three. Open de Site Editor, kies een template om te bewerken, en voeg een templatedeel toe.

Selecteer in de blokzijbalk het te importeren widgetgebied in het dropdownmenu Import Widget Area.

En dat is het. Nu kun je je vorige widgetgebied beheren zoals elk ander templatedeel..

Document Details en List View gecombineerd

Vóór WordPress 6.2 waren er twee aparte knoppen in de werkbalk van de Editor voor Details en List View. In de volgende afbeelding zie je de popover voor documentinformatie in WordPress 6.1, inclusief het aantal woorden, het aantal tekens, de leestijd, en het aantal koppen, paragrafen en blokken, en de Document Outline.

Vanaf WordPress 6.2 zijn List View en Details verplaatst naar een enkel Document Overview paneel, verdeeld in twee tabbladen: List View en Outline.

Deze verandering moet zorgen voor een eenvoudiger manier om het document te beheren.

Uitgebreide blokmogelijkheden

Met WordPress 6.2 zijn de mogelijkheden van verschillende corebloktypen uitgebreid. Dit geldt met name voor het Navigation blok, dat wordt beïnvloed door verschillende veranderingen en verbeteringen in de bewerkingservaring.

Laten we de belangrijkste veranderingen in detail bekijken.

Op lijsten gebaseerde bewerking voor Navigation blok

Met de release van WordPress 6.2 is het mogelijk om de indeling van Navigation blok elementen te wijzigen vanuit een lijstweergave in de zijbalk met blokinstellingen.

Als je op het menu-item klikt, kom je in de instellingenzijbalk van de geselecteerde paginalink, waar je de linkdetails kunt bewerken, inclusief label, URL, beschrijving, linktitel en linkrel.

Deze verandering vereenvoudigt het bewerken van navigatiemenu’s aanzienlijk, zodat je items in je menu kunt toevoegen, rangschikken en verwijderen, of zelfs nieuwe navigatiemenu’s kunt maken.

Navigatie vergrendelen

Een andere verbetering van het Navigation blok is de mogelijkheid om het bewerken van menu’s op een meer granulaire manier te vergrendelen. Nu kun je Restrinct editing, Disable movement en Prevent removal, terwijl met WordPress 6.1 alleen de opties Restrinct editing en Disable movement beschikbaar waren.

Bovendien kunnen de geselecteerde opties ook worden toegepast op de binnenste blokken (links en submenu’s).

Add/Remove caption in de Block Toolbar

Met een nieuwe knop Add/Remove caption kunnen gebruikers vanuit de blokwerkbalk captions regelen voor verschillende blokken (Audio, Video, Image).

Als je al een caption hebt ingesteld, wordt dat automatisch opgenomen als je de afbeelding aan je content toevoegt.

Verbeteringen aan het Page List blok

Twee verbeteringen betreffen het Page List blok.

Ten eerste kan het Page List blok nu worden uitgebreid om de lijst met pagina’s te tonen in het List View paneel.

Bovendien kun je met een nieuwe optie in de zijbalk van het blok nu een beginpagina instellen en alleen de pagina’s die daarvan afstammen in het blok weergeven.

Nieuwe placeholder voor Group blok

De Group blok placeholder toont nu een variantenkiezer wanneer het blok aan de paginacontent wordt toegevoegd.

Ondersteuning voor sticky positionering blokken

WordPress 6.2 introduceert een nieuwe feature voor de ondersteuning van verschillende positioneringen van blokken, te beginnen met sticky positionering.

Deze nieuwe feature is momenteel alleen van toepassing op Group blokken, waarvoor het standaard is gekozen.

Themadevelopers  kunnen sticky positionering op hun thema’s inschakelen met behulp van de feature  appearanceTools in theme.json. Als je uitgebreidere controle wilt over deze tools, kun je ook de settings.position.sticky prop instellen op true.

Je kunt sticky positionering inschakelen in het Position paneel van de Inspector controlezijbalk.

Met sticky positionering ingeschakeld, krijgt de HTML tag een is-position-sticky class, en gelden sommige CSS regels voor het bijbehorende element:

.wp-container-6 {
    top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
    position: sticky;
    z-index: 10;
}

Sticky positionering  werkt alleen voor Group blokken aan de root van het document. Hoewel dit verwarring en fouten voor gebruikers kan voorkomen, zou je ingebouwde sticky positionering op dit moment een lastig kunnen vinden (en wil je misschien verschillende methoden bekijken om een sticky header aan je WordPress website toe te voegen). Maar volgens de dev note:

… bij handmatig testen gaf de feedback aan dat het zonder extra UI of UX werk verwarrend zou kunnen zijn voor gebruikers die sticky headers proberen te maken als ze per ongeluk een niet-root blok op sticky zetten, of bijvoorbeeld een blok binnen een header templatedeel op sticky. Voor 6.2 is besloten de feature terug te brengen tot alleen de rootblokken, zodat er meer tijd is om een geschikte oplossing voor geneste blokken te onderzoeken.

De positioneringsfeature is alleen beschikbaar voor individuele blokken, dus je vindt hem niet in Global Styles.

Aanvullende verbeteringen aan de blokbewerkingservaring

Enkele andere opmerkelijke verbeteringen aan het bewerken van blokken zijn de volgende:

• Je kunt nu afbeeldingen naar een lege alinea draggen en droppen om die te vervangen door een Image blok.
• Bedieningselementen voor typografie zijn gegroepeerd in panelen. Dit maakt de Styles interface consistenter met de Settings interface en verbetert de bruikbaarheid ervan, omdat je nu bedieningselementen kunt tonen en verbergen zoals in de interface voor blokinstellingen.

  

• Het is nu mogelijk om de letterafstand van de Heading blokken direct in de interface Global Styles aan te passen.
• Je kunt nu de achtergrond-, link- en tekstkleur van het Calender blok instellen.
• Er zijn twee nieuwe categorieën blokpatronen Banners en Footers geïntroduceerd om de structuur van webpagina’s beter weer te geven.
• Het is nu mogelijk om links in elk blok automatisch aan te vullen met de shortcut [[. Vóór deze verandering moesten blokken expliciet ondersteuning voor het automatisch aanvullen van links aangeven met __experimentalSlashInserter.
• Met een nieuwe sneltoets control + option + 1–6 kun je een paragraaf veranderen in een kop.
• Het blok Page List ondersteunt nu alle typografische opties, inclusief lettertypefamilie, lettergrootte, uiterlijk, regelhoogte, letterafstand, decoratie en hoofdlettergebruik.

  

Verbeterde ontwerptools

Veel van de nieuwe features en verbeteringen die met WordPress 6.2 zijn geïntroduceerd, verbeteren de styling- en ontwerpmogelijkheden van het CMS. Hieronder volgt een lijst van de meest interessante ontwerpgerelateerde features die met 6.2 komen; we zullen ze verder in detail bespreken.

Style Book

WordPress 6.2 introduceert een nieuwe Style Book feature waarmee gebruikers elk blok dat op hun websites gebruikt kan worden kunnen previewen zonder dat ze die blokken aan een template/templatedeel hoeven toe te voegen. Je kunt het Style Book starten door te klikken op de knop Open Style Book (het oogicoontje) dat nu verschijnt in de Styles header binnen global styles.

Dit opent een interface met een preview van elk coreblok en extern blok per categorie.

De nieuwe Style Book interface vereenvoudigt het ontwerpproces door previews van elke blokstijl beschikbaar te maken op één centrale plaats.

Technisch gezien wordt de nieuwe interface gegenereerd door een nieuw StyleBook component die is toegevoegd aan @wordpress/edit-site om een preview van elk geregistreerd blok in een iframe weer te geven (zie ook PR #45960).

Dezelfde interface geeft ook previews van individuele blokken. Als voorbeeld toont de volgende afbeelding de preview van een aangepaste kalenderwidget.

Developers  kunnen een blok op twee manieren verbergen voor het invoegen en previewen. Ten eerste kun je supports.inserter instellen op false in block.json:

{
    "supports": {
        "inserter": false
    }
}

Een andere manier om de blokpreview te verbergen is door de property example te vermijden, die wordt gebruikt om een preview van het blok te maken in het Inspector Help Panel (lees hier meer).

Schaduwen in Global Styles

Met WordPress 6.2 is het nu mogelijk om aan sommige blokken schaduwen toe te voegen en aan te passen met behulp van Global Styles of theme.json (vanaf dit schrijven is de schaduwfeature alleen beschikbaar voor het Button blok).

Ten eerste kun je in thema’s die deze feature ondersteunen schaduwen toevoegen vanuit de Global Styles interface.

Om het in actie te zien, activeer je het thema Twenty Twenty-Three, navigeer je naar Styles > Blocks > Button, en klik je op de Shadow knop.

Een schaduwpopup laat je een schaduw kiezen uit de thema-presets.

Themadevelopers en geavanceerde gebruikers kunnen ook een schaduw toevoegen aan blokken met behulp van theme.json. De volgende definitie voegt een 4px zwarte schaduw toe aan Button blokken:

"styles": {
    "blocks": {
        "core/button": {
            "shadow": "4px 4px #000000"
        }
    }
},

Je kunt ook presets definiëren om themagebruikers de mogelijkheid te geven er een te selecteren in de Styles interface:

"settings": {
    "shadow": {
        "presets": [
            {
                "shadow": "4px 4px #FF0000",
                "name": "Red",
                "slug": "red"
            },
            {
                "shadow": "4px 4px #00FF00",
                "name": "Green",
                "slug": "green"
            },
            {
                "shadow": "4px 4px #0000FF",
                "name": "Blue",
                "slug": "blue"
            }
        ]
    },
}

Eenmaal gedefinieerd verschijnen je voorinstellingen in het Shadow paneel in het blok Styles.

Je kunt ook de waarde van een preview kiezen en die gebruiken als standaardinstelling voor een blok:

"styles": {
    "blocks": {
        "core/button": {
            "shadow": "var(--wp--preset--shadow--blue)"
        }
    }
}

Nieuwe regeling voor Minimum Height Dimension

Vanaf WordPress 6.2 biedt het paneel Dimensions van de zijbalk met blokinstellingen voor de blokken Group en Post Content nu een nieuwe Minimum Height regeling die standaard is ingeschakeld in thema’s die de feature appearanceTools gebruiken.

Met deze nieuwe regeling kunnen gebruikers een minimale hoogte instellen voor de blokken Group en Post Content en kan de footer onderaan de pagina worden gerendered, zelfs met weinig content.

In combinatie met de nieuwe tools voor verticale uitlijning kun je hiermee ook binnenste elementen boven/midden/onder aan de pagina verticaal uitlijnen.

Developers kunnen ondersteuning voor minimale hoogte toevoegen aan thema’s door de instelling minHeight toe te voegen aan theme.json:

{
    "settings": {
        dimensions: "minHeight": true
    }
}

Je kunt ook de property appearanceTools gebruiken:

{
    "settings": {
        "appearanceTools": true
    }
}

De nieuwe property minHeight kan ook worden gebruikt om een specifieke waarde rechtstreeks in theme.json in te stellen:

{
    "styles": {
        "blocks": {
            "core/post-content": {
                "dimensions": {
                    "minHeight": "80vh"
                }
            }
        }
    }
}

Blokdevelopers  kunnen de property supports.dimensions.minHeight toevoegen aan hun block.json bestand en de waarde ervan instellen op true. Voor statische blokken zal de CSS min-height regel worden opgeslagen als een inline stijl, terwijl deze voor dynamische blokken zal worden opgenomen in het stijlattribuut dat door get_block_wrapper_attributes wordt geretourneerd.

Aangepaste CSS in het Styles paneel

Een van de features die in de Site Editor ontbraken ten opzichte van de Theme Customizer was de mogelijkheid om aangepaste CSS stijlen toe te voegen. WordPress 6.2 vult dit gat en nu bevat de Global Styles interface een tekstveld om aangepaste CSS regels toe te voegen die niet worden overschreven als je je thema bijwerkt.

Je kunt aangepaste stijlen toevoegen per blok, vanuit het blok Style style paneel, of door te klikken op de knop More Styles actions in de toolbar Styles. Dit toont een popupmenu met een Additional CSS element.

Om aangepaste CSS te ondersteunen is een nieuwe property styles.css toegevoegd aan theme.json.

Aangepaste CSS regels kunnen alle in theme.json ingestelde aangepaste stijlen volledig overschrijven. Als je niet wilt dat dit gebeurt, kun je overwegen het stylesheet op te nemen met behulp van de bestaande enqueuing methoden.

Je kunt ook per blok aangepaste CSS toevoegen in theme.json met behulp van de property styles.blocks.block.css:

"styles": {
    "blocks": {
        "core/button": {
            "css": "background: #FF0000"
        }
    }
}

Je kunt ook & gebruiken voor geneste elementen en pseudo-selectors.

Voor een nadere blik op de nieuwe feature aangepaste CSS, zie ook Aangepaste CSS voor global styles en per blok.

Stijlen kopiëren en plakken tussen blokken

Een nieuwe groep in het menu Options van de werkbalk van het blok toont nu twee knoppen om Copy styles en Paste styles. Vóór deze toevoeging was het alleen mogelijk om stijlen te kopiëren, maar was het niet duidelijk hoe je stijlen kon plakken.

Om deze nieuwe feature uit te proberen, voeg je een nieuw blok toe, zoals een Header. Verander de stijl en kies Copy styles in het blok Options menu.

Selecteer dan een ander blok en kies Paste style. De gekopieerde stijlen worden automatisch toegepast op het tweede blok.

Merk op dat deze feature alleen beschikbaar is op beveiligde (https) sites in ondersteunende browsers. Zie voor aanvullende details het pull request.

Blokwijzigingen globaal toepassen

WordPress 6.2 introduceert ook een knop Apply globally onder het paneel Advanced voor individuele blokken, waarmee je je wijzigingen in de stijl van het blok naar Global Styles kunt pushen en die wijzigingen op de hele website kunt toepassen.

Dankzij deze nieuwe feature is het toepassen van bloktypografie, spatiëring, afmetingen en kleurstijlen op alle blokken van dat type nu een kwestie van het indrukken van een knop (zie ook dit pull request).

Verbeterde ontwerpervaring met Spacing Visualizers

Met Spacing Visualizers kun je een voorbeeld bekijken van de hoeveelheid marge of opvulling die op een blok wordt toegepast. Met WordPress 6.2 is deze feature uitgebreid met een paar toevoegingen die de bewerkingservaring verbeteren.

Ten eerste verschijnen de Spacing Visualizers nu zodra je met je muis over de marge of padding controle gaat.

Ten tweede verbergt de Spacing Visualizer nu automatisch de blokwerkbalk zodra je de muisaanwijzer op de spacing instelling zet, zodat je de nieuwe marge- en opvulinstellingen kunt bekijken zonder de rommel van de blokwerkbalk.

Dit zijn kleine maar belangrijke veranderingen die een flink aantal coreblokken beïnvloeden.

Veranderingen voor developers

WordPress 6.2 brengt ook veel nieuwe mogelijkheden voor developers: nieuwe API’s, bugfixes, prestatieverbeteringen en nog veel meer. Laten we de meest in het oog springende toevoegingen beter bekijken.

Een nieuwe HTML API

WordPress 6.2 introduceert de HTML Tag Processor, een HTML5-spec-compliant parser die een veilige manier biedt om specifieke HTML tags te vinden en attributen toe te voegen, te verwijderen of bij te werken via PHP. De HTML Tag Processor is het eerste onderdeel van een nieuwe HTML verwerkings-API.

De nieuwe API maakt het gemakkelijk om voorheen complexe taken uit te voeren waarvoor vaak reguliere expressions nodig waren.

In het volgende voorbeeld voegen we eenvoudig het alt attribuut toe aan een img tag:

$html = '<img src="/my-image.jpg" />';

$p = new WP_HTML_Tag_Processor( $html );
 
if ( $p->next_tag() ) {
    $p->set_attribute( 'alt', 'Hello WordPress 6.2' );
}
 
echo $p->get_updated_html();

Deze code zou de volgende img tag opleveren:

<img alt="Hello WordPress 6.2" src="/my-image.jpg">

De methode $p->next_tag() gaat naar de volgende beschikbare tag in de HTML. Het accepteert ook een tagnaam, een CSS class, of beide om specifieke tags te vinden, zoals in het voorbeeld hierboven.

Om HTML tags te bewerken, moet je eerst de doeltag selecteren:

$p->next_tag();

Zodra je de doeltag hebt geselecteerd, kun je de API methoden gebruiken om verschillende bewerkingen uit te voeren:

• $p->get_tag()
• $p->set_attribute()
• $p->get_attribute()
• $p->remove_attribute()
• $p->add_class()
• $p->remove_class()

Je kunt een stijlattribuut instellen:

$html = '<a href="https://example.com">example.com</a>';

$p = new WP_HTML_Tag_Processor( $html );

if ( $p->next_tag( 'a' ) ) {
    $p->set_attribute( 'style', 'text-decoration: wavy underline purple;' );
}

echo $p->get_updated_html();

Je kunt ook een class of een attribuut toevoegen of verwijderen. In de volgende code voegen we een aangepaste class toe aan een h1 tag:

$html = '<div><h1>Page Title</h1></div>';

$p = new WP_HTML_Tag_Processor( $html );

if( $p->next_tag( 'h1' ) ) {
    $p->add_class( 'title' );
}

echo $p->get_updated_html();

Je kunt dan de bijgewerkte tag echoën of retourneren met de methode $p->get_updated_html().

Bekijk voor een nadere blik op de nieuwe HTML API deze interactieve PHP tutorial van Adam Zieliński, WordPress Core committer.

Patterns API en een nieuwe template_types property

Met de Patterns API kunnen WordPress developers “vooraf ontworpen contentblokken maken die gemakkelijk kunnen worden ingevoegd in berichten, pagina’s, aangepaste posttypes en templates”.

Met WordPress 6.2 bevat de Patterns API nu een nieuwe property template_types waarmee je kunt aangeven in welke templates een bepaald blokpatroon kan worden gebruikt.

Jorge Costa benadrukt dat dit een backend-only update is en dat er momenteel geen bijbehorende UX functionaliteit is. We kunnen echter verwachten dat we met WordPress 6.3 geëvolueerde implementaties van deze feature zullen zien:

Het eerste gebruik, in gedachten voor WordPress 6.3, is om de gebruiker enkele patronen te tonen die zinvol zijn op een template wanneer de gebruiker begint met het maken van een template. Gebruikers kunnen dan uitgaan van een patroon in plaats van “blanco” of het fallback template.

Aan de technische kant is de functie register_block_pattern() gewijzigd om een nieuwe template_types parameter op te nemen, die een array is van strings die de namen bevatten van de templates waarvoor het blokpatroon bedoeld is.

De REST API is ook aangepast om de templatetypes van een blokpatroon terug te geven als er tenminste één is gedefinieerd.

React v18.0 en Concurrency modus

WordPress 6.2 levert ook een nieuwe versie van de React bibliotheek, nu bijgewerkt tot versie 18.0. De nieuwe versie komt met nieuwe API’s, features, verbeteringen en bugfixes. Een van de belangrijkste features die met React v18.0 komen is de introductie van de Concurrency modus, “een nieuw mechanisme achter de schermen waarmee React meerdere versies van je UI tegelijk kan voorbereiden”.

Een van de belangrijkste kenmerken van de Concurrent modus in React is dat hij onderbreekbaar is:

React garandeert dat de UI consistent zal verschijnen, zelfs als een render wordt onderbroken. Daartoe wacht het met het uitvoeren van DOM mutaties tot het einde, zodra de hele tree is geëvalueerd. Met deze mogelijkheid kan React nieuwe schermen op de achtergrond voorbereiden zonder de main thread te blokkeren. Dit betekent dat de UI onmiddellijk kan reageren op gebruikersinvoer, zelfs als hij midden in een grote renderingstaak zit, waardoor een vloeiende gebruikerservaring ontstaat.

Het belangrijkste voordeel is dat de UI onmiddellijk reageert op gebruikersinvoer, in overeenstemming met de taak die nog op de achtergrond draait.

Concurrency introduceert echter ook potentiële valkuilen waar developers zich bewust van moeten zijn. Bekijk voor een meer diepgaand overzicht van Concurrent modus in React in WordPress 6.2 de voorbeelden in de dev note.

Aanvullende wijzigingen voor developers

Andere opvallende veranderingen waar developers rekening mee moeten houden zijn onder andere de volgende:

• WordPress 6.2 introduceert een nieuw JavaScript filter dat kan worden gebruikt om blokinstellingen te filteren voordat de editor op het scherm wordt weergegeven. Met het nieuwe blockEditor.useSetting.before filter kunnen developers ook instellingen wijzigen op basis van de locatie van het blok, de huidige gebruikersrol, naburige blokken en meer. Zie aanpassingen aan Settings voor elk blok in WordPress 6.2 voor aanvullende informatie en gebruiksvoorbeelden.
• Er is een nieuwe skipBlockSupportAttributes prop geïntroduceerd om attributen en stijlen uit te sluiten die te maken hebben met ondersteuning van blokken in de component ServerSideRender.
• Een nieuwe theme.json API maakt het nu mogelijk om bestaande coreblokvarianten te stylen vanuit theme.json.
• Google Fonts worden nu lokaal opgenomen en niet opgehaald van Google adressen in gebundelde thema’s van Twenty Twelve tot Twenty Seventeen.

Maar dat is nog niet alles. WordPress 6.2 introduceert veel features, verbeteringen en bugfixes die we hier kortheidshalve niet hebben genoemd. Kijk voor een uitgebreider overzicht in de WordPress 6.2 field guide.

Samenvatting

WordPress 6.2 brengt ons dichter bij het einde van fase 2 van het Gutenberg project, genaamd Customization. Maar, zoals Matias Ventura opmerkt, betekent dit niet dat het werk aan Customization voltooid is en in toekomstige versies wordt uitgevoerd. Zoals altijd kunnen we extra verbeteringen aan de editor verwachten op basis van feedback van de community.

In dit artikel verkenden we enkele van de belangrijkste features, verbeteringen en bugfixes die met WordPress 6.2 komen. Maar er is nog veel meer in 6.2. Met tien versies van de Gutenberg plugin in de core- van 14.2 tot 15.1 – gaan we een nieuwe Browse modus zien, een Tabbed Block Inspector, Widgets naar Block Themes migratie, nieuwe API’s, en vele verbeteringen en bugfixes. En er komen ook verbeteringen aan de toegankelijkheid en internationalisering.

En als je van WordPress houdt en nieuwe WordPress ontwikkelingsvaardigheden wilt opdoen of bijdragen aan het CMS wilt testen en leveren, maak dan zeker een proefrit met DevKinsta, Kinsta’s volledig gratis lokale WordPress ontwikkelingssuite.

Nu over naar jou: Heb je de nieuwe versie al getest in je ontwikkelomgeving? Welke features bevallen je het meest in WordPress 6.2? Deel je gedachten in de commentsectie hieronder.