Création de blocs Gutenberg personnalisés pour WordPress

Créer des blocs Gutenberg personnalisés pour WordPress ne doit pas être difficile. En fait, avec un peu de code, vous pouvez créer vos propres blocs personnalisés sans avoir à utiliser de plugin. Gutenberg est un nouvel éditeur pour WordPress qui vous permet de créer des blocs personnalisés pour votre contenu. Les blocs sont les blocs de construction de votre contenu dans Gutenberg. Ils peuvent être utilisés pour ajouter du texte, des images, des vidéos, etc. Pour créer un bloc personnalisé , vous devrez utiliser un éditeur de texte comme WordPress Code Editor ou un plugin comme Block Lab. Une fois que vous avez un éditeur de texte, vous pouvez créer un nouveau fichier dans votre répertoire de thème ou de plugin. La première chose à faire est de créer un type de bloc. Un type de bloc est un ensemble de paramètres qui définissent le comportement de votre bloc. Pour ce faire, vous devrez utiliser la fonction register_block_type. Une fois que vous avez un type de bloc, vous pouvez l'enregistrer avec WordPress. Cette fonction prendra deux arguments : le nom de votre type de bloc et un objet qui contient les paramètres de votre bloc. Après avoir enregistré votre type de bloc, vous pouvez commencer à y ajouter des champs. Les champs sont les paramètres qui contrôlent l'apparence et le comportement de votre bloc. Pour ajouter un champ à votre type de bloc, vous devrez utiliser la fonction add_field. Une fois que vous avez ajouté tous les champs souhaités à votre type de bloc, vous pouvez l'enregistrer auprès de WordPress. Et c'est tout! Vous avez maintenant créé un bloc Gutenberg personnalisé pour WordPress.

L'éditeur de blocs Gutenberg était l'une des améliorations apportées à WordPress 5.0. L'éditeur Gutenberg divise le contenu en blocs, qui sont des sections facilement réorganisées. La plupart des développeurs seraient incapables de créer des blocs conçus nativement car ils n'ont pas les compétences React. La communauté des développeurs WordPress a réagi en développant des outils pouvant répondre aux exigences React/JavaScript. Les blocs dans Block Lab sont créés en trois étapes : en les ajoutant dans l'administrateur, en les copiant et les collant, puis en les exportant. Une API peut également être utilisée pour créer des contrôles personnalisés pour votre bloc. Ce n'est peut-être pas grand-chose à regarder, mais cela vous donnera une idée de ce que vous pouvez faire avec un bloc Gutenberg personnalisé.

Pour créer un bloc, nous devrons créer un nouveau fichier nommé block-notification-bar.php, qui contient un titre (Notification Bar) et trois champs. En réponse à ce fichier, un message de notification apparaîtra nous demandant de placer notre modèle de bloc personnalisé dans notre thème. Avant de télécharger le fichier, assurez-vous qu'il est enregistré et téléchargé sur votre serveur Web. Un bloc personnalisé a maintenant été créé pour nous. Tout ce qui compte, c'est que vous atteigniez cet objectif. Nous avons beaucoup d'options si nous voulons développer ce que nous avons déjà créé. Les icônes, les boutons et la possibilité de créer un lien vers une autre publication ou page ne sont que quelques-unes des fonctionnalités qui peuvent être ajoutées. Toutes ces capacités peuvent être obtenues via Block Lab, ainsi que d'autres plugins mentionnés ci-dessus.

Plugin de blocs personnalisés WordPress

Il existe de nombreux excellents plugins de blocs personnalisés disponibles pour WordPress. Chaque plugin offre un ensemble différent de fonctionnalités et d'options. Certains plugins de blocs personnalisés vous permettent de créer des blocs personnalisés pour vos publications et vos pages, tandis que d'autres fournissent un ensemble de blocs préconçus que vous pouvez utiliser.

Vous pouvez facilement créer des publications et des pages avec WordPress en ajoutant du contenu et des éléments de mise en page sous forme de blocs. WordPress propose une large gamme de blocs dans sa configuration par défaut. Vous pouvez toutefois souhaiter créer un bloc personnalisé pour accomplir une tâche spécifique. Ce didacticiel vous guidera à travers les étapes de création d'un bloc complètement unique. La première étape consiste à insérer trois champs dans votre bloc de témoignage. Cliquez sur le bouton Ajouter un champ pour commencer à remplir le premier champ. La deuxième étape consiste à créer un modèle de bloc, qui déterminera exactement comment les données seront affichées.

La troisième étape consiste à styliser le balisage de sortie du bloc en cliquant sur l'onglet CSS. En téléchargeant manuellement les modèles, vous pouvez créer votre propre bloc personnalisé. Dans ce cas, PHP est le meilleur moyen d'interagir avec vos champs de bloc personnalisés. Téléchargez simplement le modèle d'éditeur sur votre thème en utilisant la méthode de téléchargement. Pour commencer, prévisualisez votre bloc personnalisé. Avant de pouvoir prévisualiser votre HTML/CSS, vous devez fournir des données de test. Créez un site Web WordPress personnalisé avec un bloc Gutenberg.

Pour rechercher un bloc, saisissez son nom ou ses mots-clés dans la zone qui apparaît après avoir cliqué sur le bouton Ajouter un nouveau bloc. Vous pouvez prévisualiser le bloc en enregistrant et en modifiant votre article et votre page. Sur notre site de test, vous pouvez voir à quoi ressemble le bloc de témoignages.

Créer Gutenberg Block React

Il existe plusieurs façons de créer un bloc Gutenberg dans React. La première consiste à utiliser l'outil CLI create-guten-block. Cela échafaudera un nouveau bloc Gutenberg pour vous. Pour utiliser cette méthode, vous devez avoir installé Node.js et npm sur votre machine. Une fois ces dépendances installées, vous pouvez créer un nouveau bloc Gutenberg en exécutant la commande suivante : create-guten-block my-block Cela créera un nouveau répertoire appelé my-block avec tous les fichiers nécessaires pour un bloc Gutenberg. La deuxième façon de créer un bloc Gutenberg dans React consiste à utiliser le package @wordpress/block-editor. Ce package inclut une fonction d'assistance appelée createBlock qui peut être utilisée pour créer des blocs Gutenberg. Pour utiliser cette méthode, vous devrez installer le package @wordpress/block-editor dans votre projet. Une fois que vous avez installé le package, vous pouvez créer un nouveau bloc Gutenberg en exécutant le code suivant : import { createBlock } from '@wordpress/block-editor'; createBlock( 'mon-bloc/mon-bloc', { titre : 'Mon bloc', catégorie : 'commun', } ); Cela créera un nouveau bloc appelé mon-bloc dans la catégorie commune. La troisième façon de créer un bloc Gutenberg dans React consiste à utiliser la fonction wp.blocks.createBlock . Cette fonction fait partie de l'API JavaScript WordPress et peut être utilisée pour créer des blocs Gutenberg. Pour utiliser cette méthode, vous devrez inclure le package wp-api-request dans votre projet. Une fois que vous avez installé le package, vous pouvez créer un nouveau bloc Gutenberg en exécutant le code suivant : import { wp } from 'wp'; wp.blocks.createBlock( 'mon-bloc/mon-bloc', { titre : 'Mon bloc', catégorie : 'commun', } ); Cela créera un nouveau bloc appelé mon-bloc dans la catégorie commune.

Apprenez à créer des blocs personnalisés dans ce didacticiel pour l'éditeur Gutenberg. Vous utiliserez un plugin créé par vous-même pour terminer la tâche. Bien qu'un des thèmes par défaut soit disponible pour créer un bloc Gutenberg personnalisé, il faut avouer que c'est possible. Dans ce didacticiel, nous verrons comment créer un nouveau bloc personnalisé avec Gutenberg. De plus, nous personnaliserons l'apparence de l'interface et de l'éditeur en fonction des préférences de conception que nous fournissons. Si vous ne voulez pas passer beaucoup de temps à créer des blocs, vous pouvez simplement en ajouter un, puis les personnaliser en fonction de vos besoins.

React est facile à utiliser dans les thèmes personnalisés

React est une excellente bibliothèque pour créer des interfaces utilisateur avec JavaScript. WordPress l'a utilisé pour alimenter le nouvel éditeur Gutenberg , ainsi que l'écran d'administration du widget et les mises à jour récentes des capacités d'édition de contenu du site. Comme React est déjà intégré à WordPress, il est simple à utiliser dans des thèmes personnalisés.

Gutenberg Créer un bloc de boutons personnalisé

Gutenberg créer un bloc de boutons personnalisé est un outil très utile pour créer des boutons personnalisés pour votre site Web. Avec cet outil, vous pouvez facilement créer des boutons à la fois accrocheurs et fonctionnels. C'est un excellent moyen d'ajouter une touche personnelle à votre site Web et de le démarquer des autres.

Dans ce didacticiel, vous apprendrez à créer votre premier bloc simple dans l'application populaire. Notre application WordPress @create-block est un outil officiel qui nous permet de générer rapidement du code Javascript/PHP/CSS. En mode interactif, vous pouvez configurer votre bloc en une série d'étapes. Lorsque vous découvrez Gutenberg, cela peut être extrêmement utile. Si vous avez déjà échafaudé le bloc, vous pouvez maintenant accéder au répertoire nouvellement créé via un éditeur de code. La structure du plugin de bloc suit celle-ci telle qu'elle est actuellement (au moment de la rédaction de ce tutoriel). Nous allons passer en revue les détails de chaque fichier et son utilisation dans ce module.

L'indicateur de ligne de commande est une méthode courante de spécification des options pour les programmes de ligne de commande. Avant d'utiliser les drapeaux, remplacez les valeurs du répertoire des drapeaux par celles que vous souhaitez utiliser. Une feuille de style qui sera mise en file d'attente ou appliquée dans l'éditeur. Les détails de base du plugin sont discutés en détail. WordPress affiche les informations du plugin par défaut. Afin d'indiquer à Git quels fichiers ignorer lors de la création d'un projet sous contrôle de version, le fichier Gitignore A. doit être inclus. Le référentiel contient des informations. Config permet aux développeurs de conserver un style de codage cohérent sur plusieurs projets.

Développement de plugins WordPress Gutenberg

Le plugin WordPress Gutenberg est un projet open source développé par une communauté de bénévoles. Tout le monde peut contribuer au projet et aider à le rendre meilleur. Le plugin est constamment mis à jour et amélioré. Si vous êtes développeur, vous pouvez aider à contribuer au projet en développant de nouvelles fonctionnalités ou en corrigeant des bogues.

Vous avez probablement entendu parler de Gutenberg (l'éditeur de blocs WordPress), mais comment commencer à créer votre propre plugin ? Les blocs sont créés avec un simple script WordPress. Le type de plugin WordPress créé ici est généralement un bloc, mais il fournit un bon point de départ pour les autres dans le processus. Le Create Block Script peut être utilisé comme modèle pour créer votre propre plugin. Vous pouvez facilement voir le bloc dans le front-end de WordPress, mais il a une apparence différente pour vous aider à vous y habituer dans le back-end. Ce fichier doit être généré en mode développement uniquement après la compilation des assets. /node_modules - C'est le dossier à partir duquel tous les paramètres dépendants de JavaScript de votre plugin sont stockés.

Des fichiers prédéfinis contenant des environnements Visual Studio Code (VDC) utiles peuvent être trouvés dans ce fichier. Vous devez vous assurer que vous êtes dans le dossier du plugin WordPress si vous souhaitez créer un plugin. En conséquence, vous pourrez visualiser les étapes de développement et de production du plugin. Ouvrez /src/save.js dans votre éditeur pour remplacer la fonction de sauvegarde par ce qui suit : BlockText peut être généré sous forme de chaîne de cette manière. Le code suivant doit être ajouté à la racine du plugin pour afficher vos blocs dans une catégorie de blocs personnalisée. La fonction registerBlockType.js renvoie une liste de vos catégories de blocs, qui peuvent ensuite être recompilées à l'aide de la fonction registerBlockType.js du plugin.

L'éditeur de contenu de Gutenberg

Les utilisateurs de WordPress peuvent créer, modifier et supprimer du contenu via l'application à page unique (SPA) basée sur React. Contrairement à l'éditeur de contenu traditionnel, celui-ci offre une interface plus fluide et conviviale. Si vous voulez un éditeur de contenu plus puissant, l' application Gutenberg n'est pas pour vous. Si vous préférez un look plus décontracté, vous pouvez compter sur Gutenberg.

Éditeur de blocs personnalisés WordPress

Vous pouvez utiliser ce bloc sur n'importe quel article ou page de votre choix. Sur l'écran Ajouter un nouveau bloc, utilisez la zone de recherche pour rechercher votre bloc en saisissant son nom ou ses mots-clés. Après avoir inséré le bloc dans la zone de contenu, vous verrez les champs de bloc que vous avez créés pour ce bloc personnalisé.

Ce didacticiel vous guidera tout au long du processus de création d'une instance d'éditeur de blocs personnalisée entièrement fonctionnelle dans WordPress. Cet éditeur sera entièrement construit dans une page d'administration WP personnalisée appelée Block Editor (de la manière la plus créative). Dans notre Plug-A-Thon WordPress, nous allons créer un éditeur. Nous devons maintenant générer du HTML dans notre page personnalisée en utilisant le composant React de l'éditeur de blocs. Comme troisième argument, nous utilisons la ligne script dependencies ($script_asset['dependencies']). Cela garantira que les scripts liés à WordPress ne sont pas inclus dans le bundle construit. Nous devons également enregistrer nos styles CSS personnalisés et la bibliothèque de formatage par défaut de WordPress afin de les utiliser.

Cela nous permet d'utiliser JavaScript pour générer un éditeur de blocs dans le HTML de la page. La magie opère lorsque le composant pour cela s'appelle BlockEditor. Il est possible de rendre l'éditeur à partir de PHP sans créer de global JS. La mise en page de l'éditeur est construite sur un échafaudage, comme vous pouvez le voir ici, en plus de quelques fournisseurs de contexte spécialisés. Block EditorProvider est le composant le plus important du package d'éditeur de blocs WordPress. Comme nous l'avons expliqué précédemment, cela fournit un nouveau contexte pour un tout nouvel éditeur de blocs dans le contexte de l'édition de blocs. Pour ce faire, il s'abonne au registre fourni (via le HOC du fournisseur withRegistry), écoute les événements de changement de bloc, détermine si le changement de bloc reste persistant et appelle le gestionnaire d'entrée onChange si nécessaire.

Le composant le plus intrigant est le composant BlockList, qui ajoute une liste de blocs à l'éditeur. Il vaut la peine d'étudier ces composants en détail car ils sont parmi les plus complexes et les plus impliqués. Pour en savoir plus sur notre composant EditorBlock personnalisé, veuillez consulter l'article suivant. Slot/fill est implémenté en utilisant notre composant Blockeditor (voir ci-dessus) pour exposer un Fill (Sidebar. InspectorFill) à l'intérieur, que nous importons et rendons ensuite dans l'implémentation. En conséquence, React nous permet de conserver un composant d'inspection dans son DOM tout en le rendant dans le balisage à un emplacement séparé (par exemple, dans la barre latérale). Les blocs peuvent également être trouvés dans LocalStorage sous la clé getdavesbeBlocks.

Ces données sont sérialisées au format Block Grammar, ce qui signifie qu'elles peuvent être stockées dans une chaîne. GitHub a compilé l'intégralité du code pour l'éditeur de blocs fonctionnels personnalisés. Le programme peut être téléchargé et essayé par vous-même gratuitement.