Comment ajuster le plug – in Gutenberg: Partie 1 (API bloc)
« j’ai un plugin, dit – il. Comment puis – je me préparer pour Gutenberg? » L’histoire est simple; Gutenberg est une nouvelle expérience d’édition dans WordPress qui sera intégrée avec Core dans la prochaine version majeure. De nombreux plug – ins qui ne répondent pas à cette exigence seront éliminés. Pour ce faire, vous devez ajuster le plug – in Gutenberg avant qu’il ne soit trop tard. Qui est intéressé? Presque tous les plug – ins associés à l’éditeur post sont affectés par Gutenberg. Par exemple, si votre plug – in ajoute un bouton à tinymce pour insérer un code court dans l’éditeur, de mauvaises nouvelles; Ce sera la fin. 
Comment adapter votre plug – in # WordPress au tutoriel # Gutenberg: block API # cliquez sur Twitter \
Le Code court continuera aussi à fonctionner comme avant, mais ce n’est qu’un simple noeud de texte dans l’éditeur, et tous les plug – ins de code court de Gutenberg suivront son interface utilisateur de bloc et seront plus faciles à utiliser. Donc oui, les utilisateurs préfèrent les plug – ins créés pour l’expérience Gutenberg. Les plug – ins qui resteront en retard seront remplacés par des plug – ins concurrents. Pour vous donner une idée, voici un exemple de la façon dont l’expérience standard de l’éditeur utilisateur se comporte dans notre plug – in (A), puis dans Gutenberg (b) – le plug – in est optimisé pour cela. (Nations Unies)
Il existe de nombreuses façons d’intégrer un plug – in dans Gutenberg, selon la façon dont le plug – in fonctionne, comme nous le verrons dans cet article. Gutenberg a écrit sur React quelque chose à savoir à l’avance. Le plug – in Gutenberg est codé en javascript, ce qui est également une transformation approximative pour les développeurs qui n’utilisent que le codage PHP. Même si vous n’avez pas besoin de savoir comment créer un plug – in pour Gutenberg, vous avez besoin des bases de JavaScript. Si vous avez déjà utilisé REACT et jsx, vous avez des problèmes similaires.
Bien que Gutenberg n’ait pas assez de documents officiels, son dépôt github fournit aux développeurs une grande quantité d’informations précieuses. Si vous voulez en savoir plus sur le développement de Gutenberg, vous devez suivre de près ce qui se passe dans le dépôt github de Gutenberg, car les projets progressent très rapidement et changent chaque jour. Comment ajuster le plug – in pour Gutenberg l’API Gutenberg nous fournit de nombreuses façons d’étendre l’éditeur, comme l’API bloc, l’API Code court, et ainsi de suite. Le type d’api que nous utilisons dépend du type de plug – in que nous construisons.
Si votre plug – in est un simple plug – in de code court, vous pouvez utiliser l’API Block pour créer un beau bloc pour l’éditeur. Mais si votre plug – in utilise une méta – boîte complexe qui n’a pas assez de blocs, nous pouvons utiliser l’API de barre latérale. De plus, nous utiliserons une gamme d’outils de développement JavaScript modernes comme nodejs, NPM, webpack et esnext. Nous vous fournirons des exemples de fichiers afin que vous n’ayez pas à vous soucier de configurer votre environnement de développement. Dans cet article, nous verrons comment utiliser l’API Block pour rendre votre plug – in compatible avec Gutenberg. Si nécessaire, nous entrerons d’autres méthodes (API de barre latérale, panneau de publication, barre d’état et API similaires) dans la deuxième partie.
Vous trouverez des exemples de toutes les références dans ce dépôt Githu
B. go to top Gutenberg development environment Gutenberg development needs to Configure a number of tools, such as NPM, webpack, Babel and jsx. Cela demande beaucoup de temps et d’efforts, donc nous avons préparé l’environnement pour vous. Le modèle Gutenberg est un plug – in avec un minimum d’exemples de configuration et de développement Gutenberg. Contient des exemples de blocs et de barres latérales. Vous pouvez l’utiliser pour étendre un bloc personnalisé. 
Vous pouvez diviser ou cloner la Bibliothèque de modèles Gutenberg dans votre contenu \/ plug – in \/ WP et l’utiliser comme environnement de développement.
Après cela, vous devez installer nodejs sur votre ordinateur pour commencer. Allez dans le dossier des modèles Gutenberg et lancez NPM install à partir de maintenant, et vous devez connaître les trois commandes que vous utiliserez dans le processus de développement: NPM install – installez les dépendances du projet lorsque vous clonez le projet. NPM Run Dev – Remplissez le code pendant le développement. Vous devez l’exécuter une fois et il continuera à voir les changements. NPM Run Build – une fois le processus de développement terminé, remplissez le Code pour optimiser la construction. Block API Block est l’élément central de Gutenberg et est un éditeur basé sur block. L’API Block vous permet de créer des blocs pour Gutenberg. Vous pouvez créer des blocs qui rendent le HTML de base, le Code court, ou même créer des blocs dynamiques pour afficher (par exemple) vos derniers messages.
Ce processus est basé sur le plug – in existant dans notre exemple, et nous utiliserons le Code Twitter Short – click sur le bloc Gutenberg. Ce raccourci de tweet de clic génère une boîte de tweet contenant du texte et un bouton de tweet. Ainsi: 
Notre code Court est le suivant: [Cliquez sur le bouton tweet = \
Tu tweets. Sujet: cliquez sur Twitter ou cliquez sur Twitter alt comme sujet de boîte. Utilisez l’API Block pour ajuster le plug – in Gutenberg il y a deux façons de le faire avec Gutenberg, soit nous pouvons rendre le HTML à l’avant, soit nous pouvons utiliser le bloc Gutenberg pour rendre le Code court à l’avant. Pour cet article, nous allons faire le dernier.
Tout le Code se trouve dans la Bibliothèque Hello Gutenberg plug – in sur github. Vous pouvez Cloner le dépôt pour voir les plug – ins en cours d’exécution ou modifier le Code. Tout d’abord, nous devons utiliser la ressource enqueue _ Block pour ajouter des scripts et des styles à l’éditeur Gutenberg: \/ * *
Ajouter des éditeurs frontaux, Javascript et CSS
* \/
Fonction Ciao _ Gutenberg scripts () {
$Block path = ‘\/ distance \/ block. JS’;
$stylepath = ‘\/ distance \/ bloc. CSS’;
Joindre le fichier JS du bloc bundle
WP _ enqueue script
\
Plugins _ URL ($blockpath, \ \ file u u),
[\
Filemtime (plugin _ Dir path (file) $ Chemin de blocage)
);
Fusionner les blocs d’éditeur et les styles frontaux
Wp \ u enqueue \ u style
\
Plugins _ URL ($style path, \ \ u file),
[1jeemaa1],
Filemtime (plugin _ Dir path (file) $ Chemin de style)
);
}
Les crochets de script fonctionnent dans les crochets de l’éditeur de bloc
Ajouter _ action (‘enqueue Block Assets’,’ Hello Gutenberg scripts’); Nous avons ajouté quatre dépendances au script que nous utiliserons dans le bloc. Examinons d’abord ces passe – temps:
WP – i18n est une fonction d’internationalisation pour la version Gutenberg, comme \ (). La fonction registerblocktype utilisée par les blocs WP pour enregistrer les blocs. Nous utilisons des scripts d’éditeur WP et des composants WP pour différents composants du bloc. Maintenant que nous avons mis vos ressources en file d’attente, nous pouvons commencer à écrire des blocs dans le fichier \/ src \/ block. JS. Importer des dépendances si vous utilisez un fichier modèle Gutenberg, c’est votre bloc de fichiers. JS devrait avoir un struttu
Blocs de base disponibles pour créer des plug – ins Gutenberg: \/ * *
Bibliothèque de blocs internes
* \/
Constante uwp. I18n;
Constante {registerblocktype} = WP. Obstacles;
\/ * *
Verrouillage du Journal
* \/
Export default registerblocktype (‘Gutenberg Boilerplate \/ block’ {Export default registerblocktype
Block title
Titre: \ (\
Description du bloc
Description: \ (‘exemple de bloc’),
Catégorie de bloc
Catégorie: \
Icône de verrouillage
Icône: \
Verrouiller les mots clés
Mots clés:
(\
(\
(\
],
Propriétés: {
},
Modifier la définition de l’interface
Édition: objets de scène = >
Retour (
[Hello Backend]}
);
},
Définition de l’interface frontale
Save: prop = >
Retour (
{Hello frontend}
);
},
}); Vous pouvez lancer NPM Run Dev pour commencer à compiler notre Code en temps réel.
Tout d’abord, nous importerons tous les composants et bibliothèques nécessaires au niveau supérieur: \/ * *
Dépendances de bloc
* \/
Importer un nom de classe à partir du nom de classe;
\/ * *
Bibliothèque de blocs internes
* \/
Constante uwp. I18n;
Constante {registerblocktype} = WP. Obstacles;
Coût
Richtext,
Inspection par un inspecteur,
Contrôle des blocs,
= WP. Édition
Coût
Corps du panneau,
Contrôle de la zone de texte,
Contrôle de texte,
Dashicon,
Barre d’outils,
Boutons
Description de la commande,
= WP. Composants; La première importation est le nom de classe que nous avons installé en utilisant NPM pour utiliser plus d’une classe dans notre Code parce que jsx ne permet pas plus d’une classe dans un élément. Nous examinerons d’autres composants importés lors de l’utilisation. Maintenant, nous allons définir quatre attributs pour le bloc Gutenberg, comme notre code Court: attributs: {
Twitter: {
Type: \
},
Invitation Twitter: {
Type: \
},
Boutons:
Type: »
String ‘,
Par défaut: \ (‘tweet’),
},
Sujet: {0}
Type: \
Par défaut: false,
},
}, comme vous pouvez le voir, tous les attributs sont identiques à notre code court. Toutes les propriétés ont une clé de type qui indique à Gutenberg son type de données. Vous pouvez utiliser des chaînes, des nombres, des booléens et des objets comme types acceptables. Certaines propriétés contiennent également des valeurs par défaut. Les propriétés peuvent également avoir d’autres propriétés, telles que la source et le sélecteur, que nous n’utilisons pas dans notre exemple, mais vous pouvez en savoir plus ici. Maintenant, nous allons construire l’interface d’édition du bloc, qui va afficher: l’utilisateur va le voir pendant que le bloc est édité à Gutenberg. Pour obtenir une idée de base, nous pouvons d’abord coder le bloc et le construire en remplaçant les zones suivantes dans le Code: \/\/ Modifier la définition de l’interface
Édition: objets de scène = >
Retour (
[Hello Backend]}
);
}, avec le code suivant: \/ \/ modifier la définition de l’interface
Édition: objets de scène = >
Retour
G);
}, cela devrait vous faire connaître notre résultat final. Ça ressemble à ça:
Notre composant richtext a cinq thèmes. Le format est une chaîne parce que nous utiliserons un code court pour afficher les éléments à l’avant. Si nous voulons utiliser un sélecteur dans une propriété, le format devrait être un tableau. Par défaut, richtext a quelques options de formatage, telles que gras et italique, que nous désactivons en passant un tableau vide dans le paramètre formattingcontrols. Le substituant est le texte du substituant
Avant cet article. Nous avons attribué trois classes au contrôle en utilisant la fonction classnames. La troisième classe est active et n’est affichée que si la valeur de l’attribut sujet est vraie. Sa fonction onChange change la propriété Theme à true \/ False. Enfin, le composant dashicon affiche l’icône du contrôle. Nous devons également modifier le Code de bloc pour gérer ces changements. Nous devons remplacer les lignes suivantes: 
Nous vérifions si les attributs du sujet sont vrais ou faux et assignons une classe au bloc en conséquence. Votre bloc devrait maintenant ressembler à ceci: Nous avons terminé le côté JavaScript du bloc Gutenberg. Vous trouverez ici le code source complet du fichier. Maintenant, nous allons compléter notre module en gérant la sortie côté serveur. Le rendu côté serveur Gutenberg vous permet d’afficher des blocs à l’avant en utilisant le rendu côté serveur. Le rendu côté serveur nous permet de créer des blocs pour le Code court. Tout d’abord, Nous remplacerons la méthode Save par le Code: \/ \/ Front – end – Interface – Definition ci – dessous pour nous assurer que la méthode Save renvoie null
Enregistrer () {
Rendu en PHP
Zéro;
}, nous utiliserons la fonction PHP Register _ block type pour enregistrer les types de blocs en PHP: if (Register block type) {
Joindre le rendu côté serveur au rappel de rendu
Register _ Block Type
\
« render _ callback» = > « Hello Gutenberg Block callback»,
« attributs» = > tableau
\
« type ‘= >’ string»,
()
\
« type ‘= >’ string»,
()
« bouton» = > tableau
« type ‘= >’ string»,
« par défaut» = > « twitter»,
()
« sujet» = > tableau
« type» = > « booléen»,
« default» = > false,
()
()
[1]
);
} notre fonction Register _ block type. D’abord, on lui passe.