Créez vos propres blocs WordPress : Maîtrisez le pouvoir de personnalisation

Dans l’univers de WordPress, la personnalisation est essentielle pour créer des sites web uniques et attrayants. L’une des meilleures façons d’ajouter de la personnalisation à votre site est de développer vos propres blocs WordPress. Dans cet article, je vais vous guider à travers les compétences nécessaires pour développer des blocs, les avantages de le faire et vous présenter deux méthodes populaires : Carbon Fields et le module @wordpress/create-block. Que vous soyez développeur chevronné ou simplement curieux, préparez-vous à plonger dans l’univers passionnant de la création de blocs WordPress.

Cet article fait suite à celui sur les développeurs et wordpress en le complétant un peu sur le sujet.

Les compétences nécessaires pour développer des blocs WordPress :

Pour développer des blocs WordPress, il est utile de posséder certaines compétences techniques. Voici quelques-unes des compétences clés que vous devriez maîtriser :

Connaissance de base de WordPress : Une compréhension solide du fonctionnement de WordPress et de son architecture est essentielle pour développer des blocs efficaces.
Maîtrise de HTML, CSS et JavaScript : Une connaissance approfondie de ces langages de programmation est nécessaire pour développer des blocs WordPress personnalisés. Vous devez être à l’aise avec la structuration des éléments HTML, la mise en forme des styles CSS et l’ajout de fonctionnalités dynamiques avec JavaScript.
Familiarité avec Gutenberg : Gutenberg est l’éditeur de blocs intégré à WordPress depuis la version 5.0. Vous devez vous familiariser avec son fonctionnement, ses composants et ses APIs pour développer des blocs compatibles avec cet éditeur.

Selon la méthode utilisée : Carbon_Field permettra la création de block gutenberg gérés en PHP, et permettra également de développer des champs personnalisés (meta_box) pour wordpress, en revanche il disposera de moins de possibilités d’intégrations de fonctionnalités. A l’inverse @wordpress/create-block permettra une meilleur intégration à wordpress (en tant que module officiel) mais nécessitera du développeur une connaissance sur le développement avec React.js.

Les avantages de développer des blocs WordPress :

Le développement de blocs WordPress offre de nombreux avantages, tant pour les développeurs que pour les utilisateurs finaux :

Personnalisation avancée : En développant vos propres blocs, vous avez un contrôle total sur la manière dont votre contenu est affiché. Vous pouvez créer des mises en page uniques, des fonctionnalités personnalisées et des expériences utilisateur optimisées.
Réutilisabilité : Une fois que vous avez développé un bloc, vous pouvez le réutiliser sur plusieurs pages ou sites web. Cela permet de gagner du temps et de maintenir une cohérence visuelle.
Évolutivité : En développant des blocs, vous pouvez facilement ajouter de nouvelles fonctionnalités à votre site web sans avoir à modifier le code existant. Cela rend votre site plus évolutif et facile à mettre à jour.

Les méthodes de développement de blocs WordPress: Maintenant, passons aux deux méthodes populaires pour développer des blocs WordPress : Carbon Fields et le module @wordpress/create-block.

Carbon Fields : Carbon Fields est une bibliothèque légère qui facilite la création de méta-champs, d’options de thème et de blocs personnalisés. Avec Carbon Fields, vous pouvez créer des blocs WordPress avec une syntaxe simple et élégante. Il offre une grande flexibilité et des fonctionnalités avancées pour personnaliser vos blocs.
@wordpress/create-block : Le module @wordpress/create-block est un outil fourni par l’équipe de développement de WordPress lui-même. Il permet de générer rapidement une structure de projet prête à l’emploi pour développer des blocs personnalisés. Cette méthode est idéale pour les développeurs qui souhaitent utiliser les dernières normes et bonnes pratiques recommandées par l’équipe de WordPress.

Créer un block gutenberg avec carbon field :

Téléchargez et installez le plugin Carbon Fields depuis le répertoire des plugins WordPress ou en utilisant la commande Composer si vous utilisez un environnement de développement local.
Charger le hook de carbon_field afin de bien lancer l’enregistrement des blocks que vous allez créer :

add_action( 'carbon_fields_register_fields', 'crb_attach_theme_options' );
function crb_attach_theme_options() {
    // coder vos blocks ici ou importer les fichiers php des block dans cette fonction
}

Étape 2: Création du bloc

Créez un nouveau répertoire dans le répertoire de votre thème WordPress et nommez-le « blocks ».
À l’intérieur du répertoire « blocks », créez un fichier PHP et nommez-le « my-custom-block.php ». C’est ici que vous définirez votre bloc personnalisé.

Étape 3: Configuration du bloc

Ouvrez le fichier « my-custom-block.php » et ajoutez le code suivant pour commencer la configuration de votre bloc :

<?php
use Carbon_Fields\Block;
use Carbon_Fields\Field;

// enregistrement du css pour le block
wp_register_style(
	'my-super-block-style',
	get_stylesheet_directory_uri() . '/path/to/block-style.css'
);

Block::make(__('My Custom Block', 'textdomain'))
    ->add_fields(array(
        Field::make('text', 'title', __('Title', 'textdomain')),
        Field::make('textarea', 'content', __('Content', 'textdomain')),
    ))
    ->set_render_callback(function ($block) {
        $title = $block->get_field('title');
        $content = $block->get_field('content');
        
        // Affichez ici votre contenu de bloc personnalisé selon vos besoins
    })
    ->set_editor_style( 'my-super-block-style' );

Dans le code ci-dessus, nous utilisons Carbon Fields pour créer un bloc personnalisé appelé « My Custom Block » avec deux champs : « Title » et « Content ». Vous pouvez ajouter d’autres champs selon vos besoins. J’y ai aussi ajouté un css personnalisé afin de pouvoir styliser le rendu final du block.

Si vous souhaitez forcer l’aperçu du block gutenberg, vous pouvez mettre votre code à jour de cette façon :

$block = Block::make(__('My Custom Block', 'textdomain'))
    ->add_fields(array(
        Field::make('text', 'title', __('Title', 'textdomain')),
        Field::make('textarea', 'content', __('Content', 'textdomain')),
    ))
    ->set_render_callback(function ($block) {
        $title = $block->get_field('title');
        $content = $block->get_field('content');
        
        // Affichez ici votre contenu de bloc personnalisé selon vos besoins
    })
    ->set_editor_style( 'my-super-block-style' );
$block->settings[ 'mode' ] = 'preview';

Étape 4: Affichage du bloc dans Gutenberg

Enregistrez le fichier « my-custom-block.php » et assurez-vous qu’il est inclus dans le fichier « functions.php » de votre thème WordPress en utilisant la fonction require_once.
Connectez-vous à votre tableau de bord WordPress et créez ou modifiez une page.
Ajoutez un nouveau bloc en cliquant sur le bouton « + » dans l’éditeur Gutenberg.
Recherchez votre bloc personnalisé « My Custom Block » et ajoutez-le à la page.
Remplissez les champs nécessaires dans la barre latérale d’édition.
Visualisez la page pour voir le bloc personnalisé s’afficher.

Félicitations ! Vous avez créé avec succès un bloc Gutenberg personnalisé avec Carbon Fields.

N’hésitez pas à personnaliser davantage votre bloc en ajoutant d’autres champs, en modifiant le code et en explorant les fonctionnalités avancées de Carbon Fields (documentation en ligne). Vous pouvez également consulter la documentation officielle de Carbon Fields pour en savoir plus sur ses fonctionnalités et ses possibilités.

Créer un block avec @wordpress/create-block :

Étape 1: Installation du module @wordpress/create-block

Ouvrez votre terminal et naviguez jusqu’au répertoire de votre thème WordPress.
Exécutez la commande suivante pour installer le module @wordpress/create-block :

npx @wordpress/create-block my-custom-block

Attendez que l’installation soit terminée. Une fois terminée, vous verrez un nouveau répertoire nommé « my-custom-block » créé dans votre thème WordPress.

Étape 2: Configuration du bloc

Ouvrez le répertoire « my-custom-block » dans votre éditeur de code.
Accédez au fichier block.json (dans le dossier src) et modifiez le nom du bloc et les autres paramètres selon vos besoins. Par exemple :

{
    "apiVersion": 2,
    "name": "my-custom-block",
    "title": "My Custom Block",
    "description": "A custom block created with @wordpress/create-block.",
    "category": "common",
    "icon": "smiley",
    "supports": {
        "html": false
    },
    "attributes": {
        "title": {
            "type": "string",
            "source": "text",
            "selector": ".title"
        },
        "content": {
            "type": "string",
            "source": "html",
            "selector": ".content"
        }
    },
    "edit": "./src/edit.js",
    "save": "./src/save.js"
}

Étape 3: Création des fichiers JavaScript pour l’édition et l’enregistrement

Accédez au répertoire src à l’intérieur du répertoire « my-custom-block ».
Ouvrez le fichier edit.js et ajoutez le code suivant pour définir la structure de l’interface d’édition du bloc :

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
 */
import { useBlockProps } from '@wordpress/block-editor';
import { RichText } from '@wordpress/block-editor';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
 *
 * @return {WPElement} Element to render.
 */
export default function Edit() {
	return (
		<div { ...useBlockProps() }>
			<RichText
					tagName="h3"
					className="title"
					value={title}
					onChange={(value) => setAttributes({ title: value })}
					placeholder={__('Enter title', 'textdomain')}
			/>
			<RichText
					tagName="div"
					className="content"
					value={content}
					onChange={(value) => setAttributes({ content: value })}
					placeholder={__('Enter content', 'textdomain')}
			/>
		</div>
	);
}

Ouvrez le fichier save.js et ajoutez le code suivant pour définir la structure du contenu du bloc lors de son enregistrement :

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
 *
 * @return {WPElement} Element to render.
 */
export default function save({ attributes }) {
	const { title, content } = attributes;

	return (
			<div { ...useBlockProps.save() }>
					<h3 className="title">{title}</h3>
					<div className="content" dangerouslySetInnerHTML={{ __html: content }} />
			</div>
	);
}

Étape 4: Ajout d’un fichier CSS personnalisé

Le css personnalisé pour la partie « front-end » du block se rédige dans le fichier « style.scss »
le css spécifique à l’éditeur gutenberg (en administration) se rédige dans le fichier « editor.scss »

Étape 5: Compilation et utilisation du bloc

Ouvrez votre terminal et naviguez jusqu’au répertoire « my-custom-block ».
Exécutez la commande suivante pour compiler les fichiers JavaScript et CSS tout en travaillant sur le code du block :

npm start

Exécutez la commande suivante pour compiler les fichiers JavaScript et CSS une fois le block terminé et ainsi minifier les fichiers :

npm run build

N’oublier pas d’importer dans votre « function.php » le fichier « my-custom-block/my-custom-block.php » créé afin de rendre disponible le block dans l’éditeur.

En développant vos propres blocs WordPress, vous pouvez donner vie à vos idées de conception, offrir une personnalisation avancée et améliorer l’expérience utilisateur sur votre site. Que vous choisissiez Carbon Fields ou le module @wordpress/create-block, l’important est de développer des blocs qui répondent à vos besoins spécifiques. N’hésitez pas à explorer ces méthodes et à expérimenter pour créer des blocs WordPress uniques et performants.

N’oubliez pas de vous familiariser avec les compétences requises, de pratiquer régulièrement et de rester à jour avec les dernières tendances du développement WordPress. Vous serez alors prêt à maîtriser pleinement le pouvoir de personnalisation offert par les blocs WordPress. Bonne création et bon développement !

Les compétences nécessaires pour développer des blocs WordPress :

Les avantages de développer des blocs WordPress :

Créer un block gutenberg avec carbon field :

Créer un block avec @wordpress/create-block :

Articles similaires

Les compétences des développeurs WordPress et leur évolution dans le contexte du Full Site Editing

L’accessibilité du design : Assurer une expérience inclusive grâce à la gestion des couleurs