Module d’édition de blocs WordPress

Esto, pour compiler le plug – in et générer le Code Final:
Installation NPM et construction NPM Run Notez que vous devez installer les outils suivants: node. JS v8.9.1 ou plus tard. NPM v5.5.1 ou plus tard. Composer v1.8.1 ou plus tard. La commande NPM install télécharge les dépendances du noeud. JS et PHP dans les modules Node _ et les dossiers fournisseurs. À la fin du processus, vous aurez un dossier Dist contenant les fichiers compilés. Le plugin peut maintenant être activé en toute sécurité dans WordPress. En plus des commandes précédentes, notre modèle fournit les commandes supplémentaires suivantes: NPM Run Dev create file without Minimization. NPM Run Watch crée des fichiers et contrôle les changements. NPM Run Build crée des fichiers et minimise JS et CSS. NPM Run Lint PHP exécute PHP _ codesniffer sur le fichier PHP pour détecter les erreurs. NPM Run Lint PHP: réparation exécuter phpcbf pour essayer de corriger les erreurs PHP. NPM exécute le fichier scss de ligne de style Lint css pour détecter les erreurs. NPM Run Lint CSS: correction d’une tentative de réparation d’une erreur sur un fichier scss. NPM exécute Lint JS exécute eslint sur le fichier JS pour détecter les erreurs. NPM Run Lint js: correction d’une tentative de corriger une erreur sur le fichier JS. NPM Run Lint exécute le processus de liaison sur les fichiers PHP, scss et JS. NPM exécute la mise à jour: les dépendances du paquet dans le noeud de mise à jour du paquet. JS. Habituellement, NPM exécute Watch au moment du développement du Code pour compiler et grouper les changements en temps réel. Cependant, pour générer une version finale stable, lancez NPM Run Build.
Nos modèles d’éditeur de blocs WordPress incluent les fichiers et dossiers suivants:. Babel LRC. Profil Babel. Modifier la configuration. Le fichier editorconfig, qui aide à maintenir un style d’encodage cohérent pour plusieurs développeurs travaillant sur le même projet dans différents éditeurs et IDE. Ce n’est pas grave. Utilisé pour exclure certains fichiers du processus de liaison eslint. Eslinrc. Profil eslint. Gittattributes. Fournir un fichier texte pour att
Par défaut, il est inclus dans l’éditeur de bloc. Notre modèle ajoute un bloc de présentation juste un bloc de texte simple avec un dashicon en forme de coeur devant, comme vous pouvez le voir dans la capture d’écran précédente. Le bloc définit également deux styles supplémentaires pour changer la couleur du texte dans le bloc. Cela devrait vous aider à comprendre comment créer des blocs et des styles à Gutenberg.
Le code JavaScript qui ajoute ce bloc à l’éditeur se trouve dans packages \/ Blocks \/ Demo (voir ici). Pour supprimer ce bloc, il suffit de supprimer le Répertoire de présentation et de supprimer son importation et son utilisation dans le fichier paquet \/ bloc \/ index. JS. De plus, le Code du bloc de démonstration est divisé en plusieurs fichiers, chacun contenant différentes parties des paramètres utilisés par registerblocktype. D’autre part, si vous voulez ajouter des blocs supplémentaires, copiez le paquet \/ bloc \/ démo et spécifiez le nom du bloc pour eux. Modifiez le fichier javascript au besoin et n’oubliez pas d’importer le fichier principal du nouveau bloc dans le paquet \/ bloc \/ index. JS.
En utilisant l’éditeur d’extension plug – in, en plus des blocs de démonstration que j’ai mentionnés précédemment, notre modèle d’éditeur de bloc inclut la définition du plug – in Gutenberg. Rappelez – vous que ce \
Le plug – in comprend un sélecteur de couleurs (pour que vous puissiez facilement réutiliser le composant React qui contient Gutenberg) et un bouton pour insérer programmatiquement un bloc de présentation dans l’éditeur (une autre scène intéressante). Vous avez le Code du plug – in
Dans assets \/ src \/ js \/ admin (vous pouvez le voir ici). En particulier les fichiers plug – in. JS inclut les appels registerplugin et les fichiers de composants plug – in. JS définit les composants responsables du rendu des sélecteurs de couleurs et des boutons mentionnés précédemment. De même, vous pouvez modifier ce plug – in au besoin. Il peut également être supprimé si nécessaire. Pour ce faire, n’oubliez pas de supprimer le fichier plug – in JavaScript. JS est dans le fichier principal WP beb. Php (voir ici) et le fichier CSS correspondant (voir ici).
C’est parti! Nous espérons que notre modèle d’éditeur de bloc WordPress vous aidera à vous libérer de la peur de JS et à commencer les extensions de programmation de l’éditeur de bloc WordPress d’une manière simple. Essayez de nous parler de votre expérience. Nous serons heureux de lire vos commentaires! Photos en vedette de l’équipe icons8 sur unsplash.