Share
Gutenberg est le nouvel éditeur WordPress, et tout le monde en parle. Il a introduit une toute nouvelle façon d'écrire du contenu avec WordPress. Ainsi, non seulement les développeurs peuvent-ils tirer parti de sa présentation modélisée par blocs, mais les utilisateurs finaux pourront également créer des mises en page dynamiques avec cette présentation..
Cependant, la construction de blocs personnalisés avec Gutenberg peut s'avérer très compliquée pour les développeurs qui souhaitent l'intégrer à leurs projets. Ce tutoriel va présenter une boîte à outils incroyable-créer-guten-block-à travers lequel vous pouvez créer des blocs de Gutenberg en quelques minutes.
Alors, commençons!
Accentsconagua
créer-guten-blockcréer-guten-block (cgb) est une boîte à outils de développement sans configuration pour la construction de blocs WordPress Gutenberg. Construit par Ahmad Awais-mon mari et un défenseur des développeurs open-source qui contribue régulièrement à WordPress Core-the toolkit a permis de réduire la difficulté de créer des blocs Gutenberg. Il s'agit de zéro configuration et crée des blocs sans verrouillage et avec une seule dépendance..
Pour construire un bloc Gutenberg, vous devez d'abord créer un plugin WordPress. Pour ce faire, vous commencez par configurer Webpack, React, ES 6/7/8 / Next, ESLint, Babel, etc., puis vous pourrez enfin commencer à coder votre bloc. Et vous devrez continuer à mettre à jour vos configurations d’outils en tant que bibliothèques et paquets supportant.
Cela ralentit le développement. Ahmad a donc caché toute cette configuration dans un paquet optimisé appelé scripts cgb, que vous trouvez dans le dossier racine du bloc. Ceci est la dépendance unique que j'ai mentionné plus tôt.
Ainsi, au lieu de tout mettre à jour séparément et régulièrement, le scripts cgb Le paquet est mis à jour, ce qui vous permet de toujours le mettre à jour sans modifier votre code. C'est une des choses qui m'a le plus plu.
Longue histoire courte…
créer-guten-block est la version zéro du développeur pour le développeur. boîte à outils pour la construction de blocs WordPress Gutenberg en quelques minutes sans configurer Webpack, React, JavaScript moderne, ESLint, Babel, etc. - site du projet GitHub Passons maintenant à certaines des fonctionnalités les plus importantes de l'outil.
créer-guten-block offre un environnement de développement à jour pour développer un plugin WordPress Gutenberg. Il est emballé avec des fonctionnalités telles que:
La maintenance et les mises à jour de tous les outils susmentionnés sont gérées par une seule dépendance de construction: le scripts cgb paquet. Ainsi, malgré l'utilisation de Webpack, Babel, ESLint et d'autres projets étonnants, vous pouvez toujours profiter d'une expérience de développement sans tracas avec ce package, qui restera à jour en permanence..
En utilisant le créer-guten-block boîte à outils, vous n'avez pas besoin de configurer quoi que ce soit. La plupart des choses dont vous avez besoin pour l'environnement de développement et de production sont préconfigurées..
Une préoccupation que les développeurs pourraient avoir avant de commencer à utiliser le cgb toolkit est ce qu'il faut faire si un projet nécessite une personnalisation, car ces outils sont préconfigurés pour fonctionner de manière spécifique. La bonne nouvelle est que vous pouvez à tout moment «éjecter» votre projet et le personnaliser, mais vous devrez ensuite gérer vous-même la configuration..
Pour éjecter votre projet, exécutez une seule commande. Toutes les dépendances de la configuration et de la construction seront déplacées directement dans votre projet. Vous pourrez ainsi commencer exactement où vous êtes parti..
Commencer et travailler avec créer-guten-block la boîte à outils est très simple. Installez-le, puis exécutez-le pour créer un plug-in de bloc Gutenberg pour WordPress. Mais avant cela, certaines conditions préalables doivent être définies. Alors, assurez-vous d'avoir les éléments suivants:
Ensuite, suivez ces étapes simples:
Vous devez avoir node.js et npm installée. S'ils sont déjà installés, passez à l'étape suivante. Sinon, téléchargez Node.js et installez-le. Pour vérifier l'installation, tapez les commandes suivantes.
node -v # Résultats en v9.1.0 - assurez-vous que Node> = 8 est installé. npm -v # Résultats dans 5.6.0 - assurez-vous que npm> = 5.3 est installé..
créer-guten-block Maintenant, vous allez installer créer-guten-block dans votre WordPress local /wp.local/wp-content/plugins/ annuaire. En outre, vous donnerez un nom au plug-in que vous souhaitez créer. Exécutez la commande suivante et attendez un certain temps car l'installation peut prendre quelques minutes..
npx create-guten-block demo-block
Cette commande crée un répertoire de plugin appelé bloc de démonstration dans le dossier en cours. Il crée également la structure de dossiers nécessaire et installe les dépendances dev.
Il crée une structure de dossier comme celle-ci:
/local.dv/wp-content/plugins/demo-block ├── plugin.php ├── package.json README.md | ├── dist | ├── blocks.build.js | ├── blocks.editor.build.css | └── blocks.style.build.css | └── src ├── bloc | ├── block.js | ├── editor.scss | └── style.scss | ├── blocks.js ├── common.scss └── init.php
Une fois la configuration de l'installation terminée, ouvrez votre dossier de projet et exécutez le script de démarrage en tapant la commande suivante:
cd demo-block npm start
le npm start commande exécute votre plugin en mode développement. Il y a aussi un npm run build commande qui vous aide à exécuter votre plugin en mode production. Lisez la suite pour trouver des détails sur trois fonctions différentes que vous pouvez exécuter avec le cgb boîte à outils.
créer-guten-block Lorsque vous travaillerez avec ce script, vous travaillerez avec trois scripts qui vous aideront développer, construire, et éjecter votre plugin.
npm start ScénarioCette commande est utilisée pour compiler et exécuter le bloc Gutenberg en mode de développement. Ça aussi les montres pour tous les changements et rapports avec des erreurs dans votre code.
npm run build ScénarioPour travailler en mode production, exécutez cette commande dans le dist dossier. Ici, vous verrez les messages de construction, les erreurs et les avertissements de peluches dans la console. Cette commande ne s'exécute qu'une fois et renvoie le gzip tailles de fichier du code produit.
npm run eject ScénarioSi à un moment quelconque vous voulez éjecter votre plugin de créer-guten-block, lancez cette commande. Cela vous permet de personnaliser le projet en fonction de vos besoins. Cependant, il s'agit d'un processus à sens unique et ne peut pas être annulé.
Après avoir éjectervous devez mettre à jour et gérer vous-même toutes les dépendances du projet.
créer-guten-block Une fois l’installation et la configuration réussies, vous pouvez ouvrir votre tableau de bord WordPress et aller à la Plugins section. Ici vous pouvez trouver un nouveau plugin appelé bloc de démonstration - CGB Gutenberg Block Plugin être ajouté. Clique le Activer bouton et vous êtes prêt à partir.
Maintenant, allez à Messages> Ajouter un nouveau pour ouvrir l'éditeur Gutenberg. (Rappelez-vous que le plugin Gutenberg est une condition préalable à la créer-guten-block boîte à outils.)
Clique sur le + icône pour accéder à tous les blocs. Dans la barre de recherche, tapez CGB et vous trouverez un bloc de Gutenberg ajouté.
Cliquez dessus et ajoutez un bloc Gutenberg dans l'éditeur WordPress comme ceci:
Frappé le Publier bouton pour voir comment il apparaît sur le front-end.
Surpris? J'étais, quand j'ai compris qu'Ahmad avait conçu les blocs de Gutenberg différemment pour le front-end et le back-end. Ceci peut être vérifié davantage en ouvrant le src dossier de votre bloc de démonstration plugin dans l'éditeur de code.
Ici, vous trouvez deux fichiers séparés: editor.scss qui gère le CSS pour le back-end, et style.css (editor.css est mis en file d'attente après style.scss, ce qui le rend plus prioritaire). Ces deux fichiers ont été inclus dans le dossier principal. block.js fichier via le importation commander.
Contrairement aux autres kits de démarrage et standards, il existe de nombreuses caractéristiques distinctives qui créer-guten-block Les offres de Takingit, et pour résumer, voici un bref résumé de ses principales caractéristiques:
scripts cgb dépendance créer-guten-block La licence MIT est-elle disponible gratuitement sur GitHub?.
