{"id":37443,"date":"2021-03-18T15:16:18","date_gmt":"2021-03-18T14:16:18","guid":{"rendered":"https:\/\/kinsta.com\/?p=90307"},"modified":"2023-05-23T10:27:24","modified_gmt":"2023-05-23T08:27:24","slug":"wordpress-5-7","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/wordpress-5-7\/","title":{"rendered":"Wat is er nieuw in WordPress 5.7 (lazyloading, HTTPS, updates UI, nieuwe API’s en veel meer)"},"content":{"rendered":"

We zijn gewend om elke keer wanneer er een nieuwe versie uitgebracht wordt, kleine en minder kleine veranderingen en nieuwe functies aan de WordPress core<\/a> te zien. WordPress 5.7 vormt hierop geen uitzondering en het is geweldig om te zien hoe elke nieuwe release ons een beetje dichter bij de Big Picture<\/a> brengt.<\/p>\n

Ook dit keer zijn er weer verschillende versies van de blok-editor samengevoegd in de core, waardoor deze nieuwe release de algehele bewerkingservaring verbetert en ontwikkelaars in staat stelt om geavanceerde blokken te bouwen en nog meer dingen aan te passen binnen de blok-editor.<\/p>\n

Naast de editor introduceert WordPress 5.7 ook tal van wijzigingen en andere geweldige features, waaronder het lazyloaden van iframes, updates aan de login- en registratie-interface, links om wachtwoorden opnieuw in te stellen, een groot aantal bugfixes en nog veel meer.<\/p>\n

We hebben alles uitvoerig getest op DevKinsta<\/a> en we zijn klaar om onze favoriete features en wijzigingen van WordPress 5.7 met je te delen – natuurlijk volledig aangevuld met talloze screenshots en codesnippets.<\/p>\n

Als je uitgebreider wil kijken naar de eerste major release van 2021 wil, kijk dan naar de offici\u00eble WordPress 5.7 Development Cycle<\/a>, Planning Roundup<\/a> en Field Guide<\/a>.<\/p>\n

Laten we dus, terwijl we blijven wachten op full-site bewerken<\/a> (in de core van WordPress 5.8), achteroverleunen en genieten van alle nieuwe dingen in WordPress 5.7!<\/p>\n\n

<\/div><\/kinsta-auto-toc>\n

Wat is er nieuw in de blok-editor<\/h2>\n

WordPress 5.7 zorgt ervoor dat veel versies van de Gutenberg plugin<\/a> nu naar de core komen. Het zou onmogelijk zijn om alle toevoegingen hier te noemen, om nog maar te zwijgen van de vele wijzigingen en bugfixes die aan de editor zijn toegevoegd, maar als je meer wil weten over de versies kan je de volgende links bezoeken: 9.3<\/a>, 9.4<\/a>, 9.5<\/a>, 9.6<\/a>, 9.7<\/a>, 9.8<\/a>, 9.9<\/a>.<\/p>\n

Bugfixes en prestatieverbeteringen van Gutenberg 10.0 en 10.1 maken ook onderdeel uit van WordPress 5.7.<\/p>\n

Dat gezegd hebbende, laten we onze zorgvuldig samengestelde lijst doornemen met daarin de meest interessante features en wijzigingen die zijn toegevoegd aan de blok-editor van WordPress 5.7:<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Blokvariatie features, verbeteringen en API’s<\/h3>\n

Blokvariaties<\/a> zijn ge\u00efntroduceerd in WordPress 5.4, en bieden gebruikers een manier om een andere instantie van hetzelfde blok te selecteren.<\/p>\n

Deze feature werkt samen met de Block Variations API<\/a>, een krachtige tool waarmee ontwikkelaars variaties van blokken kunnen toevoegen, beheren of verwijderen.<\/p>\n

WordPress 5.7 introduceert verschillende verbeteringen, functies en nieuwe API’s voor blokvariaties, waardoor ontwikkelaars een betere gebruikersinterface en krachtigere tools krijgen. Laten we er eens naar kijken.<\/p>\n

‘Transform to variation’ voor blokken<\/h4>\n

Deze functie werd voor het eerst ge\u00efntroduceerd met Gutenberg 9.4<\/a> en is nu onderdeel van WordPress 5.7. De Transform to variation<\/strong> switcher verschijnt nu onder de blokkaart bij blokken die deze feature ondersteunen.<\/p>\n

\"De
De Transform to variation switcher voor een Buttons blok<\/figcaption><\/figure>\n

Wanneer je een nieuwe blokvariant registreert, kunnen blokdevelopers nu een variatieschakelaar (variation switcher) toevoegen aan de blok-inspector door de nieuwe transform<\/code> option toe te voegen aan het scope<\/code> veld van het blok, zoals je in onderstaand voorbeeld kan zien (alleen JS code):<\/p>\n

wp.blocks.registerBlockVariation( 'core\/heading', { \n\tname: 'green-text', \n\ttitle: 'Green Text', \n\tdescription: 'This block has green text. It overrides the default description.',  \n\tattributes: { \n\t\tcontent: 'Green Text', \n\t\ttextColor: 'vivid-green-cyan' \n\t}, \n\ticon: 'palmtree', \n\tscope: [ 'inserter', 'transform' ] \n} );<\/code><\/pre>\n
In dit voorbeeld verschijnt een blokvariatie in twee gebieden van de gebruikersinterface van de editor: de block inserter en de block inspector.<\/p>\n
\"Voorbeeld
Voorbeeld blokvariatie met transform scope<\/figcaption><\/figure>\n
Zie ook PR #26687<\/a> voor een diepgaand overzicht van Block Variation Transformations.<\/p>\n
Blokinformatie komt nu overeen met blokvariaties<\/h4>\n
Sinds WordPress 5.7 (en Gutenberg 9.7<\/a>) toont de gebruikersinterface meer specifieke informatie over blokvariaties, terwijl het hiervoor alleen algemene informatie liet zien.<\/p>\n
\"V\u00f3\u00f3r
V\u00f3\u00f3r WordPress 5.7 toonden de interface-elementen algemene informatie over blokvariaties<\/figcaption><\/figure>\n
Embed blokken en Social Icons worden gebouwd als blokvariaties; ze zijn dan ook goede voorbeelden van hoe WordPress blokinformatie overeen laat komen met blokvariaties.<\/p>\n
\"Nu
Nu tonen de interface-elementen informatie die specifiek is voor blokvariaties<\/figcaption><\/figure>\n
Deze wijzigingen zijn van invloed op de blok-inspector, de blok-navigatiebalk en de breadcrumbs. Sinds Gutenberg 9.8<\/a> is deze UI verbetering ook van toepassing op de blok-switcher.<\/p>\n
\"Verbeteringen
Verbeteringen aan de UI voor blokvariaties in de blok-switcher<\/figcaption><\/figure>\n
Nieuwe blokvariaties API’s<\/h4>\n
WordPress 5.7 introduceert ook nieuwe API’s<\/a> die developers kunnen gebruiken bij blokvariatieregistratie om de juiste informatie van een blokvariant te tonen (Gutenberg 9.7<\/a>).<\/p>\n
De nieuwe isActive<\/code> property is een function die de attributes van een blok accepteert. Je kan de attributes van een variatie gebruiken om te bepalen of een variatie actief is (zie ook Block API reference<\/a>).<\/p>\n
Blokdevelopers kunnen deze functie gebruiken om informatie over de variatie weer te geven in plaats van blokinformatie. Een voorbeeld zou het embed<\/code> blok kunnen zijn, waar we de waarde van de attribute providerNameSlug<\/code> kunnen wijzigen (een voorbeeld van de dev note<\/a>):<\/p>\n
const variations = [\n{\n\tname: 'wordpress',\n\ttitle: 'WordPress',\n\tkeywords: [ __( 'post' ), __( 'blog' ) ],\n\tdescription: __( 'Embed a WordPress post.' ),\n\tattributes: { providerNameSlug: 'wordpress' },\n\tisActive: ( blockAttributes, variationAttributes ) =>\n\t\tblockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n},\n];<\/code><\/pre>\n
In het volgende voorbeeld wordt de property isActive<\/code> gebruikt om de color attribute te wijzigen:<\/p>\n
variations: [\n{\n\tname: 'blue',\n\ttitle: __( 'Blue Quote' ),\n\tisDefault: true,\n\tattributes: { color: 'blue', className: 'is-style-blue-quote' },\n\ticon: 'format-quote',\n\tisActive: ( blockAttributes, variationAttributes ) =>\n\t\tblockAttributes.color === variationAttributes.color\n},\n],<\/code><\/pre>\n
De nieuwe useBlockDisplayInformation<\/code> hook retourneert informatie over een bepaald blok. De nieuwe hook houdt rekening met de isActive<\/code> property van een blokvariatie en retourneert de titel<\/code>, icoon<\/code> en beschrijving<\/code> van een blok.<\/p>\n
Deze wijzigingen zijn van invloed op Block Card (Inspector Tools), Navigation List View (bovenste balk) en Breadcrumbs (zie ook PR #27469<\/a>).<\/p>\n
Nieuwe features Buttons blok<\/h3>\n
Een paar nieuwe features zijn toegevoegd die de functionaliteiten en interface van het Buttons blok verbetert.<\/p>\n
Knop afmetingen<\/h4>\n
Een nieuwe optie is beschikbaar in Settings Sidebar waarmee je een percentuele breedte kan opgeven voor knoppen die vallen onder het Buttons blok (Gutenberg 9.4<\/a>).<\/p>\n
\"Breedte-instellingen
Breedte-instellingen voor knoppen<\/figcaption><\/figure>\n
Je hoeft hiervoor alleen een knop te kiezen en 25%, 50%, 75% of 100% te kiezen. Percentages hebben betrekking op de parent-container. De onderstaande afbeelding toont de verschillende combinaties van knopafmetingen.<\/p>\n
\"Combinaties
Combinaties van knoppen met verschillende breedtewaarden<\/figcaption><\/figure>\n
Voor meer technische inzichten, lees dan pull requests #25999<\/a> en 26781<\/a>.<\/p>\n
Verticale layout<\/h4>\n
Deze nieuwe functie voegt variaties toe voor verticale ori\u00ebntatie aan het blok Buttons. Gebruikers kunnen overschakelen van een horizontale lay-out naar een verticale met behulp van de Transformations schakelaar die beschikbaar is in het paneel met blokinstellingen (Gutenberg 9.6<\/a>).<\/p>\n
\"Buttons
Buttons blok met verticale ori\u00ebntatie<\/figcaption><\/figure>\n
Verbeteringen voor sociale iconen<\/h3>\n
WordPress 5.7 voegt nieuwe custumizationmogelijkheden toe aan de Social Icons<\/a>: ondersteuning voor custom afmetingen en custom kleuren.<\/p>\n
Grootte sociale iconen<\/h4>\n
Bij het selecteren van het Social Icons blok, biedt de bloktoolbar nu een keuzemenu Size<\/strong> met beschikbarre afmetingen (Gutenberg 9.4<\/a>).<\/p>\n
\"De
De ‘huge’ afmeting voor sociale iconen<\/figcaption><\/figure>\n
Custom kleuren in social icons<\/h4>\n
Hetzelfde blok ondersteunt nu ook kleurinstellingen, waardoor we verschillende custom kleuren voor iconen en achtergronden kunnen instellen (Gutenberg 9.9<\/a>).<\/p>\n
\"Sociale
Sociale iconen met zwarte kleur als achtergrond<\/figcaption><\/figure>\n
Je kan nu het kleurenpalet van het thema gebruiken voor sociale iconen, waardoor wordt voorkomen dat pictogramkleuren botsen met het kleurenschema<\/a> van je website (zie ook PR #28084<\/a>).<\/p>\n
Ondersteuning voor lettergrootte<\/h3>\n
WordPress 5.7 ondersteunt nu lettertypegrootte<\/a> voor zowel List en Code blokken.<\/p>\n
Lettergrootte in List blok<\/h4>\n
Een typografiekaart met opties voor lettergrootte is nu toegevoegd aan de instellingen van het List blok (Gutenberg 9.4<\/a>).<\/p>\n
\"Lettergrootte
Lettergrootte in instellingen List blok<\/figcaption><\/figure>\n
Gebruikers kunnen een van de beschikbare lettergroottes kiezen voor hun lijstitems of hun eigen lettergroottes kiezen aan de hand van pixels. De “Reset” knop herstelt de standaardwaarden.<\/p>\n
Ondersteuning lettergrootte voor Code blok<\/h4>\n
WordPress 5.7 ondersteunt nu het beheer van lettergrootte binnen de Code blokken. Bij het selecteren van het Code blok, krijg je nu in de zijbalk met instellingen een nieuw element te zien genaamd Font size<\/strong>. Hiermee kan je een van de vooraf ingestelde groottes die in je thema<\/a> beschikbaar is of een custom waarde in pixels instellen (Gutenberg 9.5<\/a>).<\/p>\n
\"Algemene
Algemene lettergroottes die beschikbaar zijn in Twenty Twenty<\/figcaption><\/figure>\n
De implementatie van deze functie maakt het ook mogelijk om globale stijlvariabelen te gebruiken in de CSS van codeblokken (zie ook PR #27294<\/a>). De onderstaande afbeelding toont een codeblok op de front-end met het Twenty Twenty thema<\/a> ge\u00efnstalleerd.<\/p>\n
\"Globale
Globale CSS stijlen in een Code blok<\/figcaption><\/figure>\n
Full-height uitlijning in Cover blok<\/h3>\n
WordPress 5.7 introduceert een nieuwe component genaamd Full Height Toolbar Alignment. Het was voor het eerst toegevoegd aan de blok-editor in Gutenberg 9.5<\/a>. Nu is het samengevoegd in de core en ge\u00efmplementeerd in het Cover blok.<\/p>\n
\"Full-height
Full-height uitlijning is nu onderdeel van het Cover blok<\/figcaption><\/figure>\n
Als je met de knop de bloktoolbar openklapt en naar de minimale hoogteregeling kijkt, dan zie je dat de uitlijning op volledige hoogte niet meer dan een afkorting is voor 100vh<\/code> (lees hier meer over in lengtes viewpoort-percentages<\/a>.<\/p>\n
\"Full-height
Full-height uitlijning in Cover blok<\/figcaption><\/figure>\n
Je kan Full Height Alignment gebruiken in combinatie met andere besturingsinstellingen, zoals een vaste achtergrond, positie content enzovoort. Je zal waarschijnlijk verrast zijn door het aantal indrukwekkende effecten dat je op je pagina’s kan cre\u00ebren.<\/p>\n
Drag-and-drop blokken en patronen vanuit de Inserter<\/h3>\n
De blok-inserter ondersteunt nu drag-and-drop-functionaliteiten voor blokken en patronen<\/a>. Gebruikers kunnen elk blok of patroon uit de inserter pakken en het ergens op het canvas van het bericht plaatsen (Gutenberg 9.6<\/a> en 9.7<\/a>).<\/p>\n
\"Nu
Nu kunt u blokken of patronen van de inserter naar het berichtcanvas slepen<\/figcaption><\/figure>\n
Let op dat drag-and-drop alleen werkt als je thema ook blokpatronen ondersteunt.<\/p>\n
Semi-transparant Spacer blok<\/h3>\n
In plaats van de vroegere ondoorzichtige grijze kleur heeft het Space blok nu een semi-transparante achtergrond (Gutenberg 9.8<\/a>).<\/p>\n
\"Een
Een ondoorzichtig Spacer blok in WordPress 5.6<\/figcaption><\/figure>\n
Deze functie zou het gemakkelijker moeten maken om het Spacer blok bovenop elke mogelijke achtergrondkleur te identificeren.<\/p>\n
\"Een
Een semi-transparant Spacer blok in WordPress 5.<\/figcaption><\/figure>\n
Overige verbeteringen aan de blok-editor die het vermelden waard zijn<\/h3>\n
Onze list kan onmogelijk alle features bevatten die zijn toegevoegd aan de core, dus zorg ervoor dat je de offici\u00eble documentatie en devnotes checkt voor een uitgebreider beeld van wat er nieuw is in de blok-editor van WordPress 5.7.<\/p>\n
Maar om er een paar te noemen, in 5.7 vind je ook:<\/p>\n