Gutenberg heeft zich ontwikkeld tot een krachtige en zeer aanpasbare editor. Naast de robuuste out-of-the-box features kunnen WordPress ontwikkelaars tegenwoordig ook gebruik maken van een rijke set aan API’s om eenvoudig custom functies in hun websites te integreren. Deze uitbreidbaarheid maakt een hoge mate van ontwikkeling op maat mogelijk, waardoor ontwikkelaars zeer gepersonaliseerde en functierijke online ervaringen kunnen creëren.
In dit artikel worden twee minder bekende maar krachtige WordPress ontwikkelfuncties besproken: Stijlvariaties (ook bekend als blokstijlen) en Blokvariaties.
Hoewel hun nut in eerste instantie misschien onduidelijk lijkt, zul je verrast zijn hoe nuttig ze zijn en hoe je ze met een kleine tijdsinvestering naadloos kunt integreren in je workflow.
Aan de hand van een project uit de praktijk krijg je inzicht in wat ze zijn en hoe je ze kunt gebruiken. Je kunt dit project op je WordPress site implementeren door eenvoudigweg de code uit deze tutorial te kopiëren en te plakken en eventueel aanpassingen toe te voegen.
Laten we, voordat we in het project duiken, eerst de vereisten bekijken:
- Lokale WordPress ontwikkelomgeving: Hoewel de meesten voldoen, raden we DevKinsta, de lokale ontwikkelsuite van Kinsta, ten zeerste aan. Het is eenvoudig te gebruiken en biedt veel instellingen en tools om snel een lokale WordPress site te starten en te beheren.
- Node.js en npm: Deze zijn essentieel, omdat de Block Editor is gebouwd op React en een bouwproces vereist.
- Basis frontend ontwikkelingsvaardigheden: Het is handig om een basiskennis te hebben van Node.js, JavaScript (met React), PHP en CSS.
Hoewel dit project niet al te complex is, moet je bereid zijn om wat code te schrijven. De volledige code is ook beschikbaar op GitHub.
Tijd om te beginnen!
Blokstijlen versus blokvariaties
Blokstijlen en blokvariaties zijn twee krachtige WordPress functies voor developers. Hoewel hun namen erg op elkaar lijken, verschillen ze in doel en gebruik.
Blokstijlen, ook bekend als stijlvariaties, zijn kant-en-klare sets CSS stijlen waarmee je met één klik kunt veranderen hoe een blok eruit ziet. Nadat je een blokstijl hebt geregistreerd, verschijnt er een knop in de zijbalk van het blok waarmee je een kant-en-klare set stijlen kunt toewijzen aan het blok. Je kunt de stijlen in- en uitschakelen en een voorbeeld van het blok in de editor bekijken.
Stijlvariaties veranderen de attributen van het blok niet. Ze wijzigen alleen het uiterlijk van een blok door een CSS klasse toe te wijzen aan het wrapper element van het blok.
Blokvariaties zijn een krachtiger hulpmiddel omdat je hiermee een vooraf geconfigureerde versie van een blok kunt maken met attributen en binnenblokken. Ze verschijnen ook in de blok inserter applicatie van de editor. In wezen verschijnt een blokvariatie voor de gebruiker alsof het een op zichzelf staand blok is, volledig onafhankelijk van het blok waarop het is gebouwd.
Met blokvariaties kun je het uiterlijk, de begininstellingen en de structuur van een blok aanpassen.
Met dat alles in gedachten, laten we deze hulpmiddelen gebruiken om Gutenberg blokken naar een hoger niveau te tillen!
Een geanimeerd polaroid effect op een Image coreblok
Laten we nu in ons project duiken! We gaan het coreblok Image uitbreiden met een Gutenberg plugin om:
- Een Polaroid stijlvariatie te implementeren: Gebruikers kunnen een charmant polaroid effect toepassen op hun afbeeldingen met een enkele klik vanuit de instellingen zijbalk van het blok.
- Een hover-animatie toe te voegen: We zullen Polaroid stijl afbeeldingen verbeteren met een subtiele hover-animatie.
- Een “Animated Polaroid” blokvariatie te maken: Hiermee kunnen gebruikers snel voorgeconfigureerde polaroidafbeeldingen met een zweefeffect invoegen, rechtstreeks vanuit de blokinvoegtoepassing.
Ben je er klaar voor? Tijd om onze plugin in te stellen!
Omgeving instellen
Voordat we beginnen, moeten we een WordPress ontwikkelomgeving met Node.js opzetten. We gaan ervan uit dat je je lokale WordPress ontwikkelomgeving en de nieuwste versies van Node.js en npm al hebt geïnstalleerd. Als je hulp nodig hebt, bekijk dan onze tutorial over het bouwen van een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor.
Stap 1 – Maak de basisstructuur van de plugin
Voor deze tutorial noemen we onze plugin Image Hacker.
Navigeer naar je plugins map en maak een nieuwe image-hacker map aan. Maak binnen deze map een nieuw image-hacker.php bestand aan (het hoofdbestand van je plugin) en een src submap, waar je de functies van de plugin gaat opbouwen.
Dit is de basisstructuur van je plugin:
/wp-content/plugins/
└── /image-hacker/
├── image-hacker.php
└── /src/Stap 2 – Maak de PHP code
Vervolgens moet je ervoor zorgen dat WordPress je plugin herkent. Om dit te doen, voeg je de volgende code toe aan image-hacker.php:
<?php
/**
* Plugin Name: Image Hacker
* Description: Adds new features to the core Image block
* Version: 1.0.0
* Author: Your Name
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: image-hacker
*/
if ( ! defined( 'ABSPATH' ) )
exit; // Exit if accessed directly.
Stap 3 – Initialiseer npm en installeer dependencies
Open je favoriete opdrachtprompt en navigeer naar de map van je plugin. Voer daar het volgende commando uit:
npm init -yDit commando initialiseert een nieuw package.json bestand, dat de dependencies en scripts van je project bevat.
Vervolgens moet je WordPress scripts en bouwtools zoals webpack en Babel installeren:
npm install @wordpress/plugins @wordpress/scripts --save-devDit commando voegt een map node_modules toe met node dependencies en een bestand package-lock.json. De afbeelding hieronder toont de huidige structuur van je project in Visual Studio Code:
Open vervolgens je package.json en werk de property scripts als volgt bij:
"name": "image-hacker",
"version": "1.0.0",
"main": "index.js",
"scripts":
"build": "wp-scripts build",
"start": "wp-scripts start"
,
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies":
"@wordpress/plugins": "^7.25.0",
"@wordpress/scripts": "^30.18.0"
Merk op dat devDependencies versies kunnen afwijken van de bovenstaande en afhankelijk zijn van de daadwerkelijke versies die in jouw omgeving zijn geïnstalleerd.
Stap 4 – Maak de bronbestanden van je plugin aan
De volgende stap is het aanmaken van de plugin bronbestanden. Navigeer naar de src map en voeg de volgende bestanden toe:
index.jsstyle.scsseditor.scss
De plugin structuur zou er nu zo uit moeten zien:
/wp-content/plugins/
└── /image-hacker/
├── /node-modules/
├── image-hacker.php
├── package.json
├── package-lock.json
└── /src/
├── index.js
├── style.scss
└── editor.scssOpen nu je WordPress admin paneel en navigeer naar het Plugins scherm. Zoek de plugin Image Hacker en activeer deze.
Stap 5 – Neem assets op in het bestand van je plugin
Vervolgens moet je plugin-assets opnemen in het hoofdbestand van de plugin. Voeg het volgende toe aan image-hacker.php:
/**
* Enqueue block editor assets.
*/
function image_hacker_enqueue_editor_assets()
$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
// Enqueue the script with our modifications
wp_enqueue_script(
'image-hacker-script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
// Enqueue the editor-only styles
wp_enqueue_style(
'image-hacker-editor-style',
plugins_url( 'build/editor.css', __FILE__ ),
[],
filemtime( plugin_dir_path( __FILE__ ) . 'build/editor.css' )
);
add_action( 'enqueue_block_editor_assets', 'image_hacker_enqueue_editor_assets' );
/**
* Enqueue frontend and editor assets.
*/
function image_hacker_enqueue_assets()
$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
// Enqueue styles for both frontend and editor
wp_enqueue_style(
'image-hacker-style',
plugins_url( 'build/style-index.css', __FILE__ ),
[],
filemtime( plugin_dir_path( __FILE__ ) . 'build/style-index.css' )
);
add_action( 'enqueue_block_assets', 'image_hacker_enqueue_assets' );Dit is wat deze code doet:
- De action hook
enqueue_block_editor_assetsenquehed hetindex.jsscript en heteditor.cssbestand. - De action hook
enqueue_block_assetscallt het bestandstyle.css.
Merk op dat deze code de .js en .css onderdelen bevat die zich in de /build/ map van je plugin bevinden. Dit betekent dat je, om het te laten werken, het build commando moet uitvoeren in je commandoregel tool:
npm run buildMerk ook op dat als je een bestand met de naam style.scss importeert in index.js, het gecompileerde CSS-bestand niet style.css zal heten, maar style-index.css.
Blokstijl registreren
Je bent klaar met het instellen van je ontwikkelomgeving. Nu kun je verder gaan met het spannende deel van het project en je blokstijlvariatie registreren.
Er zijn verschillende manieren om blokstijlen te registreren en welke je kiest hangt af van je doelen en persoonlijke voorkeuren. Wij zullen de JS-aanpak volgen als we een Gutenberg-plugin bouwen. Open je /src/index.js bestand en plak de volgende code:
// Import the function to register block styles.
import registerBlockStyle from '@wordpress/blocks';
// Import the function to run code only when the DOM is ready.
import domReady from '@wordpress/dom-ready';
// This line tells the build process to include and compile our SCSS file.
import './style.scss';
/**
* Use domReady to run code only when the DOM is ready.
*/
domReady(() =>
// Register our new style variation for the core image block.
registerBlockStyle('core/image',
name: 'polaroid',
label: 'Polaroid',
);
);registerBlockStyle met domReady zorgt ervoor dat de stijlvariatie alleen wordt geregistreerd wanneer het DOM volledig is geladen. Zie ook de officiële documentatie.
Als de stijl Polaroid is geselecteerd, voegt WordPress automatisch de klasse .is-style-polaroid toe aan de blokwrapper.
De volgende stap is het aanleveren van de CSS voor je stijlvariatie. Open je /src/style.scss en voeg de volgende code toe:
.wp-block-image.is-style-polaroid
padding: 15px 15px 70px 15px;
background-color: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
max-width: 360px;
transform: rotate(-3deg);
transition: transform 0.3s ease-in-out;
figure
margin: 0 !important;
img
display: block;
width: 100%;
height: auto;
figcaption
position: absolute;
bottom: 15px;
left: 0;
right: 0;
text-align: center;
font-family: 'Permanent Marker', cursive;
color: #333;
font-size: 18px;
Sla je code op, voer npm run build uit en ga naar je WordPress dashboard. Maak een nieuwe post of pagina en voeg een afbeelding toe. Als je de afbeelding hebt geselecteerd, klik je op het label Styles in de zijbalk van het blok en selecteer je Polaroid.
Voeg een onderschrift toe, sla het bericht op en bekijk het resultaat op de front-end. Je zou een afbeelding in Polaroid-stijl moeten zien met een mooi cursief onderschrift.
De logica bouwen
De volgende stap is het bouwen van de logica om de afbeelding te animeren. We zullen een eenvoudige animatie maken met behulp van de CSS property transform. Om te beginnen voeg je het volgende blok toe aan je src/style.scss:
.wp-block-image.is-style-polaroid.has-image-animation:hover
transform: rotate(0deg) scale(1.05);
Deze code zorgt ervoor dat het hover-effect alleen wordt toegepast als het blok een Polaroid afbeelding is en een has-image-animation klasse heeft van de toolbar toggle.
Nu heb je de logica nodig om de CSS-klasse toe te voegen aan de afbeeldingscontainer, die een figure element is. Daarvoor heb je een paar filters en callbackfuncties nodig.
Voeg eerst de volgende regel toe aan je src/index.js bestand:
import addFilter from '@wordpress/hooks';Stap 1. Voeg een nieuw attribuut toe aan het Image blok
Je gaat addFilter gebruiken om het coreblok Image te manipuleren. Eerst voeg je een nieuw imageAnimation attribuut toe aan het blok Image:
function addImageAnimationAttribute( settings, name )
if ( name !== 'core/image' )
return settings;
settings.attributes =
...settings.attributes,
imageAnimation:
type: 'boolean',
default: false,
,
;
return settings;
addFilter(
'blocks.registerBlockType',
'image-hacker/add-image-animation-attribute',
addImageAnimationAttribute
);De callback functie addImageAnimationAttribute neemt twee argumenten:
settings– Een array van huidige blokattributenname– Specificeert de naam van het blok waarvan je de attributen wilt wijzigen.
De functie retourneert vervolgens de bijgewerkte matrix van attributen.
Stap 2. Voeg een toggle knop toe aan het Image blok
Vervolgens moet je een toggle/regelaar toevoegen aan de werkbalk van het afbeeldingsblok om de animatie in te schakelen.
Voeg eerst de volgende imports toe aan het bestand index.js:
import createHigherOrderComponent from '@wordpress/compose';
import Fragment from '@wordpress/element';
import BlockControls from '@wordpress/block-editor';
import ToolbarGroup, ToolbarButton from '@wordpress/components';
import __ from '@wordpress/i18n';Voeg vervolgens de volgende code toe aan het einde van het bestand:
const withPolaroidControls = createHigherOrderComponent((BlockEdit) =>
return (props) =>
if (props.name !== 'core/image')
return <BlockEdit ...props />;
const attributes, setAttributes, isSelected = props;
const imageAnimation, className, lightbox = attributes;
return (
<Fragment>
<BlockEdit ...props />
<BlockControls>
<ToolbarGroup>
<ToolbarButton
icon="format-image"
label=__('Toggle Animation', 'image-hacker')
isActive=imageAnimation
onClick=() =>
setAttributes( imageAnimation: !imageAnimation )
/>
</ToolbarGroup>
</BlockControls>
</Fragment>
);
;
, 'withPolaroidControls');
addFilter(
'editor.BlockEdit',
'image-hacker/with-polaroid-controls',
withPolaroidControls
);Dit is wat deze code doet:
- De functie
createHigherOrderComponentmaakt een higher-order component (HOC) dieBlockEditwrapt, wat de hoofdcomponent is die verantwoordelijk is voor het weergeven van blokken in de editor. - De HOC onderschept de component en controleert of het een Image blok is. Dit zorgt ervoor dat al je bewerkingen alleen van toepassing zijn op het Image blok.
- We gebruiken de destructuring opdracht om de vereiste properties en attributen uit de objecten
propsenattributeste halen. - We gebruiken
BlockControls,ToolbarGroup, enToolbarButtoncomponenten om een knop Toggle Animation toe te voegen aan de werkbalk van het blok. isActiveHiermee wordt de standaardtoestand vanimageAnimationonClickschakelt de waardeimageAnimationom.
Nu heb je een attribuut en een knop. Als je echter op de knop klikt, gebeurt er niets.
Stap 3. Voeg de CSS klasse toe aan het wrapper element
De volgende stap is het toepassen van de has-image-animation klasse op het figure element dat de afbeelding wrapt. Om dat te doen, heb je een filter nodig waarmee je de CSS-klasse kunt toewijzen aan de afbeelding in de front-end.
Voeg de volgende code toe aan het bestand index.js:
function addAnimationFrontendClass(extraProps, blockType, attributes)
if (blockType.name === 'core/image' && attributes.imageAnimation)
extraProps.className = `$extraProps.className has-image-animation`;
return extraProps;
addFilter(
'blocks.getSaveContent.extraProps',
'image-hacker/add-animation-frontend-class',
addAnimationFrontendClass
);Deze code voegt dynamisch de CSS klasse has-image-animation toe aan het figure element wanneer het imageAnimation attribuut is ingesteld op true.
Laten we proberen in detail te begrijpen wat er gebeurt.
addFilterhaakt in op de processen van de editor om gegevens of gedrag te wijzigen.blocks.getSaveContent.extraPropsis de specifieke hook waarop we ons richten.extraPropsis een speciale hook waarmee je extra HTML-attributen kunt toevoegen aan het wrapper element.image-hacker/add-animation-classis de unieke naam van je filter.addAnimationFrontendClassis de naam van de callback functie die elke keer wordt uitgevoerd als deblocks.getSaveContent.extraPropshook wordt uitgevoerd. Deze functie neemt 3 argumenten:extraProps: Een object met de properties van het wrapper element van het blok, zoalsclassName.blockType: Een object met details van het blok, zoals dename(core/image).attributes: Een object met blokattributen
- De logica van de functie zorgt ervoor dat de code alleen wordt uitgevoerd als
blockType.name === 'core/image'enattributes.imageAnimationtrueis. - Als beide voorwaarden waar zijn, retourneert de functie een nieuw object
propsmethas-image-animationtoegevoegd aan het bestaande klasse-object.
Nu kun je het zelf proberen. Voeg een afbeelding toe aan je inhoud, selecteer de Polaroid stijl in de zijbalk van het blok en klik op de knop Toggle Animation in de werkbalk van het blok. Sla je bericht op en controleer het resultaat op de front-end. Je afbeelding zou moeten draaien als je er met de muis overheen gaat.
Blokvariatie registreren
Blokvariaties zijn vooraf geconfigureerde versies van een blok, met een set attributen en geneste blokken. WordPress behandelt blokvariaties als onafhankelijke blokken, maakt ze beschikbaar in de Block Inserter en markeert ze met een custom pictogram.
Je kunt een blokvariatie gebruiken om een nieuwe versie van het Image blok te maken, waarbij de Polaroid-stijl standaard wordt toegepast.
De eerste stap is het importeren van de registerBlockVariation functie in je /src/index.js bestand:
import registerBlockStyle, registerBlockVariation from '@wordpress/blocks';Vervolgens voeg je een call naar de registerBlockVariation functie toe binnen domReady(), direct onder registerBlockStyle:
domReady(() =>
// Register a style variation for the image block.
registerBlockStyle('core/image',
name: 'polaroid',
label: 'Polaroid',
);
// Register a block variation of the image block
registerBlockVariation('core/image',
name: 'animated-polaroid',
title: 'Animated Polaroid',
icon: 'image-filter',
attributes:
className: 'is-style-polaroid',
imageAnimation: true,
,
scope: ['inserter'],
);
);De functie registerBlockVariation maakt een variatie voor een bestaand blok. Het accepteert twee argumenten: de naam van het blok en een object dat de variatie definieert. (Zie ook de inleiding tot blokvariaties en de blokvariaties API documentatie).
Sla je bestand op, voer de build uit om je wijzigingen toe te passen en ga dan terug naar je WordPress admin. Maak een nieuw bericht en zoek naar het Animated Polaroid blok in de Block Inserter.
Testen en debuggen
Laten we niet vergeten te testen. Voeg een of meer afbeeldingen toe aan een nieuw bericht. Selecteer de polaroidstijl voor elke afbeelding, schakel de animatie in en voeg links toe. Voer ook tests uit met het Gallery blok.
Alles lijkt te werken zoals verwacht. Echter, het toevoegen van een link met een lightbox effect aan een afbeelding met de Polaroid stijl geeft geen mooi resultaat.
Dit vreemde gedrag lijkt te wijten te zijn aan een compatibiliteitsprobleem tussen de WordPress lightbox en CSS overgangen.
Om een lang, ingewikkeld foutopsporingsproces te voorkomen, kun je misschien de optie Enlarge on click uitschakelen en een waarschuwing toevoegen om gebruikers te laten weten dat de lightbox is uitgeschakeld.
Je moet eerst wat extra bronnen importeren. Hieronder staat de volledige lijst met bronnen die zijn geïmporteerd uit het /src/index.js bestand:
import registerBlockStyle, registerBlockVariation from '@wordpress/blocks';
import domReady from '@wordpress/dom-ready';
import addFilter from '@wordpress/hooks';
import createHigherOrderComponent from '@wordpress/compose';
import Fragment, useEffect from '@wordpress/element';
import InspectorControls, BlockControls from '@wordpress/block-editor';
import PanelBody, Notice, ToolbarGroup, ToolbarButton from '@wordpress/components';
import __ from '@wordpress/i18n';
import useDispatch from '@wordpress/data';
import './style.scss';We hebben de volgende imports toegevoegd:
useEffectvan@wordpress/element. (Zie docs)InspectorControlsuit@wordpress/block-editor(Zie docs).PanelBodyenNoticevan@wordpress/components(Zie documenten).useDispatchvan@wordpress/data. (Zie WordPress blog for developers)
Wijzig nu de functie withPolaroidControls als volgt:
const withPolaroidControls = createHigherOrderComponent((BlockEdit) => {
return (props) => {
if (props.name !== 'core/image')
return <BlockEdit ...props />;
const attributes, setAttributes, isSelected = props;
const imageAnimation, className, lightbox = attributes;
const isPolaroid = className?.includes('is-style-polaroid');
const createNotice = useDispatch('core/notices');
useEffect(() =>
if (isPolaroid && lightbox?.enabled)
// Disable the lightbox to prevent the conflict.
setAttributes( lightbox: ...lightbox, enabled: false );
// Show the user a temporary 'snackbar' notice.
createNotice(
'warning', // The type of notice (info, success, warning, error)
__('Lightbox disabled for Polaroid style.', 'image-hacker'),
type: 'snackbar',
isDismissible: true,
);
, [isPolaroid, lightbox]);
return (
<Fragment>
<BlockEdit ...props />
<BlockControls>
<ToolbarGroup>
<ToolbarButton
icon="format-image"
label=__('Toggle Animation', 'image-hacker')
isActive=imageAnimation
onClick=() =>
setAttributes( imageAnimation: !imageAnimation )
/>
</ToolbarGroup>
</BlockControls>
isSelected && isPolaroid && (
<InspectorControls>
<PanelBody title=__('Polaroid Style', 'image-hacker')>
<Notice status="info" isDismissible=false>
__(
'The "Expand on click" (lightbox) feature is disabled for this style to prevent visual conflicts.',
'image-hacker'
)
</Notice>
</PanelBody>
</InspectorControls>
)
</Fragment>
);
};
}, 'withPolaroidControls');useEffectis een React Hook waarmee “je een component kunt synchroniseren met een extern systeem.” De code wordt uitgevoerd nadat het component is gerenderd en telkens wanneer een waarde in de depedency-array[isPolaroid, lightbox]verandert. De controle wordt alleen uitgevoerd als de gebruiker de polaroidstijl toepast of verwijdert of de lightbox activeert of deactiveert (zie React documentatie).- De voorwaarde
if (isPolaroid() && lightbox.enabled)zorgt ervoor dat de code alleen wordt uitgevoerd als de afbeelding de polaroidstijl heeft en de lightboxoptie is ingeschakeld. - Als de voorwaarde
trueis, wordt de lightbox uitgeschakeld en verschijnt er een tijdelijke waarschuwing. (Zie ook verwijzing naar gegevens over meldingen). - De voorwaarde
isSelected && isPolaroidgenereert een nieuw paneel in de toolbar van het afbeeldingsblok om gebruikers te melden dat de lightbox is uitgeschakeld. In tegenstelling tot de snackbar geeft dit paneel een permanente waarschuwing weer.
Samenvatting
In deze tutorial hebben we ons verdiept in een aantal van de meest interessante en krachtige ontwikkelaarsfuncties van de WordPress block editor door de lens van een echt project: we hebben het kernblok Afbeelding uitgebreid met functionaliteiten die niet standaard beschikbaar zijn, met aangepaste stijlen en animatie-effecten.
We volgden een progressieve verbeteringsaanpak en maakten een blokstijlvariatie voor het Image blok. Hiermee kunnen gebruikers hun afbeeldingen eenvoudig een klassieke Polaroid-look geven.
Vervolgens hebben we een speciale knop toegevoegd aan de werkbalk van het Image blok, waarmee gebruikers een leuk hover-animatie-effect kunnen maken.
Tot slot hebben we alles afgerond door een blokvariatie te maken die standaard is voorgeconfigureerd met de Polaroid stijl- en animatie-instellingen.
We hopen dat de inzichten en technieken die je hebt opgedaan in deze tutorial je in staat zullen stellen om een aantal verrassende aanpassingen te maken voor de coreblokken van Gutenberg!
Veel plezier met coderen!
Kinsta
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.
