Depuis WordPress 7.0, il n’est plus nécessaire d’avoir une version pro d’ACF pour déclarer des blocs en PHP. Il est désormais possible de le faire nativement grâce à quelques lignes de code.
Sommaire du cours
Depuis le printemps 2026 et la sortie de WordPress 7.0, vous pouvez désormais déclarer vos blocs en PHP directement dans WordPress.
C’est une bonne nouvelle pour les développeurs PHP qui ne veulent pas apprendre React pour créer des blocs.
De plus, il n’est plus nécessaire d’avoir une licence ACF Pro non plus. Que de bonnes nouvelles ! Et vous allez voir, c’est super simple à déclarer.
Déclarer un bloc en PHP
Pour cela c’est très simple. Utilisez la fonction register_block_type() qui existe déjà depuis un moment et indiquez toutes les informations du bloc conformément à la documentation du block.json.
La magie opère au niveau de l’attribut autoRegister de la sections supports. C’est ici la grosse nouveauté qui permet de déclarer le bloc sans JS.
Le render_callback vous permet de définir le HTML du bloc qui sera affiché dans l’éditeur comme en front.
Une fois le PHP écrit, rafraichissez votre éditeur et vous devriez voir apparaître le bloc dans le menu d’insertion de WordPress :
Et c’est tout ! Plus besoin de JS, pas besoin de compilation. Si vous êtes allergiques à React, c’est la solution idéale.
Ajouter des attributs administrables
Maintenant, pour rendre notre bloc un peu plus intéressant, on va ajouter des attributs, c’est-à-dire des données administrables.
C’est là où WordPress va nous régaler car il va automatiquement déclarer les champs correspondants. On ne va pas avoir certes l’embarras du choix, mais c’est déjà pas mal :
C’est dans la section attributes que l’on va déclarer nos options administrables. Pour chacune d’entre-elles on va devoir :
label: donner un libellé ;type: définir le type : string, integer, boolean…default: définir une valeur par défaut, si besoin ;enum: sera utile pour contraindre des choix.
Votre bloc aura désormais des options qui apparaissent automatiquement dans l’inspecteur, à droite de l’éditeur :
Pas mal non ? Le choix des champs est fait automatiquement en fonction du type de données que vous avez défini.
| Type de donnée | Champ |
|---|---|
| Text | Text |
| Integer | Number |
| Boolean | Checkbox |
| Texte + enum | Select |
Par contre, contrairement aux blocs ACF, ici on n’a pas le choix du type de champ à afficher. On ne peut pas définir un Toggle (on/off) pour le booléen, ce qui est dommage.
Maintenant, pour afficher ces données, il suffit de les récupérer via le paramètre $attributes fournit automatiquement dans render_callback().
Et voilà, le tour est joué. Vous n’avez pas besoin de traiter ces données, WordPress le fait automatiquement pour vous.
Attacher des styles et séparer le template
Afin d’être plus propre dans notre approche, je vous propose que l’on mette le template HTML dans un fichier séparé.
Et comme on risque d’avoir besoin de CSS, on va en profiter pour déclarer une feuille de style rattachée à ce bloc. Cette dernière sera uniquement chargée (et inlinée dans la page) uniquement si le bloc est présent dans celle-ci.
Séparer le template
On va commencer par séparer le template du callback. Et je vous propose que l’on créé un dossier /blocks/ dans notre thème (où j’y glisse également mes blocs ACF) et un sous-dossier portant le slug de notre bloc, par exemple /blocks/php-only/.
À l’intérieur, je créé template.php et style.css.
Maintenant, pour déclarer un template séparé, on va utiliser la fonction include de PHP, mais pour éviter d’activer l’affichage immédiat, on va l’entourer avec ob_start() et ob_get_clean() les fonctions de buffer PHP qui permettent de créer un buffer et récupérer le template sous forme de variable au lieu de l’afficher.
Et dans /blocks/php-only/template.php, on met uniquement le code du bloc, par exemple :
Au moins, c’est plus propre comme ça : on sépare le code PHP du templating HTML.
Déclarer la feuille de styles rattachée au bloc
Maintenant, on va s’occuper d’attacher une feuille de styles au bloc. Et pour cela c’est très simple. On va commencer par déclarer une feuille de styles, puis on va l’attacher au bloc grâce à la propriété styles_handle :
Et voilà, on a désormais une structure solide, gérée complètement par les fonctions natives de WordPress. On va pouvoir travailler dans de bonnes conditions.
Le saviez-vous ?
Connaissez-vous la différence entre wp_register_style() et wp_enqueue_style() ? Le premier déclare simplement l’existence d’un style, sans pour autant l’embarquer sur la page. Il est utile dans notre cas car on passe le handle en paramètre de la fonction register_block_type() et c’est ce dernier qui va l’enqueue au bon moment.
Ajouter des personnalisations à notre bloc
Enfin, on va pouvoir ajouter des personnalisations d’apparence à notre bloc, sans effort supplémentaire, grâce à la propriété supports, à la suite de autoRegister.
Ici, j’ai ajouté les options de couleur de fond et de texte, le choix de la marge interne mais aussi d’alignement du bloc (pleine largeur et grande largeur).
Pas besoin de plus ! Résultat :
Pour connaître la liste complète des options supportées par WordPress, consultez la documentation des supports.
Quelle différence avec les blocs JS ?
Pourquoi donc s’embêter à faire des blocs en JS si on peut les faire en PHP ? Est-ce qu’il y a une différence ?
Oui, et une de taille : les blocs PHP sont rendus grâce à un appel Ajax, et il y a toujours un petit délai de rafraichissement pour voir apparaitre les modifications, même si celui-ci est infime.
Ce n’est donc pas un aperçu en temps réel comme avec JS. De plus, il n’est pas possible de modifier les textes directement en cliquant dessus dans le bloc. Il faut impérativement passer par le champ dans l’inspecteur à droite.
Il y a donc deux questions à se poser avant de faire son choix :
- Veut-on gagner du temps au détriment de l’UX : blocs PHP ;
- On veut une UX aux petits oignons, quite à prendre un peu plus de temps en dev : blocs JS !
Et voilà, vous savez faire un bloc natif en PHP ! Cette solution est très adaptée pour gagner du temps en créant des blocs simples avec peu d’options.
0
Questions, réponses et commentaires