WordPress 6.1 “Misha” is uitgebracht op 1 november 2022. De derde grote release van het jaar is de opvolger van WordPress 6.0 Arturo, uitgebracht op 24 mei, en WordPress 5.9 Josephine, uitgebracht op 25 januari.
Zoals altijd brengen nieuwe WordPress releases nieuwe features, verbeteringen en bugfixes van de nieuwste versies van de Gutenberg plugin in de core. En WordPress 6.1 zal geen uitzondering zijn, want er zijn 11 versies van de Gutenberg plugin in de core samengevoegd, van 13.1 tot 14.1.
In dit artikel nemen we een kijkje achter de schermen en introduceren we de nieuwe spannende features die komen met de nieuwe grote release van WordPress.
Matias Ventura gaf ons enkele inzichten in de Roadmap naar 6.1, waarin hij zei dat het doel van 6.1 is om de ervaringen die met 5.9 en 6.0 zijn geïntroduceerd te verfijnen en een aantal zaken te repareren nu we fase 3 van de Gutenberg roadmap naderen.
1. Verbeteringen aan de Template Editor: Een van de belangrijkste nieuwe features is de Template Editor. WordPress 6.1 moet de mogelijkheid introduceren om door de structuur van de site te bladeren, deze te visualiseren en te bewerken.
2. Templatepatronen: Het doel is om blokpatronen een centrale rol te geven bij het maken van templates en pagina’s, ze aan te passen aan aangepaste berichttypes en bloktypes, de vergrendelingsfunctionaliteit te verbeteren, het beheer van opgeslagen patronen te verbeteren, enz.
3. Globale stijlen en blokken en ontwerptools: WordPress 6.1 zal het beheren van webfonts mogelijk maken, responsieve typografie implementeren, en de toolset die beschikbaar is voor blokken uitbreiden.
Dat gezegd hebbende, tijd om wat dieper in te gaan op de krachtigste features van deze nieuwe WordPress 6.1.
Fluid Typography en Fluid Spacing
WordPress 6.1 voegt ondersteuning toe voor Fluid Typography via calc/clamp CSS functies.
De uitdrukking Fluid Typography beschrijft het vermogen van tekst om zich aan te passen aan de breedte van de viewport, waarbij soepel wordt geschaald van een minimale naar een maximale breedte.
Het is iets anders dan wat je kunt bereiken met mediaqueries, want met mediaqueries kunnen thema’s de grootte van de tekst aanpassen aan specifieke viewportafmetingen, maar niets doen tussen verschillende waarden.
Sommige thema’s ondersteunen al fluid typography. Twenty Twenty-Two gebruikt bijvoorbeeld de CSS clamp() functie voor verschillende lettergroottes. Bijvoorbeeld:
"settings": {
...
"custom": {
"spacing": {
"small": "max(1.25rem, 5vw)",
"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
"large": "clamp(4rem, 10vw, 8rem)",
"outer": "var(--wp--custom--spacing--small, 1.25rem)"
},
"typography": {
"font-size": {
"huge": "clamp(2.25rem, 4vw, 2.75rem)",
"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
}
}
}
}Zoals je in bovenstaande code kunt zien, worden voor elke lettergrootte fluïde waarden voor de fontgrootte gebruikt.
Nu, vanaf WordPress 6.1, kunnen thema’s automatisch fluïde lettergroottes genereren door de nieuwe eigenschap typography.fluid als volgt te declareren:
"settings": {
....
"typography": {
"fluid": true,
"fontSizes": [
{
"size": "2rem",
"fluid": {
"min": "2rem",
"max": "2.5rem"
},
"slug": "medium",
"name": "Medium"
}
]
}Met behulp van typography.fluid en typography.fontSizes[].fluid wordt de waarde van elke fontgrootte automatisch berekend met de volgende formule:
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});Bijvoorbeeld:
--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});Let op dat op het moment van dit schrijven fluid typography een experimentele feature is. Je kunt in de technische details duiken in Block supports: add fluid typography.
Fluid typography is a significant improvement for building modern #WordPress websites. We just updated @frostwp to include this feature. Here’s a great read from @richard_tabor into what it is and why it matters. https://t.co/Bq5YuHX3wi
— Brian Gardner (@bgardner) August 8, 2022
Zie ook Zo voeg je fluid typography toe aan WordPress blokthema’s door Rich Tabor en Fluid typography met Gutenberg door Carolina Nymark.
Vergelijkbaar met Fluid Typography introduceert WordPress 6.1 ook ondersteuning voor Fluid Spacing.
Vóór WordPress 6.1 was het alleen mogelijk om aangepaste spacingswaarden in te stellen in de editor, en mochten thema-auteurs geen vaste waarden opgeven voor padding, margin en gap. Het was dus niet mogelijk om spacingsinstellingen over te zetten van het ene thema naar het andere of om spacingswaarden te behouden bij het kopiëren en plakken van content tussen verschillende websites.
Nu kunnen thema-ontwikkelaars ondersteuning voor Fluid Spacing aangeven met behulp van spacing.spacingScale en spacing.spacingSizes[] instellingen (zie ook Theme.json: Voorinstellingen voor spacinggrootte toevoegen en Thema.json uitbreiden om voorinstellingen voor spacinggrootte te bieden).
"settings": {
"spacing": {
"spacingScale":
{
"steps": 0
},
"spacingSizes": [
{
"size": "clamp(1.5rem, 5vw, 2rem)",
"slug": "30",
"name": "1"
},
{
"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
"slug": "40",
"name": "2"
},
{
"size": "clamp(2.5rem, 8vw, 6.5rem)",
"slug": "50",
"name": "3"
},
{
"size": "clamp(3.75rem, 10vw, 7rem)",
"slug": "60",
"name": "4"
},
{
"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
"slug": "70",
"name": "5"
},
{
"size": "clamp(7rem, 14vw, 11rem)",
"slug": "80",
"name": "6"
}
],
...
}
}Je vindt fluid typografie en spacingeigenschappen gedocumenteerd in Globale instellingen & stijlen voorinstellingen en in de living reference naar theme.json API V2.
Content-only blokbewerking
WordPress 6.1 introduceert content-only editing voor blokken, patronen en templates. Met content-only editing ingeschakeld, kunnen gebruikers alleen de content van een blok of patroon wijzigen, zodat ze niet per ongeluk de lay-out breken of de stijlen veranderen.
Momenteel is het niet mogelijk om alleen de content te bewerken vanuit de Visual Editor interface. Om deze feature in te schakelen moet het templateLock attribuut worden ingesteld op contentOnly en kun je daarvoor de Code editor gebruiken.
De volgende afbeelding geeft een eenvoudig voorbeeld.
Wanneer content-only editing is ingeschakeld voor een blok of patroon, verandert de instellingenzijbalk. Je ziet dan niet de gebruikelijke instellingenregelaars, maar een lijst met blokken die in de groep zijn opgenomen. Je kunt elk van die blokken selecteren door te klikken op het blok in het editor canvas of op het bijbehorende lijstitem in de zijbalk.
Je kunt content-only editing uitschakelen door op de knop Modify in de werkbalk van de groep te klikken.
Als je klaar bent met je bewerkingen, kun je content-only editing weer inschakelen door op de knop Done te klikken.
Bovendien worden blokken zonder content verborgen in de lijstweergave en kunnen ze geen focus krijgen in de blokkenlijst.
Je kunt meer lezen over content-only editing in de dev note en in deze blogpost van Rich Tabor.
Verbeterde bloktypes
Met zoveel Gutenberg versies die in de core zijn samengevoegd, gaat WordPress 6.1 veel veranderingen en verbeteringen brengen aan bestaande bloktypes.
Randondersteuning toegevoegd voor het Columns blok
Het Columns blok maakt nu gebruik van de nieuwe BorderBoxControl component waarmee WordPress gebruikers aangepaste randen voor kolommen kunnen opgeven, en ook volledig verschillende stijlen voor elke rand kunnen instellen (zie ook Column: Randondersteuning toevoegen aan column blokken pull request).
Afzonderlijke randen kunnen ook als volgt worden ingesteld in het theme.json bestand:
"core/column": {
"border": {
"top": {
"color": "#CA2315",
"style": "dashed",
"width": "6px"
},
"right": {
"color": "#FCB900",
"style": "solid",
"width": "6px"
}
}
}Developers kunnen meer lezen over het nieuwe besturingselement in Component Reference – BorderBoxControl.
Randcontroles voor Image blokken
Gutenberg 13.8 introduceerde ondersteuning voor alle randbedieningen voor het Image blok. De verandering zal met WordPress 6.1 aan de core worden toegevoegd en opent de deur voor nieuwe en geweldige mogelijkheden voor webcreatievelingen.
Verbeteringen aan het Comment blok
WordPress 6.1 brengt ons ook een verbeterd Comment blok. Vanaf de volgende versie van WordPress kunnen gebruikers meer geavanceerde bewerkingsfeatures op het Comments blok gebruiken.
In de afbeelding hieronder zie je de zijbalk met instellingen voor het Comment blok en de veranderingen die op de Comments Title zijn toegepast.
Post Terms blokvariaties voor aangepaste taxonomie termen
Het Post Terms blok is verbeterd met een nieuwe aangepaste taxonomie variatie. Je kunt nu een nieuwe aangepaste taxonomie registreren, bijvoorbeeld het “Actors” posttype, en je kunt een lijst met taxonomietermen toevoegen aan de huidige post of aangepaste posttype.
De afbeelding hieronder toont een lijst van acteurs in een Movie post type.
Een nieuw Parents filter voor het Query blok
Er is nu een nieuw Parents filter beschikbaar voor het Query Block om hiërarchische berichten en pagina’s weer te geven die dezelfde parent hebben.
Controle over Font Family in het Heading blok
Het Heading blok ondersteunt nu Font Family controls.
Horizontale en verticale spatiëring in Gallery blok
Vanaf WordPress 6.1 kun je met een nieuwe regelaar voor afstand verschillende horizontale en verticale tussenruimten instellen voor afbeeldingen in het Gallery blok.
Deze verandering resulteert in meer flexibiliteit bij het maken van de layout van afbeeldingsgalerijen.
Uitgelichte afbeeldingen in Cover blok
Uitgelichte afbeeldingen krijgen nog steeds veel aandacht, en in WordPress 6.1 is de reikwijdte van hun gebruik verder uitgebreid. Vanaf 6.1 kan de uitgelichte afbeelding rechtstreeks worden geselecteerd in de placeolder van het Cover blok, zoals in de volgende afbeeldingen.
Deze verandering moet bijdragen aan een meer consistente gebruikerservaring, waardoor het voor de gebruiker duidelijker wordt wat ze aanpassen.
Ook is een Uitgelichte afbeelding toggle toegevoegd aan de media replace flow.
Appearance tools voor navigatielinks in berichten
Met de instellingseigenschap appearanceTools kun je kiezen voor verschillende instellingen die standaard uitgeschakeld zijn.
Sinds WordPress 6.1, voor thema’s die de instellingseigenschap appearanceTools ondersteunen, kun je linkkleur en fontfamilie in Post Navigation Link aanpassen.
Je kunt meer lezen over de eigenschap appearanceTools in onze inleiding tot het Twenty Twenty-Two thema.
Vergrendelen binnen Container blok met één klik
Een nieuwe toggle stelt gebruikers nu in staat om blokken in een container van blokken met een enkele klik te vergrendelen. Dit geldt voor Group, Cover, en Column blokken.
Verbeterde List blok
De List blok is verbeterd en maakt nu gebruik van inner blokken.
Deze verandering maakt het sorteren en inspringen van lijstitems gemakkelijker en leidt zeker tot een verbeterde gebruikerservaring.
Ondersteuning voor pseudo-elementen in blokthema’s
Nu kunnen blokthema’s het uiterlijk van elementen en blokken aanpassen aan hun state (active/focus/hover).
Dit is een voorbeeld van het gebruik van pseudo-selectors met links, zoals gedefinieerd in Twenty Twenty-Three’s theme.json:
"styles": {
...
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--contrast)"
},
":hover": {
"typography": {
"textDecoration": "none"
}
},
":focus": {
"typography": {
"textDecoration": "underline dashed"
}
},
":active": {
"color": {
"text": "var(--wp--preset--color--secondary)"
},
"typography": {
"textDecoration": "none"
}
},
"typography": {
"textDecoration": "underline"
}
}
}
}De volgende code met button styles:
"styles": {
...
"elements": {
"button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--contrast)"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
}
}
}
}
}Je kunt het resultaat zien in de volgende afbeeldingen.
Maar je kunt elementen ook op blokniveau stylen. Het enige verschil is dat je stijlen moet definiëren binnen een blok. Als voorbeeld past de volgende code uit Twenty Twenty-Three’s theme.json stijlen toe op links in het core Navigation blok:
"styles": {
"blocks": {
"core/navigation": {
"elements": {
"link": {
":hover": {
"typography": {
"textDecoration": "underline"
}
},
":focus": {
"typography": {
"textDecoration": "underline dashed"
}
},
":active": {
"typography": {
"textDecoration": "none"
}
},
"typography": {
"textDecoration": "none"
}
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
}
}
}Extra features en verbeteringen aan de Block Editor
Hoewel het een consolidatieversie is, brengt WordPress 6.1 zoveel veranderingen en verbeteringen dat het onmogelijk zou zijn om ze allemaal in één artikel op te sommen (maar bekijk dit artikel van Anne McCarty voor een uitgebreide lijst van ontwerptools per blok).
We kijken hier in meer detail naar de volgende veranderingen:
Templatedeelvariaties in de Block Inserter
Templatedeelvariaties zijn nu beschikbaar in de Block Inserter, waardoor het gemakkelijker wordt om templatedelen aan je website toe te voegen.
Deze verandering maakt het bewerkingsproces eenvoudiger en sneller, zodat gebruikers met een paar klikken snel variaties van een templatedeel in één keer kunnen bekijken.
Marge en opvulling zichtbaar maken
Een kleine maar nuttige verbetering is de markering van de marges en opvulling terwijl de gebruiker ze aanpast. Dit moet het veel duidelijker maken hoeveel ruimte er binnen of buiten de elementen wordt toegevoegd.
Verbeteringen aan de Settings zijbalk
WordPress 6.1 zal ook verschillende interfaceverbeteringen aan de Settings zijbalk laten zien.
De zijbalk voor artikelinstellingen is lichtjes heringericht. Nu zijn de velden voor artikelformat, slug, template en auteurs uitgelijnd en hebben ze dezelfde breedte. Bovendien is de artikelplanner vereenvoudigd om de ervaring begrijpelijker te maken. De templatesectie is ook verplaatst naar een pop-over om ruimte te besparen en de interface op te schonen.
Bovendien is het templatepaneel vervangen door een templatelink. Als erop geklikt wordt, toont de templatelink Default template in een pop-over.
Designupdates aan de publicatie pop-over
De datum en tijdkiezer in de publicatie popover is opnieuw ontworpen en gebruikt nu “existing WordPress components en Emotion styling”
Meer technische inzichten zijn beschikbaar in designupdates van de publicatiepop-over (DateTimePicker).
Verwachte leestijd in het informatiepaneel
Het Informatiepaneel in de bovenste werkbalk is verbeterd en toont nu Time to read naast Words, Characters, Headings, Paragraphs en Blocks.
De geschatte leestijd is berekend op een gemiddelde van 189 woorden per minuut. Lees meer in @wordpress/editor: Voeg geschatte leestijd toe aan inhoudsopgave in editor.
Block Spacing Control toegevoegd aan Styles UI
Gebruikers kunnen nu de verticale en horizontale spacing aanpassen vanuit de Styles UI voor blokken die deze feature ondersteunen.
Nieuwe en verbeterde bouwtools
WordPress 6.1 zal ook de functionaliteit van de sitebuilder uitbreiden. Blokpatronen zullen op meer plaatsen beschikbaar zijn en een ruimere keuze aan templatetypes zal de bewerkingservaring in de Template Editor verbeteren.
Creation Patterns voor berichttypes
WordPress 6.0 introduceerde Page Creation Patterns, die een manier zijn om een selectie van patronen aan te bieden telkens als een gebruiker een nieuwe pagina maakt. Op deze manier hoef je de pagina niet helemaal opnieuw te bouwen, maar kun je een patroon uit een modal kiezen en de content invullen, en je bent klaar.
Om deze feature in te schakelen, moet minstens één blokpatroon ondersteuning voor de core/post-content bloktypes aangeven.
Vanaf WordPress 6.1 breidt deze feature zich uit tot alle berichttypes. Het enige wat je hoeft te doen is core/post-content op te nemen in je patroon’s blockTypes en de relevante postTypes in te stellen
Laten we nu met een praktisch voorbeeld nagaan hoe je van deze nieuwe feature gebruik kunt maken. Neem aan dat je een Movie berichttype hebt.
Eerst moet je een blokpatroon registreren zoals hier besproken.
Of je kunt de makkelijke weg kiezen en de impliciete patroonregistratie gebruiken (om het in dit voorbeeld eenvoudig te houden, gebruiken we impliciete patroonregistratie).
Maak een PHP bestand voor je blokpatroon in een /patterns directory in de map van je thema (voor dit voorbeeld gebruikten we Twenty Twenty-Two). Voeg dan de volgende kop toe:
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Post Types: movie
* Categories: text
*/
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- /wp:heading -->En dat is het. Telkens als je nu een nieuw Movie berichttype maakt, verschijnt er een Choose a pattern modal op het scherm.
Wil je dat de modal op meerdere posttypes verschijnt, voeg dan de overeenkomstige slugs toe, gescheiden door komma’s:
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Post Types: movie, book
* Categories: text
*/
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- /wp:heading -->Voor een beter overzicht van deze patronen, zie mogelijkheid om creatiepatronen te gebruiken voor andere berichttypes dan pagina.
Meer templatetypen in de Site Editor
Met WordPress 6.0 kan slechts een beperkt aantal templates in de Site Editor gemaakt worden:
Vanaf WordPress 6.1 is het mogelijk om voor elk afzonderlijk berichttype een andere template te maken.
En je kunt ook templates toevoegen en bewerken voor core- en aangepaste taxonomieën, zelfs voor afzonderlijke categorieën of tags.
Als je aangepaste berichttypes of een aangepaste taxonomie registreert, worden ze automatisch vermeld in het templateselectievak van de Site Editor.
Maar dat niet alleen. Als je het template berichttype hebt gekozen, vraagt een modal de gebruiker of hij een template wil maken voor alle berichten van dat type of dat hij een nieuw template wil maken voor een specifieke post van het gekozen posttype.
Vervolgens geeft een nieuwe modal een lijst van de berichten die beschikbaar zijn voor dat posttype.
Twenty Twenty-Three en andere themaverbeteringen
WordPress 6.1 levert ook een gloednieuw standaardthema: Twenty Twenty-Three. Het is een minimalistisch thema zonder afbeeldingen of extra functionaliteit.
Het nieuwe standaardthema verzamelt alle nieuwste sitebewerkingsfeatures op één plek en is een perfecte zandbak voor het testen van templates en templatedelen, stijlvariaties, flexibele typografie en spatiëring, en alle features die met de nieuwste versies van WordPress zijn geïntroduceerd.
En daardoor is het ook een geweldig tool om thema’s, templates en blokpatronen te leren ontwikkelen met werkende voorbeelden.
Je kunt dieper in het nieuwe WordPress standaardthema duiken in ons diepgaande overzicht.
Behalve het nieuwe standaardthema introduceert WordPress 6.1 ook verschillende themaverbeteringen.
Update URI Header in thema’s
Vóór WordPress 6.1 werd, als een thema dezelfde naam had als een thema dat beschikbaar was in de WordPress themamap, een beschikbare updateboodschap getoond aan de gebruiker.
Met WordPress 6.1 voorkomt een nieuwe Update URI header dat externe themabestanden per ongeluk worden overschreven. Deze feature is vooral handig als je een zelf ontwikkeld thema hebt met dezelfde naam als een thema in de WordPress Theme Directory, maar het niet wilt delen met de community.
Nu, als de waarde van Update URI thema header veld niet overeenkomt met https://wordpress.org/themes/{$slug}/ of w.org/theme/{$slug}, zal WordPress niet proberen het bij te werken.
Indien ingesteld moet Update URI een URI zijn met een unieke hostnaam, zoals https://wordpress.org/themes/my-theme/ of https://example.com/my-theme/.
Thema ontwikkelaars vinden een uitgebreider overzicht van de nieuwe Update URI thema header in de officiële dev note.
Themafilter onder “Add Themes” scherm
Met een nieuwe snelkoppeling kun je nu blokthema’s filteren bij het toevoegen van een nieuw thema aan je WordPress installatie.
Ook is aan hetzelfde scherm een nieuw Help tabblad voor blokthema’s toegevoegd.
Veranderingen voor developers
WordPress 6.1 voegt ook een nieuwe API en veel features en veranderingen voor developers toe.
Nieuwe preferences persistence API
WordPress 6.1 introduceert een gloednieuwe preferences persistence API die editorvoorkeuren opslaat in de WordPress database in plaats van lokale opslag.
Op deze manier kunnen gebruikersvoorkeuren over alle browsers en apparaten bewaard worden.
Daartoe is het vorige persistentiesysteem in de @wordpress/data package afgeschreven, en is een nieuwe preferences-persistence package geïntroduceerd. Het nieuwe pakket slaat gegevens op in gebruikersmeta via de Rest API. De gegevens worden ook opgeslagen in de lokale opslag als fallback voor het geval de gebruiker offline gaat of een verzoek wordt onderbroken (zie ook pull #39795).
Ondersteuning voor Button Styles in theme.json
Met WordPress 6.1 kun je aan je thema’s knoppenstijlen toevoegen met theme.json. Dit stelt thema developers in staat om consistentie toe te voegen aan knoppen tussen de verschillende blokken. Een voorbeeld is het Search blok, maar ook externe blokken zullen van deze verandering profiteren.
Om dit mogelijk te maken wordt een nieuwe wp-element-button klasse toegevoegd aan knopelementen om dezelfde stijl te delen.
Je kunt deze verandering testen door in een ontwikkelomgeving de volgende code aan je theme.json toe te voegen:
{
"styles": {
"elements": {
"button": {
"color": {
"background": "blue"
}
}
}
}
}Search blokvariaties ondersteunen nu query vars
WordPress 6.1 zal Search blokvariaties op basis van query vars ondersteunen. Dit betekent dat je je gebruikers nu zoekvakken kunt geven die ze kunnen gebruiken om gedetailleerd naar elk type content te zoeken.
In het volgende voorbeeld registreren we een blokvariatie voor een movies berichttype. Het voorbeeld is gebaseerd op Carolina Nymar’s tutorial over Blokvariaties.
Voeg in het functiesbestand van je (child)thema de volgende code toe:
function movies_editor_assets() {
wp_enqueue_script(
'movies-block-variations',
get_template_directory_uri() . '/assets/block-variations.js',
array( 'wp-blocks' )
);
}
add_action( 'enqueue_block_editor_assets', 'movies_editor_assets' );Maak nu het volgende block-variations.js bestand in de map assets van je (child)thema:
wp.blocks.registerBlockVariation(
'core/search',
{
name: 'movie-search',
title: 'Movie Search Block',
attributes: {
query: {
post_type: 'movies'
}
}
}
);Herlaad nu je WordPress dashboard en zoek naar een Movie Search Block variatie in de block inserter.
Je kunt meer lezen over blokvariaties in de officiële documentatie.
Een nieuw Buttons element in Global Styles
WordPress 5.9 introduceerde een Global Styles interface waarmee gebruikers voorinstellingen voor stijlen voor hun websites kunnen aanpassen, globaal of op blokniveau.
Met de eerste implementatie kon je de kleuren voor Background, Text, en Links aanpassen. Vanaf WordPress 6.1 is een nieuw Buttons element toegevoegd aan het Colors paneel, waarmee gebruikers het uiterlijk van knoppen over hun hele website kunnen regelen.
Dit zou invloed hebben op de stijl van knoppen in alles over de hele site, van het Buttons blok tot het Search blok en externe blokken die gebruik maken van knoppen.
Appearance Tools beschikbaar voor elk Thema
Vóór WordPress 6.1 waren Appearance Tools alleen beschikbaar in blokthema’s. Met 6.1 kan elk thema deze feature opnemen door simpelweg ondersteuning toe te voegen in hun functies bestand:
add_theme_support( 'appearance-tools' );Dit zou alle volgende instellingen tegelijk mogelijk maken:
- rand: kleur, straal, stijl, breedte
- kleur: link
- spatiëring: blockGap, marge, opvulling
- typografie: regelHoogte
Nieuwe is_login_screen() functie
Met een nieuwe is_login_screen() functie kun je nu bepalen of de huidige pagina het inlogscherm is. Aangepaste inloglocaties worden ook ondersteund.
Je kunt de nieuwe voorwaardelijke tag als volgt gebruiken:
function add_text_to_login() {
if ( is_login_screen() ) {
echo( "<h1>Welcome to Kinsta!</h1>" );
}
}
add_action( 'init', 'add_text_to_login' );Het resultaat op het scherm zou het volgende zijn:
Nieuwe Site Health check voor Persistent Object Cache en Full Page Cache
WordPress 6.1 introduceert twee Site Health checks voor Persistent Object Cache en Page Cache. Beide controles draaien alleen op productieomgevingen.
Je kunt de resultaten van deze nieuwe tests bekijken op het tabblad Status van het scherm Site Health.
De Persistent Object Cache test bepaalt of de site een persistente object cache gebruikt en, zo niet, beveelt het gebruik ervan aan als het zinvol is voor de site.
Naast de nieuwe test introduceert WordPress 6.1 verschillende nieuwe filters die hostingproviders in hun respectievelijke omgevingen kunnen gebruiken.
Met site_status_persistent_object_cache_url kunnen hosts de standaard Learn more link voor persistent object cache vervangen door een aangepaste link. Bijvoorbeeld:
add_filter( 'site_status_persistent_object_cache_url', function() {
return 'https://example.com/persistent-object-cache';
} );Met site_status_persistent_object_cache_notes kunnen hosts de standaardnotities vervangen om hun voorkeursoplossing voor objectcaching aan te bevelen. Hier is een voorbeeld van gebruik:
add_filter( 'site_status_persistent_object_cache_notes', function( $notes ) {
$notes = __( 'Custom notes.', 'text-domain' );
return $notes;
} );site_status_persistent_object_cache_thresholds filtert de thresholds die worden gebruikt om te bepalen of het gebruik van een persistente objectcache moet worden voorgesteld. Standaardwaarden zijn:
$thresholds = apply_filters(
'site_status_persistent_object_cache_thresholds',
array(
'alloptions_count' => 500,
'alloptions_bytes' => 100000,
'comments_count' => 1000,
'options_count' => 1000,
'posts_count' => 1000,
'terms_count' => 1000,
'users_count' => 1000,
)
);Je kunt het filter als volgt gebruiken:
add_filter( 'site_status_persistent_object_cache_thresholds', function( $thresholds ) {
$thresholds = array(
'alloptions_count' => 700,
'alloptions_bytes' => 150000,
'comments_count' => 1500,
'options_count' => 1500,
'posts_count' => 2000,
'terms_count' => 1000,
'users_count' => 2000,
);
return $thresholds;
} );site_status_should_suggest_persistent_object_cache is een short-circuit dat filtert of je het gebruik van een persistente objectcache moet voorstellen en standaard thresholdcontroles moet omzeilen. Je kunt het als volgt gebruiken:
add_filter( 'site_status_should_suggest_persistent_object_cache', '__return_true' );De Full Page Cache test controleert of de site full page cache gebruikt en of de responstijd OK is:
Met twee nieuwe filters kunnen hosts ook de reactiethreshold aanpassen en aangepaste cacheheaders toevoegen die gedetecteerd moeten worden.
De site_status_good_response_time_threshold filtert de threshold waaronder een reactietijd als goed wordt beschouwd. De standaardwaarde is 600 ms (zie ook Trage serverresponstijden beïnvloeden de prestaties).
site_status_page_cache_supported_cache_headers stelt hostingproviders in staat om aangepaste cacheheaders en de bijbehorende verificatiecallbacks toe te voegen. De dev note geeft het volgende gebruiksvoorbeeld:
add_filter( 'site_status_page_cache_supported_cache_headers', function( $cache_headers ) {
// Add new header to the existing list.
$cache_headers['cf-cache-status'] = static function ( $header_value ) {
return false !== strpos( strtolower( $header_value ), 'hit' );
};
return $cache_headers;
});Developers kunnen dieper in de nieuwe Site Health checks graven in:
- Proposal: Persistent Object Cache and Full Page Cache Site Health Checks
- New cache Site Health checks in WordPress 6.1
- Port Audit Full Page Cache from performance plugin to core
- class-wp-site-health.php
Create-block Scaffolding tool updates
WordPress 6.1 introduceert ook nieuwe features en updates voor het pakket @wordpress/create-block dat beschikbaar is voor ontwikkelaars om nieuwe blokken te scaffolding.
Een blokscaffolding is de ondersteunende mappenstructuur waardoor WordPress een blok kan herkennen.
Een paar nieuwe features en diverse verbeteringen worden geïntroduceerd met WordPress 6.1.
Met een nieuwe –variant flag kunnen blokdevelopers een blokvariant kiezen om te scaffolden. De interne templates die de create-block tool biedt, ondersteunen de varianten dynamic en static, dat betekent dat je respectievelijk een dynamisch of statisch blok kunt scaffolden. Standaard is static.
Je kunt de nieuwe flag als volgt gebruiken:
npx @wordpress/create-block my-first-block -variant=dynamicOntwikkelaars kunnen aangepaste varianten definiëren door een variants object toe te voegen aan de templatedefinitie.
Een extra feature stelt blokontwikkelaars nu in staat om nieuwe blokken toe te voegen aan een bestaande plugin dankzij de --no-plugin flag.
npx @wordpress/create-block custom-block --no-pluginHet bovenstaande commando maakt een nieuwe set blokbestanden aan in een subdirectory van de huidige directory.
Let op dat het script zich niet bewust is van zijn locatie:
Het aanroepen van
npx @wordpress/create-block block-name --no-pluginzal een nieuw blok aanmaken binnen defolderNamedirectorywaar het wordt aangeroepen
Je kunt meer lezen over create-block scaffolding tool updates.
Query resultaten cachen in WP_Query
WordPress 6.1 verandert de manier waarop databasequery’s worden uitgevoerd in de klasse WP_Query. Vanaf 6.1 worden query’s gecacht met als gevolg dat als een query meer dan eens wordt uitgevoerd, de resultaten uit de cache worden geladen.
Zowel sites die persistente object caching gebruiken als sites die in-memory caching gebruiken zullen van deze verandering profiteren, hoewel de voordelen voor de laatste kleiner zullen zijn.
Standaard worden alle aanroepen naar WP_Query gecached, maar ontwikkelaars kunnen het cachen van queries uitschakelen met de cache_results parameter:
$args = array(
'posts_per_page' => 20,
'cache_results' => false
);
$query = new WP_Query( $args );Je kunt querycaching ook globaal uitschakelen met de disable_caching hook, hoewel dit niet wordt aanbevolen.
Het moet opgemerkt worden dat sommige queryparameters niet in aanmerking komen voor querycaching. De meest gebruikte van deze parameters is de fields parameter. De reden is dat rekening houden met fields zou hebben geleid tot meerdere caches voor verschillende subsets van dezelfde gegevens, en dus tot prestatievermindering.
Voor een dieper overzicht van WP_Query caching, zie Verbeteringen in WP_Query prestaties in 6.1 dev note.
Templatedelen in klassieke thema’s
Vanaf WordPress 6.1 ondersteunen klassieke thema’s op blokken gebaseerde templatedelen. Om deze feature toe te voegen, moeten thema’s ondersteuning voor block-template-parts toevoegen, zoals hieronder getoond:
function add_block_template_part_support() {
add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'add_block_template_part_support' );Klassieke thema’s kunnen templatedelen opnemen in PHP templates met behulp van de functie block_template_part. Je kunt meer lezen over deze feature in Block-based “template parts” in traditional themes dev note.
Een opmerking over de conversie van JPEG naar WebP afbeeldingen
Aanvankelijk leek het erop dat WordPress 6.1 ook ondersteuning zou hebben geïntroduceerd voor automatische JPEG naar WebP beeldconversie.
Veel medewerkers meldden echter verschillende problemen. In het bijzonder werd opgemerkt dat:
Resources voor het genereren van afbeeldingen bij het uploaden van een afbeelding dramatisch toenemen, echter resources om een afbeelding aan te bieden worden verlaagd. Aangezien het uploaden van afbeeldingen zeer zeldzaam is in vergelijking met het aanbieden van afbeeldingen, zou de extra inspanning om afbeeldingen te comprimeren en op te slaan de moeite waard moeten zijn.
En:
Eigenlijk is die dramatische toename van het resources gebruik bij het uploaden van een afbeelding een heel slecht neveneffect. Het betekent dat veel uploads zullen mislukken, en de gebruikers laten stranden. Het zal ook de supportaanvragen voor zowel WordPress als de hostingbedrijven dramatisch doen toenemen. Denk niet dat dit acceptabel is. Daarom lijkt de huidige aanpak, zelfs als multi-mime ondersteuning van afbeeldingen in WordPress nodig is, geen goede oplossing.
Tenslotte is na een bericht van Matt Mullenweg op WordPress.org de automatische conversie van JPEG naar WEBP uit WordPress 6.1 gehaald.
Ik ben geïnteresseerd in het ondersteunen van nieuwe formats en het verbeteren van de prestaties, maar ik denk dat deze verandering die standaard naar gebruikers wordt gepushed als ze upgraden naar 6.1 voor nu veel is, ook met sommige van de onhandige interacties die OSen nog steeds hebben rond webp (en HEIC!) bestanden.
Ik ben blij dat de ondersteuning voor het werken met webp en HEIC bestanden in core blijft, want we moeten liberaal zijn in wat we accepteren en waar we mee werken, maar niet met de verandering om alles naar webp te converteren wanneer JPEG’s worden geüpload.
Dit is uitstekend terrein voor een canonieke plugin, een concept waarvan ik denk dat elk Make team het veel meer zou moeten verkennen als een plaats om te experimenteren en functionaliteit te pushen…
Hoe dan ook, WordPress gebruikers en ontwikkelaars kunnen automatische JPEG naar WebP beeldconversie testen door de Performance Lab plugin van de WordPress Performance Group te installeren.
Extra veranderingen voor developers
Naast de features en verbeteringen die we hierboven hebben besproken, introduceert WordPress 6.1 verschillende extra wijzigingen voor ontwikkelaars. Misschien wil je dieper ingaan op deze veranderingen in de dev notes:
- Improved PHP performance for core blocks registration
- Navigation Block Fallback Behavior in WP 6.1
- Spacing Size Presets in theme.json
- Escaping Table and Field names with wpdb::prepare() in WordPress 6.1
- WP_List_Table::get_views_links() in WordPress 6.1
- Functions and hooks for required fields in WordPress 6.1
- Moving the send_headers action to later in the load
- Performance improvements to the REST API
- Editor Components updates in WordPress 6.1
- Multisite improvements in WordPress 6.1
- Miscellaneous Core changes for WordPress 6.1
- Performance Field Guide for WordPress 6.1
- Miscellaneous REST API improvements in WordPress 6.1
- Block API changes in WordPress 6.1
- Miscellaneous editor changes for WordPress 6.1
- Updated editor layout support in 6.1 after refactor
- Changes to block editor preferences in WordPress 6.1
- Block styles generation (Style Engine)
- Reference Styles values in theme.json
Samenvatting
Met WordPress 6.1 zien we de consolidatie van de bewerkingsmogelijkheden van WordPress sites. We zitten nog steeds in fase twee van de Gutenberg langetermijn roadmap, maar de tools en features die ons ter beschikking staan worden mettertijd betrouwbaarder en robuuster. WordPress 6.1 brengt Fluid Typography, nieuwe sitebuildtools, en tonnen verbeteringen aan bestaande blokken.
Maar dat niet alleen. WordPress 6.1 brengt ook aanzienlijke verbeteringen in de prestaties van het CMS. Twee nieuwe Site Health checks detecteren het gebruik van Full Page Cache en Persistent Object Cache, querycaching verbetert de prestaties van WP_Query en er zijn ook verbeteringen in de prestaties van PHP voor de registratie van coreblokken.
Kortom, 6.1 is een versie waar gebruikers en ontwerpers van WordPress dol op zullen zijn, evenals ontwikkelaars, die zullen profiteren van de vele verbeteringen op verschillende gebieden van het CMS.
Nu is het aan jou. Wat bevalt je het meest in WordPress 6.1? Heb je de nieuwe versie al getest in je ontwikkelomgeving? Deel je gedachten over WordPress 6.1 met ons in het commentssectie hieronder.
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.
Laat een reactie achter