{"id":234217,"date":"2023-02-14T12:36:00","date_gmt":"2023-02-14T09:36:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234217"},"modified":"2022-11-12T00:43:30","modified_gmt":"2022-11-11T21:43:30","slug":"comment-creer-des-blocs-gutenberg-personnalises-avec-advanced-custom-fields-pro","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-creer-des-blocs-gutenberg-personnalises-avec-advanced-custom-fields-pro\/","title":{"rendered":"Comment cr\u00e9er des blocs Gutenberg personnalis\u00e9s avec Advanced Custom Fields Pro"},"content":{"rendered":"\n

Depuis la version 5.8<\/a> d’Advanced Custom Fields (ACF) Pro, vous pouvez utiliser ACF pour cr\u00e9er des blocs Gutenberg personnalis\u00e9s. Tout ce que vous devez g\u00e9rer, ce sont les mod\u00e8les PHP. Cela rend tr\u00e8s facile pour les d\u00e9veloppeurs qui ne sont pas encore exp\u00e9riment\u00e9s dans le Javascript moderne requis de cr\u00e9er des blocs personnalis\u00e9s pour Gutenberg avec l’un des types de champs qu’ACF a \u00e0 offrir. Gardez \u00e0 l’esprit que cette fonctionnalit\u00e9 n’est disponible que dans la version payante (Pro<\/a>) des champs personnalis\u00e9s avanc\u00e9s. Il n’est pas disponible dans la version gratuite, vous devrez donc acheter une licence.<\/p>\n

Si vous \u00eates un \u00e9diteur WordPress ou un webmaster qui ne souhaite pas plonger dans le codage, cet article est d\u00e9finitivement pour vous. Cependant, si vous souhaitez \u00eatre un d\u00e9veloppeur de th\u00e8mes ou de plugins WordPress, je vous recommande de franchir le pas pour apprendre \u00e0 cr\u00e9er vos propres blocs personnalis\u00e9s. Cependant, l’utilisation de champs personnalis\u00e9s avanc\u00e9s pour cr\u00e9er des blocs peut fournir une bonne introduction \u00e0 la gestion des blocs personnalis\u00e9s dans Gutenberg.<\/p>\n

Cr\u00e9er un bloc Gutenberg avec ACF<\/h2>\n

Il y a essentiellement trois \u00e9tapes simples pour cr\u00e9er un bloc Gutenberg personnalis\u00e9 avec des champs personnalis\u00e9s avanc\u00e9s. La premi\u00e8re est facile et probablement famili\u00e8re ; configurer les champs (param\u00e8tres) que vous souhaitez avoir dans votre bloc. La deuxi\u00e8me \u00e9tape consiste \u00e0 utiliser la fonction ACF pour enregistrer un bloc Gutenberg. Et la troisi\u00e8me \u00e9tape consiste \u00e0 \u00e9crire le mod\u00e8le PHP pour le bloc. Vous \u00e9crivez simplement le code HTML et g\u00e9rez les param\u00e8tres comme vous le feriez avec les champs ACF autrement. Et c’est tout! (D’accord, il y a peut-\u00eatre une quatri\u00e8me \u00e9tape\u00a0; styliser votre bloc. Mais je n’entrerai pas dans les d\u00e9tails dans cet article).<\/p>\n

Cr\u00e9ez vos param\u00e8tres \/ champs<\/h3>\n

Si vous avez d\u00e9j\u00e0 utilis\u00e9 des champs personnalis\u00e9s avanc\u00e9s, vous savez probablement comment configurer des champs. Vous pouvez utiliser l’interface utilisateur d’administration du champ personnalis\u00e9 avanc\u00e9 pour le faire. Ou si vous voulez que les param\u00e8tres de bloc soient int\u00e9gr\u00e9s dans votre plugin ou votre th\u00e8me, \u00e9crivez les param\u00e8tres avec PHP. J’ai un article de r\u00e9f\u00e9rence complet sur la fa\u00e7on d’ajouter des param\u00e8tres ACF avec PHP<\/a>.<\/p>\n

\"Comment<\/a><\/p>\n

La chose essentielle que vous devez faire avec votre groupe est de d\u00e9finir l’emplacement sur "Bloquer". Mais comme nous n’avons pas encore enregistr\u00e9 notre bloc, il sera par d\u00e9faut sur "Tous". Laissez-le ainsi, enregistrez vos champs et passons \u00e0 enregistrer notre bloc.<\/p>\n

Enregistrer un bloc Gutenberg<\/h3>\n

Dans le code de votre th\u00e8me functions.php<\/code>ou plugin, vous devez \u00e9crire une fonction accroch\u00e9e \u00e0 acf\/init<\/code>et appeler [acf_register_block](https:\/\/www.advancedcustomfields.com\/resources\/acf_register_block_type\/)()<\/code>pour enregistrer un bloc. Comme cette fonction est assez nouvelle dans ACF et d\u00e9pend d’un plugin \u00e0 activer, je vous recommande d’envelopper votre code dans un if-check pour vous assurer que votre th\u00e8me ou plugin ne plantera pas votre WordPress.<\/p>\n

add_action('acf\/init', function() {\n    if (function_exists('acf_register_block')) {\n        acf_register_block([\n            'name' => 'yourblock',\n            'title' => __('Name of your block', 'txtdomain'),\n            'description' => __('Optional description', 'txtdomain'),\n            'category' => 'formatting',\n            'icon' => 'admin-comments',\n            'render_callback' => 'my_acf_block_render_callback',\n        ]);\n    }\n});<\/code><\/pre>\n
L’enregistrement d’un bloc avec ACF est en fait similaire \u00e0 la fa\u00e7on dont nous enregistrerions manuellement un bloc Gutenberg personnalis\u00e9. Avec ACF, vous devez fournir un nom slugifi\u00e9 unique pour votre bloc name<\/code>. Je recommande d’utiliser un nom explicite, par exemple cta<\/code>pour un bloc Appel \u00e0 l’action, ou author-card<\/code>pour un bloc montrant des auteurs ou similaires. Si vous connaissez un peu Gutenberg, vous savez peut-\u00eatre que tous les blocs doivent \u00eatre enregistr\u00e9s avec un espace de noms, un \/<\/code>, puis leur nom de slug. Par exemple, l’espace de noms de WordPress est core<\/code>, donc par exemple le bloc de paragraphe dans WordPress s’appelle core\/paragraph<\/code>. Avec ACF, l’espace de noms sera acf, donc par exemple le bloc ci-dessus sera enregistr\u00e9 dans Gutenberg en tant que acf\/yourblock<\/code>. Si vous enregistrez vos champs avec PHP, comme vous le verrez plus tard, nous devons nous en souvenir.<\/p>\n
Dans category<\/code>vous d\u00e9finissez dans quelle cat\u00e9gorie Gutenberg vous souhaitez que votre bloc apparaisse. Pour le moment, les valeurs possibles sont common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>, ou embed<\/code>. Si vous cr\u00e9ez des cat\u00e9gories Gutenberg personnalis\u00e9es, vous pouvez les ajouter \u00e0 celles-ci si vous le souhaitez. Quant \u00e0 icon<\/code>fournir n’importe quel nom d’ic\u00f4ne de WordPress Dashicons<\/a> (moins les).<\/p>\n
Pour informer ACF comment rendre ce bloc, vous avez deux choix\u00a0: soit fournir un nom de fonction \u00e0 la cl\u00e9 render_callback<\/code>(comme ci-dessus), soit fournir un nom de mod\u00e8le dans votre th\u00e8me \u00e0 la cl\u00e9 render_template<\/code>. Donc, si vous pr\u00e9f\u00e9rez vous r\u00e9f\u00e9rer directement \u00e0 un mod\u00e8le, par exemple template-parts\/block-yourblock.php<\/code>dans votre th\u00e8me, faites-le simplement comme ceci et supprimez le render_callback<\/code>:<\/p>\n
'render_template' => 'template-parts\/block-yourblock.php',<\/code><\/pre>\n
Connectez votre groupe de champs \u00e0 votre bloc enregistr\u00e9<\/h2>\n
Lorsque vous \u00eates satisfait de votre code d’enregistrement de bloc, il est temps de connecter votre bloc aux param\u00e8tres que vous avez d\u00e9finis pr\u00e9c\u00e9demment. Si vous avez cr\u00e9\u00e9 les champs dans l’administrateur, revenez simplement en arri\u00e8re et choisissez votre bloc dans Emplacement. Et si vous avez ajout\u00e9 le groupe de champs avec PHP, \u00e0 l’emplacement fournissez la valeur ‘ acf\/yourblock<\/code>‘ o\u00f9 yourblock<\/code>est ce que vous avez fourni comme name<\/code>ci-dessus.<\/p>\n
Ecrire le mod\u00e8le<\/h2>\n
La derni\u00e8re \u00e9tape, et la plus amusante, consiste \u00e0 \u00e9crire le mod\u00e8le pour la sortie du bloc\u00a0!<\/p>\n
L’emplacement de votre sortie de rendu de bloc d\u00e9pend de ce que vous avez d\u00e9cid\u00e9 d’utiliser dans votre enregistrement de bloc, render_callback<\/code>ou render_template<\/code>.<\/p>\n
Si vous avez fourni un nom de fonction, render_callback<\/code>vous devez d\u00e9finir cette fonction dans le functions.php<\/code>code de votre th\u00e8me ou plugin. Vous obtenez quatre param\u00e8tres pour votre fonction, comme vous le verrez ci-dessous\u00a0:<\/p>\n
function my_acf_block_render_callback($block, $content = '', $is_preview = false, $post_id = 0) {\n    $className = 'your_block';\n    if (!empty($block['className'])) {\n        $className .= ' '. $block['className'];\n    }\n\u00a0\n    \/\/ Example of fetching a field value:\n    $my_text = get_field('my_textfield');\n\u00a0\n    ?><div class=\"<?php echo $className; ?>\">\n        <?php \/\/ echo your output here ?>       \n    <\/div><?php\n}<\/code><\/pre>\n
Le premier param\u00e8tre, $block<\/code>, contient certaines informations de Gutenberg. Par exemple, chaque bloc Gutenberg aura presque toujours className<\/code>, que vous devez d\u00e9finir comme classe sur votre wrapper le plus externe. $block['align']<\/code>pour l’alignement peut \u00e9galement \u00eatre d\u00e9fini et quelque chose que vous souhaitez \u00e9galement ajouter. Le deuxi\u00e8me param\u00e8tre, $content<\/code>, sera toujours vide avec ACF (cela serait rempli si vous ajoutiez des blocs imbriqu\u00e9s, mais ce n’est pas possible avec ACF). Le bool\u00e9en $is_preview<\/code>sera vrai si nous examinons actuellement le rendu du bloc en mode aper\u00e7u dans l’\u00e9diteur Gutenberg. Et enfin $post_id<\/code>, le message dans lequel ce bloc est ajout\u00e9.<\/p>\n
En ce qui concerne les champs, vous r\u00e9cup\u00e9rez les champs comme vous le feriez normalement, avec get_field()<\/code>. La sortie HTML d\u00e9pend enti\u00e8rement de vous et de la mani\u00e8re dont vous souhaitez g\u00e9n\u00e9rer vos champs.<\/p>\n
Si vous avez fourni un fichier de mod\u00e8le \u00e0 la render_template<\/code>place, cr\u00e9ez simplement le fichier \u00e0 l’emplacement sp\u00e9cifi\u00e9 dans votre th\u00e8me. \u00c0 l’int\u00e9rieur, vous avez acc\u00e8s aux m\u00eames variables globales qu’avec la fonction ci-dessus (par exemple $block<\/code>). Par exemple:<\/p>\n
$className = 'your_block';\nif (!empty($block['className'])) {\n    $className .= ' '. $block['className'];\n}\n\u00a0\n\/\/ Example of fetching a field value:\n$my_text = get_field('my_textfield');\n\u00a0\n?><div class=\"<?php echo $className; ?>\">\n    <?php \/\/ echo your output here ?>       \n<\/div><?php<\/code><\/pre>\n
Et c’est tout ce qu’il y a \u00e0 faire. C’est aussi simple que de cr\u00e9er vos blocs Gutenberg personnalis\u00e9s avec ACF.<\/p>\n
Conclusion<\/h2>\n
Aussi simple que cela puisse para\u00eetre, s’appuyer sur un plugin – en particulier un plugin payant – n’est pas une bonne solution finale si vous souhaitez d\u00e9velopper des th\u00e8mes ou des plugins. Gardez \u00e0 l’esprit que vos blocs cesseront de fonctionner si vous d\u00e9placez votre code de th\u00e8me dans un autre WordPress sans ACF Pro. Ou lorsque vos param\u00e8tres de champ n’ont pas \u00e9t\u00e9 configur\u00e9s (sauf si vous les avez int\u00e9gr\u00e9s dans votre code avec PHP ou assurez-vous de les exporter et de les importer). En tant que d\u00e9veloppeur de th\u00e8me (ou plugin) qui distribue du code, vous ne pouvez pas vous attendre \u00e0 ce que chaque utilisateur ach\u00e8te sa propre licence d’ACF Pro afin de faire fonctionner votre th\u00e8me! Mais c’est une bonne solution temporaire pour ceux qui ne peuvent pas ou n’auront pas besoin de coder.<\/p>\n
Si vous \u00eates convaincu que vous devez franchir le pas et apprendre Javascript et Gutenberg, consultez mon introduction \u00e0 Gutenberg post<\/a> ou la cat\u00e9gorie Gutenberg<\/a> sur ce site pour en savoir plus.<\/p>\n
Source d’enregistrement:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Cet article explique comment vous pouvez utiliser ACF pour cr\u00e9er des blocs Gutenberg personnalis\u00e9s dans lesquels vous n’avez qu’\u00e0 g\u00e9rer les mod\u00e8les PHP. Aucun Javascript n\u00e9cessaire !<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,893,717,717,832,915,1110,811,811,832,841,841,862,862],"tags":[1167],"class_list":{"0":"post-234217","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-autre","8":"category-code-2","10":"category-developpeur","12":"category-guide-pour-les-debutants","14":"category-n-a","15":"category-plugins-2","18":"category-tutoriels","20":"category-wordpress-3","22":"tag-affiai-fr"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=234217"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234217\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}