Naast de editor introduceert WordPress 5.4 ook interessante verbeteringen aan de Site Health Tool<\/a> en de REST API<\/a>. Een aantal functies we ook in deze nieuwe versie verwachtten, zijn echter vooruitgeschoven en zullen naar verwachting gebundeld worden met de core in versie 5.5 (zie ook Standaard lazyloaden van afbeeldingen<\/a> en Navigatieblokken<\/a>).<\/p>\n Mogelijk zijn de volgende data en links van de ontwikkelingscyclus van WordPress 5.4<\/a> voor jou interessant:<\/p>\n Dan is het nu tijd om te kijken naar wat er nieuw is in WordPress 5.4! Ben je er klaar voor?<\/p>\n Een aanzienlijk aantal versies van de Gutenberg<\/a>-plugin zijn samengevoegd in de kern van WordPress – van 6.6 tot 7.5. Als je geen gebruik maakt van de Gutenberg-plugin, dan zal je na het upgraden naar WordPress 5.4 tal van nieuwe features, verbeteringen en bugfixes aantreffen.<\/p>\n Maar het zijn niet alleen nieuwe blokken en features in de editor die de klok slaan. Ook worden er tal van prestatieverbeteringen gemeld:<\/p>\n Het team achter de blok-editor heeft een laadtijdreductie van 14% en een 51% time-to-type-reductie bereikt ten opzichte van WordPress 5.3 – voor een enorm bericht van ~36.000 woorden en ~1.000 blokken).<\/p><\/blockquote>\n Allemaal gave dingen, dus laten we ze snel beter bekijken.<\/p>\n De blok-editor van WordPress is momenteel nog volop in ontwikkeling versie 5.4 van WordPress brengt veel veranderingen met zich mee die de bruikbaarheid van de editor verbeteren, zowel op desktop als mobiel.<\/p>\n Een aantal van deze wijzigingen hebben uitsluitend betrekking op de interface. Denk hierbij aan dat de fullscreen-modus nu standaard is ingeschakeld, verbeterde blokselectie, het makkelijker wisselen tussen bewerkingsmodus en selectiemodus, vaste mobiele toolbar en breadcrumbs voor verbeterde bloknavigatie. Verder zijn er twee nieuwe blokken en optie-instellingen toegevoegd die de functionaliteit van de editor verbeteren.<\/p>\n Hier is een korte lijst met onze favoriete functies en verbeteringen die je voor WordPress 5.4 kan verwachten:<\/p>\n Het blok heette voorheen Sociale links, maar krijgt nu de naam Sociale iconen<\/strong>. Met dit blok kunnen auteurs snel iconen toevoegen met daarin links naar sociale profielen<\/a>. De plugin biedt een groot aantal child-blokken met sociale iconen waaruit je kan kiezen. Dit blok bevond zich al even in de experimentele fase en is sinds Gutenberg 7.5<\/a> stabiel.<\/p>\n Het Sociale iconen-blok komt met drie vooraf gedefinieerde stijlen die je naar wens visueel kan aanpassen: Default<\/strong>, Logos only<\/strong> en Pill shape<\/strong>.<\/p>\n Dit blok zag het daglicht als experimentele functie in Gutenberg 6.5 (en werd samengevoegd met WordPress 5.3<\/a>). Sociale iconen werd toegevoegd aan Gutenberg 7.5 en werkt mogelijk niet naar behoren als je een verouderde versie van de Gutenberg-plugin gebruikt.<\/p>\n Volgens Jorge Costa<\/a> zijn er twee methodes om problemen met Sociale iconen te voorkomen:<\/p>\n Deze is toegevoegd aan de blok-editor in Gutenberg 7.2<\/a>. Het blok Knoppen<\/strong> vervangt het oude knoppenblok<\/a> en stelt WordPress-gebruikers in staat om met dezelfde blokcontainer meerdere knoppen aan hun content toe te voegen.<\/p>\n Je kan voor elke knop kiezen uit twee vooraf ingestelde stijlen en verschillende aanvullende opties om het uiterlijk van de knop te verfijnen.<\/p>\n Met WordPress 5.4 krijgen site-eigenaren meer controle over de look en feel van hun call-to-actions dankzij de toevoeging van gradient-achtergronden<\/a>. Deze worden bovendien geleverd met een aantal gradient-presets die sitebeheerders kunnen gebruiken als startpunt voor verdere aanpassingen.<\/p>\n WordPress 5.4 voegt een Welkom-slideshow toe met basisinformatie over de blok-editor en een link naar de online documentatie<\/a> (toegevoegd in Gutenberg 7.1<\/a>).<\/p>\n De pop-up is alleen zichtbaar na het updaten naar 5.4. Als je het opnieuw wil activeren, moet je het menu Meer tools & opties<\/strong> openen (de 3 verticale stippen rechtsboven) en op de link Welkomstgids<\/strong> klikken.<\/p>\n Vanaf WordPress 5.4 wordt de editor standaard in volledig scherm geopend<\/a> voor nieuwe installaties en apparaten. Je kan de Schermvullende weergave<\/strong> in-\/uitschakelen via het menu Meer tools & opties<\/strong>. Zie de onderstaande afbeelding voor meer informatie.<\/p>\n Deze voorkeur wordt (vooralsnog) lokaal opgeslagen. Dit betekent dat deze opnieuw moet worden ingesteld als je bijvoorbeeld de website in incognito-modus bezoekt. In de toekomst zal je voorkeur worden opgeslagen in de database, waardoor het niet meer uitmaakt hoe je je site bezoekt.<\/p>\n De beslissing<\/a> om de editor in volledige weergave te tonen kwam niet zonder slag of stoot. De vraag was met name of dit niet verwarrend zou zijn voor beginnende gebruikers. Lees dit bericht<\/a> als je meer wil weten waarom veel mensen zich zorgen maken over de fullscreen-modus.<\/p>\n Blok-editor-ontwikkelaars kunnen de standaardinstellingen van de fullscreen-modus wijzigen met slechts een paar regels JavaScript:<\/p>\n Als je doorgaans lange artikelen<\/a> schrijft, dan kan je de ondersteuning voor inline tekstkleur waarschijnlijk wel waarderen. V\u00f3\u00f3r deze update moest je hiervoor middels HTML-modus de RichText-blokken hardcoderen om de kleur van afzonderlijke woorden en strings te wijzigen.<\/p>\n Vanaf WordPress 5.4 kunnen we woorden en sub-strings binnen RichText-blokken selecteren en hun kleur wijzigen met behulp van de ingebouwde kleurkiezer.<\/p>\n WordPress 5.4 levert een lange lijst met andere kleurgerelateerde functies en verbeteringen aan de blok-editor. Zoals je hierboven kan zien, zijn we niet langer beperkt tot effen kleuren. Een aantal blokken bieden nu ook ondersteuning voor verloopachtergronden (gradient) en andere vooraf gedefinieerde gradients.<\/p>\n Hier is een korte lijst met een aantal kleurgerelateerde verbeteringen:<\/p>\n Een andere interessante toevoeging aan de blok-editor is de ondersteuning voor uitgelichte afbeeldingen in het blok Nieuwste berichten (Gutenberg 7.5<\/a>).<\/p>\n Dit is de meest recente van een aantal verbeteringen die in de laatste jaren aan het blok Nieuwste berichten zijn toegevoegd onder het motto<\/a> van “meer complexe dynamische of globale blokken”.<\/p>\n In WordPress 5.4 kan je met het blok Nieuwste berichten berichten uit een specifieke categorie opvragen, maar het is helaas nog niet mogelijk om ook geavanceerdere query’s te maken, bijvoorbeeld op basis van categorie\/tag\/bericht types en\/of afzonderlijke berichten opnemen\/uitsluiten.<\/p>\n We hopen dat dit in de nabije toekomst wel mogelijk zal zijn.<\/p>\n De nieuwe breadcrumb-bar is sinds versie 6.7<\/a> beschikbaar voor Gutenberg-gebruikers is nu samengevoegd met de kern. Het doel is om bloknavigatie binnen blokken te vereenvoudigen.<\/p>\n De onderstaande afbeelding toont verschillende geneste blokken en het nieuwe breadcrumb<\/a>-menu eronder.<\/p>\n Ook ontwikkelaars van thema’s en blokken kunnen een hoop veranderingen verwachten aan de blok-editor in WordPress 5.4. Denk hierbij aan:<\/p>\n Ontwikkelaars van blokken en andere gevorderde gebruikers kunnen nu hun eigen custom sneltoetsen toevoegen aan de blok-editor.<\/p>\n Een nieuw pakket genaamd Ontwikkelaars<\/a> kunnen hun eigenlijk custom sneltoetsen toevoegen door op deze manier een call te maken aan de Hiermee wordt de custom sneltoets automatisch toegevoegd aan de modal met sneltoetsen die je rechtsboven in de editor kan vinden onder Meer tools & opties<\/strong>.<\/p>\n Vervolgens kunnen we een sneltoets-handler<\/a> koppelen met de functie Je kan meer lezen over sneltoetsen op de blog van Make WordPress Core<\/a>.<\/p>\n WordPress 5.4 introduceert gradient-achtergronden met een aantal vooraf gedefinieerde instellingen voor de blokken Knop en Cover. Dit wordt mogelijk gemaakt door de nieuwe Gradient Theme APIs<\/a>.<\/p>\n De nieuwe API’s bieden de Je kan custom gradients uitschakelen met de theme-support optie De gradient-functionaliteiten kunnen volledig worden verwijderd met behulp van WordPress 5.4 introduceert een aantal DOM-structuurwijzigingen waarvan ontwikkelaars van thema’s op de hoogte moeten zijn.<\/p>\n Voor meer gedetailleerde informatie over de DOM- en CSS-wijzigingen kan je het beste even kijken naar Markup- en style-gerelateerde wijzigingen<\/a> in WordPress 5.4.<\/p>\n Met de nieuwe @wordpress\/create-block Package for Blok Scaffolding, hebben ontwikkelaars een nieuwe manier om de directory-structuur voor een blok-editor plugin te genereren. Deze structuur bevat normaal gesproken index.php, index.js en style.css.<\/p>\n Blok-ontwikkelaars kunnen nu eenvoudig de volgende opdracht uitvoeren:<\/p>\n Block Collections<\/a> bieden een manier om verzamelingen blokken visueel te groepen in de inserter van de blok-editor. Collections verschillen van categorie\u00ebn en bieden dus een extra manier om blokken te groeperen.<\/p>\n De nieuwe API levert een nieuwe functie:<\/p>\n De nieuwe API werd ge\u00efntroduceerd in Gutenberg 7.3<\/a> en is nu samengevoegd met de kern<\/a> en stelt thema- en blok-ontwikkelaars in staat om hun blokken beter te organiseren, zodat gebruikers gemakkelijker blokken kunnen ontdekken en aan content kunnen toevoegen.<\/p>\n\n
Wat is er nieuw in de blok-editor?<\/h2>\n
\n
Nieuwe features en verbeteringen voor de blok-editor<\/h3>\n
\n
Nieuw blok met sociale iconen<\/h4>\n
![\"Het](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/sociale-iconen-1-1.jpg\")
![\"Sociale](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/sociale-icoonstijlen.jpg\")
\n
Nieuw blok voor knoppen<\/h4>\n
![\"Het](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/knoppen-blok.png\")
![\"Vernieuwde](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/knoppen-kleurfuncties-vernieuwde.jpg\")
De welkomstgids<\/h4>\n
![\"Een](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/gebruikers-handleiding-1-1.jpg\")
![\"Welkomstgids\"](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/welkomstgids.jpg\")
Schermvullende weergave standaard ingeschakeld<\/h4>\n
![\"Schermvullende](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/schermvullende-weergave.png\")
const isFullscreenMode = wp.data.select( 'core\/edit-post' ).isFeatureActive( 'fullscreenMode' );\t\n\nif ( isFullscreenMode ) {\t\n wp.data.dispatch( 'core\/edit-post' ).toggleFeature( 'fullscreenMode' );\n}<\/code><\/pre>\nInline ondersteuning voor tekstkleur in RichText-blokken<\/h4>\n
![\"RichtText-kleuroptie\"](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/richtext-kleuroptie.jpg\")
![\"RichText-kleurkiezer\"](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/richtext-kleurkiezer-1.jpg\")
Extra kleuropties voor bepaalde blokken<\/h4>\n
\n
Uitgelichte afbeeldingen in het blok Nieuwste berichten<\/h4>\n
![\"Blok](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/nieuwste-posts.jpg\")
Een nieuwe breadcrumb-bar voor bloknavigatie<\/h4>\n
![\"Het](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/breadcrumbs-1.jpg\")
Wijzigingen in de blok-editor voor thema- en blokontwikkelaars<\/h3>\n
\n
Sneltoetsen voor de blok-editor<\/h4>\n
@wordpress\/keyboard-shortcuts<\/code> is namelijk toegevoegd<\/a> om de registratie, verwijdering en documentatie van editor-sneltoetsen te centraliseren.<\/p>\nregisterShortcut<\/code> action:<\/p>\nwp.data.dispatch( 'core\/keyboard-shortcuts' ).registerShortcut( {\n\n\t\/\/ Shortcut identifier\n\tname: 'plugin\/shortcut-test',\n\n\t\/\/ Shortcut category (possible values global, block, selection)\n\tcategory: 'global',\n\n\t\/\/ Shortcut description\n\tdescription: 'My first shortcut',\n\n\t\/\/ The key combination that triggers the shortcut\n\tkeyCombination: {\n\n\t\t\/\/ Available modifiers:\n\t\t\/\/ primary, primaryShift, primaryAlt,\n\t\t\/\/ secondary, access, ctrl, alt,\n\t\t\/\/ ctrlShift, shift, shiftAlt\n\t\tmodifier: 'alt',\n\t\tcharacter: 'w',\n\t},\n\n\t\/\/ An alias for the key combination\n\taliases: [\n\t\t{\n\t\t\tmodifier: 'primary',\n\t\t\tcharacter: 'q',\n\t\t},\n\t],\n} );<\/code><\/pre>\n![\"Een](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/een-sneltoets-aangepaste.jpg\")
useShortcut<\/code>:<\/p>\nimport { useShortcut } from '@wordpress\/keyboard-shortcuts';\nimport { useCallback } from '@wordpress\/element';\n\nconst MyComponent = () => {\n\tuseShortcut(\n\n\t\t'plugin\/shortcut-test',\n\n\t\tuseCallback(\n\t\t\t( event ) => {\n\t\t\t\t\/\/ Do something\n\t\t\t},\n\t\t\t[]\n\t\t)\n\t);\n}<\/code><\/pre>\nGradient Theme APIs<\/h4>\n
editor-gradient-presets<\/code> theme-support optie, waarmee thema-ontwikkelaars de standaard presets kunnen overschrijven en hun eigen kunnen defini\u00ebren<\/a>:<\/p>\nadd_theme_support(\n\t'editor-gradient-presets',\n\tarray(\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',\n\t\t\t'slug'\t\t=> 'cedetblue-chartreuse'\n\t\t),\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'Chocolate to Coral', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',\n\t\t\t'slug'\t\t=> 'chocolate-to-coral',\n\t\t),\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',\n\t\t\t'slug'\t\t=> 'darkmagenta-to-darkorchid',\n\t\t),\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',\n\t\t\t'slug'\t\t=> 'deepskyblue-to-dodgerblue',\n\t\t),\n\t)\n);<\/code><\/pre>\n![\"Custom](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/custom-gradient-presets.jpg\")
\n
name<\/code>: een voor jou logische label voor de tooltip met informatie over de gradient. Dit is vooral handig voor schermlezers en gebruikers die moeite hebben met het onderscheiden van bepaalde kleuren.<\/li>\ngradient<\/code>: de CSS-waarden voor de gradient.<\/li>\nslug<\/code>: een identifier om de CSS-classes te genereren die worden gebruikt in de blok-editor.<\/li>\n<\/ul>\n![\"Custom](\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/gradient-tooltip.jpg\")
disable-custom-gradients<\/code>:<\/p>\nadd_theme_support( 'disable-custom-gradients' );<\/code><\/pre>\ndisable-custom-gradients<\/code> en editor-gradient-presets<\/code>:<\/p>\nadd_theme_support( 'disable-custom-gradients' );\nadd_theme_support( 'editor-gradient-presets', array() );<\/code><\/pre>\nVeranderingen aan markup en style binnen de blok-editor<\/h4>\n
\n
editor-<\/code> is nu verwijderd uit de scripts van block-editor. Ontwikkelaars mogen nu alleen het prefix block-editor-<\/code><\/li>\nedit-post-layout__content<\/code> is ook verwijderd uit de DOM van de blok-editor.<\/li>\ndiv<\/code> wrappers zijn verwijderd uit blokken en RichText, omdat ze overbodig waren. Deze verandering zorgt voor een aanzienlijke prestatieverbetering en vereenvoudigt de DOM-structuur, iets wat zeker zal worden gewaardeerd door ontwikkelaars van blokken en thema’s<\/a>.<\/li>\nScaffolding van blokken<\/h4>\n
$ npm init @wordpress\/block block-name<\/code><\/pre>\nBlock Collections<\/h4>\n
registerBlockCollection( namespace, { title, icon } );<\/code><\/pre>\n\n
namespace<\/code>: komt overeen met een blok-prefix.<\/li>\ntitle<\/code>: dit is het label dat wordt weergegeven in de blok-inserter.<\/li>\nicon<\/code>: dit is het icoon dat wordt getoond met de title in de blok-inserter<\/li>\n<\/ul>\nBlock Variations<\/h4>\n