Gutenberg a évolué pour devenir un éditeur puissant et hautement personnalisable. Au-delà de ses robustes fonctionnalités prêtes à l’emploi, les développeurs WordPress peuvent désormais tirer parti d’un riche ensemble d’API pour intégrer facilement des fonctionnalités personnalisées à leurs sites web. Cette extensibilité permet un degré remarquable de développement sur mesure, permettant aux développeurs de créer des expériences en ligne hautement personnalisées et riches en fonctionnalités.
Cet article explore deux fonctions de développement WordPress moins connues mais puissantes : Les variations de style (également connues sous le nom de styles de blocs) et les variations de blocs.
Bien que leur utilité puisse sembler obscure au premier abord, vous serez surpris de voir à quel point elles sont utiles et comment un petit investissement de temps vous permettra de les intégrer à votre flux de travail de façon transparente.
Vous comprendrez concrètement ce qu’elles sont et comment les utiliser grâce à un projet concret. Vous pouvez mettre en œuvre ce projet sur votre site WordPress en copiant et collant simplement le code de ce tutoriel et en y ajoutant éventuellement des personnalisations.
Avant de nous plonger dans le projet, passons rapidement en revue les prérequis :
- Environnement de développement local de WordPress : Bien que n’importe lequel suffise, nous recommandons vivement DevKinsta, la suite de développement local de Kinsta. Elle est facile à utiliser et offre de nombreux réglages et outils pour lancer et gérer rapidement un site WordPress local.
- Node.js et npm : Ces éléments sont essentiels, car l’éditeur de blocs est construit sur React et nécessite un processus de construction.
- Compétences de base en développement frontend : Il sera bénéfique d’avoir une compréhension de base de Node.js, JavaScript (avec React), PHP et CSS.
Bien que ce projet ne soit pas excessivement complexe, soiyez prêt à écrire un peu de code. Le code complet est également disponible sur GitHub.
Commençons !
Styles de blocs et variations de blocs
Les styles de blocs et les variations de blocs sont deux fonctions puissantes de WordPress pour les développeurs. Bien que leurs noms semblent assez similaires, ils diffèrent en termes d’objectif et d’utilisation.
Les styles de bloc, également connus sous le nom de variations de style, sont des ensembles de styles CSS prédéfinis qui vous permettent de modifier l’apparence d’un bloc en un seul clic. Après avoir enregistré un style de bloc, un bouton apparaît dans la colonne latérale du bloc pour attribuer un ensemble de styles prédéfinis au bloc. Vous pouvez activer et désactiver les styles et prévisualiser le bloc dans l’éditeur en temps réel.
Les variations de style ne modifient pas les attributs du bloc. Elles modifient uniquement l’apparence d’un bloc en attribuant une classe CSS à l’élément enveloppant du bloc.
Les variations de bloc sont un outil plus puissant car elles vous permettent de créer une version préconfigurée d’un bloc avec des attributs et des blocs internes. Elles apparaissent également dans l’insertion de blocs de l’éditeur. Essentiellement, une variation de bloc apparaît à l’utilisateur comme s’il s’agissait d’un bloc autonome, complètement indépendant du bloc sur lequel il est construit.
Les variations de bloc permettent de personnaliser l’apparence, les réglages initiaux et la structure d’un bloc.
Avec tout cela à l’esprit, utilisons ces outils pour faire passer les blocs Gutenberg au niveau supérieur !
Un effet polaroïd animé sur un bloc Image de base
Maintenant, plongeons dans notre projet ! Nous allons étendre le bloc Image de base avec une extension Gutenberg pour :
- Mettre en œuvre une variation de style Polaroïd : Les utilisateurs peuvent appliquer un charmant effet polaroïd à leurs images en un seul clic depuis la colonne latérale des réglages du bloc.
- Ajouter une animation de survol : Nous allons améliorer les images de style polaroïd avec une subtile animation de survol.
- Créer une variante de bloc « Animated Polaroid » : Cela permettra aux utilisateurs d’insérer rapidement des images polaroïd préconfigurées avec un effet de survol directement à partir de l’outil d’insertion de blocs.
Êtes-vous prêt ? Configurons notre extension !
Configuration de l’environnement
Avant de commencer, nous devons mettre en place un environnement de développement WordPress avec Node.js. Nous supposons que vous avez déjà installé votre environnement de développement WordPress local et les dernières versions de Node.js et de npm. Si vous avez besoin d’aide, consultez notre tutoriel sur la construction d’une extension Gutenberg pour ajouter des fonctionnalités à l’éditeur de blocs.
Étape 1 – Créer la structure de base du plugin.
Pour ce tutoriel, nous nommerons notre extension Image Hacker.
Naviguez dans votre répertoire plugins et créez un nouveau dossier image-hacker. Dans ce dossier, créez un nouveau fichier image-hacker.php (le fichier principal de votre extension) et un sous-dossier src, dans lequel vous allez construire les fonctionnalités de l’extension.
Voici la structure de base de votre extension :
/wp-content/plugins/
└── /image-hacker/
├── image-hacker.php
└── /src/Étape 2 – Créer le code PHP
Ensuite, vous devez vous assurer que WordPress reconnaît votre extension. Pour cela, ajoutez le code suivant à 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.
}Étape 3 – Initialiser npm et installer les dépendances
Ouvrez votre de ligne de commande préféré et naviguez jusqu’au répertoire de votre extension. Une fois là, exécutez la commande suivante :
npm init -yCette commande initialise un nouveau fichier package.json, qui inclut les dépendances et les scripts de votre projet.
Ensuite, vous devez installer les scripts WordPress et les outils de construction tels que webpack et Babel :
npm install @wordpress/plugins @wordpress/scripts --save-devCette commande ajoute un dossier node_modules avec des dépendances de nœuds et un fichier package-lock.json. L’image ci-dessous montre la structure actuelle de votre projet dans Visual Studio Code:
Ensuite, ouvrez votre package.json et mettez à jour la propriété scripts comme suit :
{
"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"
}
}Notez que les versions de devDependencies peuvent différer de ce qui précède et dépendent des versions réelles installées dans votre environnement.
Étape 4 – Créer les fichiers sources de votre plugin
L’étape suivante consiste à créer les fichiers sources de l’extension. Naviguez jusqu’au dossier src et ajoutez les fichiers suivants :
index.jsstyle.scsseditor.scss
La structure de l’extension devrait maintenant ressembler à ceci :
/wp-content/plugins/
└── /image-hacker/
├── /node-modules/
├── image-hacker.php
├── package.json
├── package-lock.json
└── /src/
├── index.js
├── style.scss
└── editor.scssOuvrez maintenant votre panneau d’administration WordPress et naviguez jusqu’à l’écran Extensions Trouvez l’extension Image Hacker et activez-la.
Étape 5 – Inclure les ressources dans le fichier de votre plugin
Ensuite, vous devez inclure les ressources de l’extension dans le fichier principal de l’extension. Ajoutez ce qui suit à 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' );Voici ce que fait ce code :
- Le crochet d’action
enqueue_block_editor_assetsmet en file d’attente le scriptindex.jset le fichiereditor.css. - Le crochet d’action
enqueue_block_assetsappelle le fichierstyle.css.
Notez que ce code inclut les ressources .js et .css situés dans le dossier /build/ de votre extension. Cela signifie que, pour le faire fonctionner, vous devez exécuter la commande build dans votre outil de ligne de commande :
npm run buildNotez également que lorsque vous importez un fichier appelé style.scss dans index.js, le fichier CSS compilé ne s’appellera pas style.css mais plutôt style-index.css.
Enregistrer le style de bloc
Vous avez terminé la configuration de votre environnement de développement. Vous pouvez maintenant passer à la partie la plus excitante du projet et enregistrer votre variation de style de bloc.
Il existe plusieurs façons d’enregistrer les styles de blocs, et celle que vous choisissez dépend de vos objectifs et de vos préférences personnelles. Nous allons suivre l’approche JS dans le cadre de la construction d’une extension Gutenberg. Ouvrez votre fichier /src/index.js et collez le code suivant :
// 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 with domReady garantit que la variation de style n’est enregistrée que lorsque le DOM est entièrement chargé. Voir aussi la documentation officielle.
Lorsque le style Polaroid est sélectionné, WordPress ajoute automatiquement la classe .is-style-polaroid à l’enveloppe du bloc.
L’étape suivante consiste à fournir le CSS pour votre variation de style. Ouvrez votre /src/style.scss et ajoutez le code suivant :
.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;
}
}Enregistrez votre code, exécute npm run build, et allez sur votre tableau de bord WordPress. Créez un nouvel article ou une nouvelle page et ajoutez une image. Une fois l’image sélectionnée, cliquez sur le libellé Styles dans la colonne latérale du bloc et sélectionnez Polaroid.
Ajoutez une légende, enregistrez la publication et vérifiez le résultat sur l’interface publique. Vous devriez voir une image de style polaroïd avec une belle légende en italique.
Construire la logique
L’étape suivante consiste à construire la logique pour animer l’image. Nous allons créer une animation simple en utilisant la propriété CSS transform. Pour commencer, ajoutez le bloc suivant à votre fichier src/style.scss :
.wp-block-image.is-style-polaroid.has-image-animation:hover {
transform: rotate(0deg) scale(1.05);
}Ce code garantit que l’effet de survol n’est appliqué que si le bloc est une image Polaroid et qu’une classe has-image-animation est appliquée à partir de la bascule de la barre d’outils.
Maintenant, vous avez besoin d’une logique pour ajouter la classe CSS au conteneur de l’image, qui est un élément figure. Pour cela, vous avez besoin de quelques filtres et fonctions de rappel.
Tout d’abord, ajoutez la ligne suivante à votre fichier src/index.js :
import { addFilter } from '@wordpress/hooks';Étape 1. Ajouter un nouvel attribut au bloc Image
Vous allez utiliser addFilter pour manipuler le bloc principal Image. Tout d’abord, vous ajoutez un nouvel attribut imageAnimation au bloc 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
);La fonction de rappel addImageAnimationAttribute prend deux arguments :
settings– Un tableau des attributs actuels du bloc.name– Spécifie le nom du bloc dont vous voulez modifier les attributs.
La fonction renvoie ensuite le tableau d’attributs mis à jour.
Étape 2. Ajouter une commande à bascule au bloc Image
Ensuite, vous devrez ajouter un contrôle à la barre d’outils du bloc Image pour activer l’animation.
Tout d’abord, ajoutez les imports suivants au fichier 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';Puis ajoutez le code suivant à la fin du fichier :
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
);Voici ce que fait ce code :
- La fonction
createHigherOrderComponentcrée un composant d’ordre supérieur (Higher-Order Component ou HOC) qui enveloppeBlockEdit, qui est le composant principal responsable de l’affichage des blocs dans l’éditeur. - Le HOC intercepte le composant et vérifie s’il s’agit d’un bloc Image. Cela permet de s’assurer que toutes tes modifications ne s’appliquent qu’au bloc Image.
- Nous utilisons l’affectation de déstructuration pour extraire les propriétés et attributs nécessaires des objets
propsetattributes. - Nous utilisons
BlockControls,ToolbarGroup, etToolbarButtonpour ajouter un bouton Basculer l’animation à la barre d’outils du bloc. isActivedéfinit l’état par défaut deimageAnimationonClickfait basculer la valeur deimageAnimation.
Tu as maintenant un attribut et un bouton. Cependant, si tu cliques sur le bouton, rien ne se passe.
Étape 3. Ajouter la classe CSS à l’élément enveloppant
L’étape suivante consiste à appliquer la classe has-image-animation à l’élément figure qui enveloppe l’image. Pour cela, vous avez besoin d’un filtre qui vous permette d’attribuer la classe CSS à l’image dans le frontend.
Ajoutez le code suivant au fichier 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
);Ce code ajoute dynamiquement la classe CSS has-image-animation à l’élément figure lorsque l’attribut imageAnimation est défini sur true.
Essayons de comprendre ce qui se passe en détail.
addFilterLes crochets s’insèrent dans les processus de l’éditeur pour modifier les données ou le comportement.blocks.getSaveContent.extraPropsest le crochet spécifique que nous visons.extraPropsest un crochet spécial qui vous permet d’ajouter des attributs HTML supplémentaires à l’élément wrapper.image-hacker/add-animation-classest le nom unique de votre filtre.addAnimationFrontendClassest le nom de la fonction de rappel qui s’exécute chaque fois que le crochetblocks.getSaveContent.extraPropss’exécute. Cette fonction prend 3 arguments :extraProps: Un objet contenant les propriétés de l’élément enveloppant du bloc, tel queclassName.blockType: Un objet contenant des détails sur le bloc, comme sonname(core/image).attributes: Un objet contenant les attributs du bloc.
- La logique de la fonction garantit que le code ne s’exécute que lorsque
blockType.name === 'core/image'etattributes.imageAnimationsonttrue. - Si les deux conditions sont vraies, la fonction renvoie un nouvel objet
propsavechas-image-animationajouté à l’objet de classe existant.
Vous pouvez maintenant l’essayer vous-même. Ajoutez une image à votre contenu, sélectionne le style Polaroid dans la colonne latérale du bloc et cliquez sur le bouton Toggle Animation dans la barre d’outils du bloc. Sauvegardez votre publication et vérifie le résultat sur l’interface publique. Votre image devrait pivoter lorsque vous la survolez.
Enregistrer une variation de bloc
Les variations de bloc sont des versions préconfigurées d’un bloc, avec un ensemble d’attributs et de blocs imbriqués. WordPress traite les variations de bloc comme des blocs indépendants, en les rendant disponibles dans l’insertion de bloc et en les marquant avec une icône personnalisée.
Vous pouvez utiliser une variation de bloc pour créer une nouvelle version du bloc Image avec le style Polaroïd appliqué par défaut.
La première étape consiste à importer la fonction registerBlockVariation dans ton fichier /src/index.js :
import { registerBlockStyle, registerBlockVariation } from '@wordpress/blocks';Ensuite, vous ajoutez un appel à la fonction registerBlockVariation à l’intérieur de domReady(), juste en dessous de 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'],
});
});La fonction registerBlockVariation crée une variation pour un bloc existant. Elle accepte deux arguments : le nom du bloc et un objet définissant la variation. (Voir également l’introduction aux variations de blocs et la documentation de l’API Variations de blocs).
Enregistrez votre fichier, exécutez le build pour appliquer vos modifications, puis retournez dans votre administration WordPress. Créez un nouvel article et recherchez le bloc Animated Polaroid dans l’insertion de blocs.
Test et débogage
Faisons quelques tests. Ajoutez une ou plusieurs images à un nouvelle publication. Sélectionnez le style Polaroïd pour chaque image, activez l’animation et ajoutez des liens. Effectuez également des tests avec le bloc Galerie.
Tout semble fonctionner comme prévu. Cependant, l’ajout d’un lien avec un effet de visionneuse à une image avec le style Polaroïd ne produit pas un beau résultat.
Ce comportement étrange semble être dû à un problème de compatibilité entre la visionneuse de WordPress et les transitions CSS.
Pour éviter un processus de débogage long et complexe, vous pouvez désactiver l’option Enlarge on click et ajouter un avertissement pour prévenir les utilisateurs que la visionneuse est désactivée.
Vous devez d’abord importer quelques ressources supplémentaires. Vous trouverez ci-dessous la liste complète des ressources importées du fichier /src/index.js :
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';Nous avons ajouté les importations suivantes :
useEffectde@wordpress/element(Voir docs)InspectorControlsde@wordpress/block-editor(Voir les docs).PanelBodyetNoticede@wordpress/components(Voir docs).useDispatchde@wordpress/data. (Voir le blog du développeur WordPress)
Maintenant, modifiez la fonction withPolaroidControls comme suit :
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');useEffectest un Hook React qui « vous permet de synchroniser un composant avec un système externe ». Le code est exécuté après le rendu du composant et à chaque fois qu’une valeur du tableau de dépendances[isPolaroid, lightbox]change. La vérification ne s’exécute que lorsque l’utilisateur applique ou supprime le style Polaroid ou qu’il active ou désactive la visionneuse. (Voir la documentation de React.)- La condition
if (isPolaroid() && lightbox.enabled)garantit que le code ne s’exécute que si l’image a le style Polaroid et que l’option visionneuse est activée. - Si la condition est
true, la visionneuse est désactivée et un avis d’avertissement temporaire apparaît. (Voir également la référence de données Avis). - La condition
isSelected && isPolaroidgénère un nouveau panneau dans la barre d’outils du bloc d’images pour avertir les utilisateurs que la visionneuse est désactivée. Contrairement à la barre d’outils, ce panneau affiche un avertissement permanent.
Résumé
Dans ce tutoriel, nous avons plongé dans certaines des fonctionnalités les plus intéressantes et les plus puissantes de l’éditeur de blocs de WordPress à travers l’objectif d’un projet réel : nous avons étendu le bloc principal Image avec des fonctionnalités qui ne sont pas disponibles normalement, avec des styles personnalisés et des effets d’animation.
Nous avons suivi une approche d’amélioration progressive, en créant une variation de style pour le bloc Image. Cela permet aux utilisateurs de donner à leurs images un aspect polaroïd classique en toute simplicité.
Ensuite, nous avons ajouté un bouton dédié à la barre d’outils du bloc Image, permettant aux utilisateurs de créer un effet d’animation captivant au survol.
Enfin, nous avons terminé en créant une variation de bloc préconfigurée avec le style Polaroid et les réglages d’animation appliqués par défaut.
Nous espérons que les connaissances et les techniques que vous avez acquises grâce à ce tutoriel vous donneront les moyens de créer des personnalisations vraiment surprenantes pour les blocs principaux de Gutenberg !
Bon codage !
Carlo est un passionné de webdesign et de développement frontend. Il joue avec WordPress depuis plus de 10 ans, notamment en collaboration avec des universités et des établissements d'enseignement italiens et européens. Il a écrit des dizaines d'articles et de guides sur WordPress, publiés à la fois sur des sites web italiens et internationaux, ainsi que dans des magazines imprimés. Vous pouvez trouver Carlo sur X et LinkedIn.
