Comment créer un bloc d’éditeur WordPress personnalisé en 2021

L’éditeur de blocs WordPress (anciennement Gutenberg) offre une nouvelle façon d’ajouter du contenu à vos messages, pages et bientôt tout le contenu du site WordPress. Marquer les paragraphes de WordPress dans l’espace du constructeur de page. L’ensemble de base de blocs par défaut est très robuste, mais que faire si vous créez vos propres blocs personnalisés pour la mise en page du contenu? Dans le passé, vous avez peut – être utilisé quelque chose comme des champs personnalisés avancés (ACF) ou du Code court. Les blocs personnalisés sont maintenant en place. Au cours de l’année écoulée, j’ai travaillé à temps plein avec React pour reconstruire le front end de WP migrate DB pro. J’ai pensé à React parce que l’éditeur WordPress est aussi écrit en React, donc je pense qu’il est préférable de voir ce qu’il faut pour créer des blocs personnalisés. Allons à l’intérieur! Voyons ce qu’il faut pour passer de rien à des blocs de Gutenberg personnalisés relativement simples. La documentation de l’éditeur de bloc est toujours disponible partout, mais il y a de bonnes informations dans le manuel de l’éditeur de bloc. Malheureusement, je trouve que ce n’est pas si facile à analyser, donc nous allons examiner certaines des étapes que j’ai faites pour mettre en place. Avant de commencer à créer des blocs Gutenberg, je vous recommande au moins d’avoir une compréhension approfondie de REACT et du JavaScript moderne maintenant. Si vous n’êtes pas familier avec des choses comme jsx, vous pouvez utiliser la syntaxe es5, mais il est préférable d’utiliser la syntaxe moderne à long terme. La configuration de la commande WP – CLI – Scaffold est maintenant très simple. Cette commande définit un thème WordPress ou un plug – in contenant le dossier \ NCY _ Custom Block init () {\/ \/ auto – Load dependences and version $Asset file file = include (plugin Dir path (File file), ‘Build \/ index.asset.php’; WP Register script (‘Fancy – Custom Block Block Editor’) {\/ \/ auto – Load dependences and version $Asset file = include (plugin Dir path (File u), ‘Build \/ index.asset.php’; WP Register script (‘Fancy – Custom Block Block Block Editor’) {\/ \/ auto – Load dependences and version $Asset file = include (plugin Dir path (File _ fichier, $Asset file [‘dépendances’, $Asset file [‘ version ‘); WP Register style (‘ Fancy Custom Block Block Editor ‘, plugins URL (‘editor.css’,’ file Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar index Bar _ Édition (CSS’); WP _ Register style (‘Fancy Custom block’, plugins URL (‘style.css’, file u), array (), filemtime (plugin Dir path (File u). \ Si vous pensez qu’il y aura plus de PHP à partir de maintenant, réfléchissez encore! À partir de maintenant, nous entrons dans un monde JavaScript. L’aspect clé de la création de blocs dans Gutenberg est la fonction registerblocktype (). Il fait tout le travail. Registerblocktype (‘My Block \/ Cool block name’, {\/… Massive JS Object} It’s the way! Next see!… OK, there are some more in it, but in the heart, it’s like Creating a Gutenberg WordPress block. In ‘massive JS Object’ Il y a plusieurs choses à noter. Si vous visualisez le fichier \/ 05 recette cardesnext \/ src \/ index. Dans la Bibliothèque d’échantillons Gutenberg, vous pouvez voir qu’il y a beaucoup de configurations dans une configuration de bloc. Nous examinerons trois parties principales: attributs et méthodes Edit () et Save (). Attributs si vous voulez un bloc qui effectue réellement certaines actions, comme vous permettre d’éditer du texte, vous devez utiliser sist Administration nationale de Gutenberg. C’est l’objet de propriété. Il est pratiquement identique au concept de gestion de l’état de React, qui est un objet de niveau supérieur utilisé pour suivre les propriétés et modifier le contenu. Attributs: {Title: {type: array, source: Child, Selector: ‘. Callout title’}, mediaid: {type: Number ‘}, mediaurl: {type: String, source: attribut, Selector: IMG, attribut: SRC’}, Body: {type: array, source: Child, Selector: ‘. Callout body’}, Alignment: {type: String}, above are JavaScript objects used to Configure Block appearance. Comme vous pouvez le voir, vous devez définir un attribut pour chaque objet modifiable dans le bloc. L’image a media ID et Media URL, le titre et le contenu du corps ont des valeurs, et l’alignement général de tout le contenu. La méthode Edit () prend ces attributs comme paramètres afin que vous puissiez les modifier dans l’interface de l’éditeur. Edit () vous permet de personnaliser l’interface d’édition dans Gutenberg en utilisant la fonction Edit (). Si vous connaissez bien la fonction render () de React, c’est très similaire. Fondamentalement, vous pouvez spécifier une déclaration de retour qui contient jsx. Édition: props = > {Const {classname, iselected, attributes: {mediaid, mediaurl, body, Alignment, title}, setattributes} = props; Useeffect (() = > {\/ \/ console.log (props);}); Const onchangetitle = value = > {setattributes ({Title: Value});; Const on selectimage = MEDIA = > {setattributes ({Media URL: media.url, Media id: media.id});; Const onchangebody = value = > {setattributes ({Body: Value});; Const [imageclasses, textclasses, wrapclass] = trier tcsclass (align | ‘left’, Class Name); Retour ( {is selected &) {setattributes ({align: nextag});} \/ > )} Test 2