Genoeg om over te praten dus! Hoog tijd dus om eens te kijken naar wat er nieuw is in WordPress 6.4.<\/p>\n
Blokhooks<\/h2>\n
Blokhooks<\/a> of block hooks, voorheen auto-inserting blocks<\/a> genoemd, stellen plugins in staat om automatisch te communiceren met de Gutenberg Editor<\/a>.<\/p>\n Om precies te zijn: dankzij blokhooks kan een blok automatisch op een specifieke positie worden geplaatst wanneer een ander blok wordt toegevoegd aan de inhoud.<\/p>\n Twee principes bepalen hoe blokhooks moeten werken:<\/p>\n Om rekening te houden met beide principes en om de informatie in de code te behouden, werken gehookte blocks alleen in ongewijzigde templates en template parts en in patterns die zijn aangeleverd door thema’s, gekopieerd uit de Pattern Directory of geregistreerd met de Bovendien waarschuwt de notitie<\/a>:<\/p>\n vanaf WordPress 6.4 kun je niet automatisch blokken invoegen die een opslagfunctie hebben, anders treden er blokvalidatiefouten op. In spreektaal betekent dit dat blokhooks werken met dynamische blokken, niet met statische blokken.<\/p><\/blockquote>\n Lees meer over statische en dynamische blokken<\/a>.<\/p>\n Je kunt blokhooks op twee manieren implementeren: met het block.json<\/strong> bestand of met het nieuwe Het gebruik van block.json<\/strong> is de snelle en gemakkelijke manier om een extern blok te hooken, maar het biedt geen grote flexibiliteit, wat betekent dat een blok dat automatisch wordt ingevoegd via block.json<\/strong> onvoorwaardelijk aan alle instanties van het doel zal worden gekoppeld.<\/p>\n Je kunt “aangehaakte” blokken toevoegen met de nieuwe property Je kunt een van de volgende posities instellen:<\/p>\n Je kunt bijvoorbeeld op deze manier een blok aan elk Spacer blok koppelen met Als je Een flexibelere manier om blokken aan een doel te koppelen is met het nieuwe filter De callback functie voor Voor meer technische inzichten over blokhooks, zie de dev note<\/a>.<\/p>\n Blokpatterns zijn een krachtig ontwerpprogramma dat je kunt gebruiken in je content of templates, zodat je complexe structuren van blokken kunt bouwen zonder gedoe. Je kunt de patterns gebruiken die worden geleverd door je blokkenthema, of je kunt meer patterns toevoegen door ze te kopi\u00ebren uit de Patterns Directory<\/a>.<\/p>\n Je kunt ook zelf patterns maken in de interface van de site\/bericht-editor. En als je handig bent met coderen, kun je patterns toevoegen aan je huidige thema – of childthema<\/a> – met een .php bestand. Tegenwoordig zijn patterns zo belangrijk in WordPress dat we een uitgebreide handleiding hebben gepubliceerd over alles wat met blokpatterns<\/a> te maken heeft.<\/p>\n Dat gezegd hebbende, laten we eens kijken wat er nieuw is in het patternsysteem met WordPress 6.4.<\/p>\n Ten eerste, patterncategorie\u00ebn. In de vorige WordPress versie kon je, als je een nieuw pattern aanmaakte, alleen de patternnaam en het patterntype instellen, gesynchroniseerd of niet gesynchroniseerd.<\/p>\n Vanaf WordPress 6.4 kun je ook een categorie toevoegen voor je pattern, zodat je het gemakkelijker kunt herkennen<\/a> in de site- en berichteditor.<\/p>\n Het is ook mogelijk om de categorie\u00ebn te wijzigen wanneer je het pattern bewerkt.<\/p>\n Bovendien is het tabblad Synced patterns <\/strong>van de Block Inserter verwijderd en heb je nu toegang tot al je patterns via hetzelfde tabblad Patterns<\/strong>.<\/p>\n Het is ook eenvoudiger om patterns te importeren of exporteren<\/a> als JSON vanuit de site editor.<\/p>\n Overige<\/a> wijzigingen<\/a> verbeteren de compatibiliteit van patterns met Classic thema’s en maken de weg vrij voor toekomstige implementaties.<\/p>\n Twenty Twenty-Four is het nieuwe standaard WordPress thema dat wordt meegeleverd met WordPress 6.4. Het is een multifunctioneel en toch minimaal WordPress thema op maat gemaakt voor drie belangrijke toepassingen: kleine ondernemers, fotografen en kunstenaars, en schrijvers en bloggers.<\/p>\n Twenty Twenty-Four voegt geen functionaliteit toe aan je website. Het is meer een verzameling templates en patterns waarmee je, gecombineerd, een grote verscheidenheid aan websites kunt bouwen.<\/p>\n Bovendien biedt het veel standaard content met veel praktijkvoorbeelden van paginastructuren die je kunt bewerken en aanpassen op basis van jouw behoeften.<\/p>\n We hebben een uitgebreid artikel over het nieuwe thema Twenty Twenty-Four<\/a>. We raden het zeker aan deze eens te bekijken voor een beter idee.<\/p>\n In WordPress 6.4 vind je verschillende ontwerptools en functies in de core. De meest interessante zijn:<\/p>\n Het Content blok is een kind van het Quey Loop blok<\/a> en is vooral handig als je het uiterlijk van de inhoud in een query loop moet aanpassen.<\/p>\n Het is beschikbaar in de bericht-editor als je een Query Loop bewerkt en in de site-editor als je een template maakt of bewerkt.<\/p>\n Met WordPress 6.4 is het Content blok verbeterd en ondersteunt het nu kleuren<\/a> voor tekst, achtergrond en links.<\/p>\n Met WordPress 6.4 is er een nieuwe ondersteuning voor achtergrondafbeeldingen<\/a> toegevoegd, waarbij het Groups blok standaard is ingeschakeld<\/a>.<\/p>\n Wanneer een thema gebruik maakt van de Het instellen van een achtergrondafbeelding voegt de property Je hebt twee manieren om ondersteuning voor achtergrondafbeeldingen toe te voegen aan je thema’s. De eerste en eenvoudigste manier is om te kiezen voor de property Als je meer controle nodig hebt over je designtools, kun je op deze manier de property Met een nieuwe knop Expand on Click <\/strong>in het Settings paneel van blokafbeeldingen kun je het lightbox-effect<\/a> op je afbeeldingen in- of uitschakelen. Dit is de eerste versie van deze functionaliteit en deze zou in toekomstige releases verder moeten worden verbeterd.<\/p>\n Het lightbox effect werkt ook met duotone filters, maar het is een beetje verwarrend als het gaat om fotogalerijen. Op het moment van dit schrijven is het niet mogelijk om het lightbox-effect in te schakelen op galerijniveau en moet je de functie inschakelen op afzonderlijke afbeeldingen.<\/p>\n Om deze functie in de vorige WordPress versies te implementeren, moest je een plugin gebruiken. Nu maakt het deel uit van de core en dat betekent minder externe code voor je WordPress website.<\/p>\n Een nieuwe optie voor tekstori\u00ebntatie<\/a> stelt thema’s in staat om verticale tekst te ondersteunen. Als jouw thema deze functie ondersteunt, kun je verticale tekst van rechts naar links inschakelen in de Typography <\/strong>instellingen.<\/p>\n Deze functie is standaard uitgeschakeld. Thema-developers kunnen ondersteuning voor tekstori\u00ebntatie toevoegen door een nieuwe Je kunt ook ander standaardgedrag instellen voor specifieke blokken. Het volgende voorbeeld laat zien hoe je WordPress 6.4 introduceert ook een paar verbeteringen voor het Footer blok<\/a>. Het ondersteunt nu link, achtergrond en tekstkleur<\/a>. Het biedt daarnaast regelaars voor typografie, afmetingen en randen<\/a>.<\/p>\n De tekst- en linkkleurregelaars worden standaard uitgeklapt. De andere regelaars worden bij het laden van de pagina ingeklapt.<\/p>\n Knoppen staan nu in de lijst met toegestane binnenelementen<\/a> van het navigatieblok.<\/p>\n Wanneer je een nieuw menu-item maakt, kun je dit eenvoudig transformeren naar een knop in de werkbalk van het blok.<\/p>\n WordPress 6.4 introduceert ook verschillende verbeteringen in de interface van de editor, waardoor de bewerkingservaring wordt verbeterd en de workflow wordt gestroomlijnd. Onze favoriete veranderingen zijn onder andere:<\/p>\n Het commandopalet, dat voor het eerst werd ge\u00efntroduceerd in WordPress 6.3<\/a>, stelt je in staat om veelgebruikte acties uit te voeren in de interface van de site-editor. WordPress 6.4 markeert een nieuwe stap voorwaarts met een update van het ontwerp<\/a> en een paar extra verbeteringen.<\/p>\n De afbeeldingen hieronder laten een voorbeeld zien van het verschillende gedrag van het commandopalet in WordPress 6.3 en 6.4.<\/p>\n Deze release voegt ook een paar nieuwe commando’s toe<\/a> en verbetert de consistentie en naamgeving. De nieuwe commando’s zijn onder andere bloktransformaties en de opties om te dupliceren, kopi\u00ebren, verwijderen en voor\/na invoegen.<\/p>\n Een kleine verandering verwijdert werkwoorden<\/a> uit het begin van veel commando’s. Dit verbetert de doorzoekbaarheid en overzichtelijkheid van verschillende commando’s.<\/p>\n De nieuwe release voegt ook commando’s voor blokselectie toe. Om dit in actie te zien, selecteer je een paar blokken in de site-editor en druk je op Je kunt verschillende commando’s uitvoeren op een selectie van blokken<\/a>. Je kunt bijvoorbeeld een paar blokken groeperen:<\/p>\n En je kunt ze ook weer groeperen.<\/p>\n Op het moment van schrijven zijn de blokselectiecommando’s Add before<\/strong>, Add after<\/strong>, Delete<\/strong>, Duplicate<\/strong>, Move to<\/strong>, Group<\/strong>, Ungroup<\/b>en Transform to<\/strong>.<\/p>\n Met de List View <\/b>kun je door de pagina-inhoud bladeren en verschillende acties uitvoeren op blokken, groepen en patterns. Deze acties zijn onder andere Copy, Duplicate, Group en nog veel meer. Dit is vooral handig bij complexe structuren van geneste blokken, omdat je hiermee groepen items kunt uitvouwen en samenvouwen en verschillende acties kunt uitvoeren op afzonderlijke blokken, groepen en patterns.<\/p>\n Vanaf WordPress 6.4 kun je ook een Groups blokken hernoemen<\/a>, afbeeldingen bekijken<\/a> voor Galery- en Image blokken , blokken dupliceren<\/a> met de shortcut Bij het bewerken van blokken met meerdere childblokken kan het werken met de binnenste blokken lastig zijn. Dit geldt met name voor het Navigation blok<\/a>.<\/p>\n V\u00f3\u00f3r WordPress 6.4 bewoog de werkbalk van het blok bij het selecteren van binnenste blokken naar een andere positie op het scherm. Dit gedrag leidde tot een slechte gebruikerservaring voor blokken zoals Navigatie en Lijst.<\/p>\n Sinds WordPress 6.4 is de werkbalk van het childblok gekoppeld aan de positie van de parent. Op deze manier blijft de werkbalk op dezelfde plaats<\/a> als de parent als je van selectie wisselt tussen de childrenblokken.<\/p>\n De vastgelegde werkbalk is momenteel ge\u00efmplementeerd<\/a> op Navigation-<\/a>, List-<\/a> en Quote blokken<\/a>.<\/p>\n Meer dan 100 prestatie-updates zijn samengevoegd in de core, samen met verschillende wijzigingen voor thema-developers. Laten we eens een paar interessante wijzigingen bekijken.<\/p>\n Scriptlaadstrategie\u00ebn werden ge\u00efntroduceerd in WordPress 6.3<\/a> en bieden een manier om te voorkomen dat een script in een onverwachte volgorde in de dependency tree van het script geladen met behulp van de attributen Vanaf WordPress 6.4 zijn scriptlaadstrategie\u00ebn ge\u00efmplementeerd voor frontend scripts<\/a> in core en gebundelde thema’s.<\/p>\n Bovendien zijn vanaf WordPress 6.4 scripts “die worden geladen met het Aanvullende wijzigingen verbeteren de beveiliging van de core en de onderhoudbaarheid. Bekijk voor een meer technisch overzicht van het laden van scripts de WP 6.4 dev note<\/a>.<\/p>\n Vanaf WordPress 6.4 zijn bijlagenpagina’s voor nieuwe WordPress installaties volledig uitgeschakeld<\/a>.<\/p>\n V\u00f3\u00f3r WordPress 6.4 maakte WordPress automatisch een bijlagepagina aan voor elk ge\u00fcpload multimediabestand. Maar dit is op veel websites niet zinvol. Deze pagina’s worden ge\u00efndexeerd door zoekmachines<\/a> en kunnen leiden tot een slechte ervaring voor gebruikers.<\/p>\n Vanaf WordPress 6.4 regelt een Deze option is vanaf WordPress 6.4 ingesteld op Sitebeheerders kunnen deze waarde wijzigen via WP CLI:<\/p>\n Of bezoek wp-admin\/options.php<\/strong> op je website en verander de waarde van de option Er is een horizontale basiscomponent V\u00f3\u00f3r WordPress 6.4 werd de functie \n
register_block_pattern<\/code> functie. Ze werken niet in de content van posts, gewijzigde templates en template parts en door gebruikers gemaakte patterns.<\/p>\nhooked_block_types<\/code> filter.<\/p>\nBlokken hooken via block.json<\/h3>\n
blockHooks<\/code>, die een object van sleutel\/waardeparen aanneemt, waarbij de sleutel de naam is van het blok waar je op wilt inhaken en de waarde de positie ten opzichte van het doelblok specificeert.<\/p>\n\n
before<\/code> voor het doelblok<\/li>\nafter<\/code> na het doelblok<\/li>\nfirstChild<\/code> eerste child van het doelcontainerblok<\/li>\nlastChild<\/code> laatste child van het doelcontainerblok<\/li>\n<\/ul>\nblockHooks<\/code>:<\/p>\n{\n\tblockHooks: {\n\t\t'core\/spacer': 'after'\n\t}\n}<\/code><\/pre>\nfirstChild<\/code> of lastChild<\/code> gebruikt met block.json<\/strong>, verschijnt er een nieuw Plugins<\/strong> paneel in de Block Inspecter met een lijst van blokken die automatisch worden ingevoegd, met toggles<\/a> om automatisch invoegen van blokken aan of uit<\/a> te zetten.<\/p>\n![\"Automatisch](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/auto-inserting-blocks-enabled.jpg\")
Blokken hooken\u00a0 met
hooked_block_types<\/code><\/code><\/h3>\nhooked_block_types<\/code>. Hiermee kun je blokken onvoorwaardelijk aan een doel koppelen, net als met de block.json<\/strong> methode, of op basis van een voorwaarde – bijvoorbeeld een blok aan een doel koppelen afhankelijk van de template, het templatepart of het pattern waar het zich bevindt.<\/p>\nhooked_block_types<\/code> accepteert vier parameters:<\/p>\n\n
$hooked_blocks<\/code> – Een array van gehaakte blokken.<\/li>\n$position<\/code> – Dit kan before<\/code>, after<\/code>, first_child<\/code>, of last_child<\/code> zijn.<\/li>\n$anchor_block<\/code> – De naam van het ankerblok.<\/li>\n$context<\/code> – Het bloktemplate, templatepart of pattern waar het ankerblok bij hoort.<\/li>\n<\/ul>\nVerbeteringen aan het patternsysteem<\/h2>\n
![\"Patroon](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-create-pattern.jpg\")
![\"Patroon](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-create-pattern-categories.jpg\")
![\"Patterncategorie\u00ebn](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-pattern-categories.jpg\")
![\"Tabbladen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-block-inserter-tabs-compared.jpg\")
![\"Patterns](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-export-as-json.jpg\")
Twenty Twenty-Four<\/h2>\n
Nieuwe ontwerptools en features<\/h2>\n
Kleurinstellingen voor het Content blok<\/h3>\n
![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-content-block.jpg\")
![\"Kleurinstellingen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-content-block-color-settings.jpg\")
Ondersteuning voor blokken met achtergrondafbeeldingen<\/h3>\n
![\"Achtergrondafbeelding](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-background-image.jpg\")
appearanceTools<\/code> functie in de theme.json<\/strong>, dan toont een Background paneel de bijbehorende regelaar voor de achtergrondafbeelding, die ook een preview van de achtergrondafbeelding toont.<\/p>\nbackground-image<\/code> toe aan het div<\/code> element van het blok, samen met een background-size: cover<\/code> declaration die ervoor zorgt dat de afbeelding het Groups blok bedekt.<\/p>\nappearanceTools<\/code>. Dit maakt verschillende ontwerptools mogelijk, waaronder achtergrondafbeeldingen.<\/p>\nbackgroundImage<\/code> in je theme.json<\/strong> gebruiken:<\/p>\n{\n\t\"settings\": {\n\t\t\"background\": {\n\t\t\t\"backgroundImage\": true\n\t\t}\n\t}\n}<\/code><\/pre>\nLightbox-effect voor afbeeldingen<\/h3>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-enable-lightbox.jpg\")
Verticale tekstori\u00ebntatie<\/h3>\n
![\"Verticale](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-text-orientation.jpg\")
writingMode<\/code> instelling toe te voegen aan hun theme.json<\/strong>:<\/p>\n{\n\tsettings: {\n\t\t\"typography\": {\n\t\t\t\"writingMode\": true\n\t\t}\n\t}\n}<\/code><\/pre>\nvertical-rl<\/code> ori\u00ebntatie kunt instellen voor alle Paragraph blokken:<\/p>\n{\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/paragraph\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"writingMode\": \"vertical-rl\"\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\t}\n}<\/code><\/pre>\nVerbeteringen voor het Footer blok<\/h3>\n
![\"Instellingen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-footnotes-settings.jpg\")
Knoppen toegestaan in het Navigation blok<\/h3>\n
![\"Transformeer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-button-menu-item.jpg\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-button-menu-item-2.jpg\")
Verbeteringen UI en workflow<\/h2>\n
Verbeterd commandopalet<\/h3>\n
![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-command-palette.jpg\")
![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-command-palette.jpg\")
![\"Zoeken](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-patterns-in-command-palette.jpg\")
![\"Zoeken](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-patterns-in-command-palette.jpg\")
![\"Zoeken](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-open-in-command-palette.jpg\")
![\"Zoeken](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-open-in-command-palette.jpg\")
cmd + k<\/code> (MacOS) of ctrl + k<\/code> (Windows) en voer je een zoeksleutel in zoals “transform”. Je zou de volgende suggesties moeten zien:<\/p>\n![\"Commando's](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-transform-command.jpg\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-group-command.jpg\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-ungroup-command.jpg\")
Verbeterde List View<\/h3>\n
![\"List](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-list-view.jpg\")
![\"List](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-list-view.jpg\")
cmd + shift + d<\/code> (ctrl + shift + d<\/code> onder Windows).<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-rename-group.jpg\")
Vaste werkbalken<\/h3>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-select-list.jpg\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-select-list-item.jpg\")
Prestatieverbeteringen en andere wijzigingen voor developers<\/h2>\n
Script laadstrategie\u00ebn<\/h3>\n
async<\/code> en defer<\/code>.<\/p>\ndefer<\/code> attribuut verplaatst van de footer naar de head<\/code> zodat ze eerder worden ontdekt terwijl het document wordt geladen en eerder kunnen worden uitgevoerd zodra het document is geladen.”<\/p>\nVeranderingen aan pagina’s met bijlagen<\/h3>\n
wp_attachment_pages_enabled<\/code> database option het gedrag van de bijlagepagina’s.<\/p>\n1<\/code> voor bestaande websites (bijlagepagina’s ingeschakeld) tot 0<\/code> voor nieuwe websites (bijlagepagina’s uitgeschakeld).<\/p>\nwp option set wp_attachment_pages_enabled 0|1<\/code><\/pre>\nwp_attachment_pages_enabled<\/code>.<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-wp_attachment_pages_enabled.png\")
ProgressBar component<\/h3>\n
ProgressBar<\/code> ge\u00efntroduceerd<\/a> ter vervanging van de component Spinner<\/code> die eerder werd gebruikt bij het laden van inhoud in de site-editor.<\/p>\n![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-progress-bar-component-1.jpg\")
Patterns laden in WordPress 6.4<\/h3>\n
_register_theme_block_patterns()<\/code> gebruikt om alle patterns te registreren die het actieve thema kon aanbieden in de map