Comment créer un plug – in de bloc Gutenberg simple

N’aimons – nous pas tous WordPress? La plate – forme a connu un grand succès depuis sa création, les développeurs ajoutant constamment de nouvelles fonctionnalités. L’une des caractéristiques les plus importantes de la période récente est l’éditeur de blocs WordPress, appelé Gutenberg. Gutenberg offre aux utilisateurs de WordPress une nouvelle façon passionnante de publier du contenu et de personnaliser leur site. C’est très facile à utiliser et c’est une bonne nouvelle pour les débutants et les développeurs. Si vous utilisez la dernière version de WordPress, vous connaissez déjà l’éditeur de blocs et les concepts de blocs.
Par défaut, l’éditeur de blocs WordPress contient des blocs qui vous permettent d’inclure texte, images, références, audio, vidéo, intégration, etc. De plus, il existe de nombreux ajouts Gutenberg qui vous permettent d’étendre l’éditeur sans effort. Cependant, vous pourriez avoir besoin de créer vos propres blocs personnalisés. C’est là que le post d’aujourd’hui fonctionne. Dans les paragraphes suivants, vous apprendrez exactement comment créer des blocs Gutenberg personnalisés pour répondre à vos besoins spécifiques.
Inutile de le dire, commençons, car il reste encore beaucoup à apprendre. Qu’est – ce qu’un bloc? Si vous êtes un débutant parfait, vous pourriez vous demander ce qui s’est passé à Gutenberg. Je savais que j’étais confus quand Gutenberg m’a été présenté. Mais ce n’est pas la faute de qui que ce soit, nous sommes tous habitués à l’édition classique, et au début, c’était très inconfortable pour nous. Cependant, que nous le voulions ou non, l’éditeur de blocs WordPress restera. C’est pourquoi vous devriez en apprendre le plus possible sur Gutenberg (et tout ce qui l’accompagne) pour en tirer le meilleur parti.
Les blocs traitent les paragraphes, les titres, les éléments multimédias et l’intégration comme des composants qui, lorsqu’ils sont combinés, forment
Sauvegardé dans une base de données WordPress, remplace les concepts traditionnels de texte peint à la main par du contenu multimédia intégré et du Code court Manuel de l’éditeur de bloc dans le passé, les utilisateurs de WordPress se sont appuyés sur des textes libres et courts pour ajouter du contenu. Gutenberg utilise des blocs. Le nouvel éditeur vous permet de créer des mises en page riches et flexibles qui sont faciles à gérer en utilisant des unités de bloc. Actuellement, vous pouvez utiliser l’éditeur de bloc pour les messages et les pages, mais il y a un plan d’activités pour soutenir l’édition future de l’ensemble du site. L’éditeur Gutenberg montre quelques blocs qui utilisent des blocs, ce qui rend la création de contenu dans WordPress très rafraîchissante. De plus, de nombreux plug – ins existants prennent en charge de nouveaux éditeurs et fournissent des blocs prêts à l’emploi qui facilitent l’ajout de contenu à partir de ces plug – ins. L’éditeur vous permet de faire glisser et de déposer des blocs sur la page pour appuyer plus rapidement sur le bouton publier. Comme un générateur de page directement intégré dans WordPress. Si vous connaissez bien un générateur de page visuelle comme element, vous connaissez probablement le concept de glisser – déposer des pages. Gutenberg a essayé d’intégrer pleinement la création de sites de glisser – déposer dans le noyau WordPress. N’hésitez pas à consulter notre guide étape par étape de Gutenberg Builder pour plus d’informations.
C’est – à – dire, passons à la meilleure partie du post d’aujourd’hui. Nous avons appris à créer un bloc simple. Vous pouvez le faire manuellement ou en utilisant des plug – ins tels que Genesis Custom Block (anciennement blocklab), lazy Block ou ACF. La création de blocs personnalisés est un peu technique, donc dans le post d’aujourd’hui, nous allons utiliser un plug – in. Il est plus facile de créer des blocs personnalisés (en utilisant Genesis Custom Blocks) en suivant le chemin du plug – in, car creatz
N Bloquez le modèle dans l’éditeur de modèle (lisez, ajoutez du Code). Nous en apprendrons davantage lors de la conception du CTA. Aperçu de l’éditeur: prévisualiser les blocs personnalisés dans l’éditeur de blocs WordPress. Aperçu de première ligne: Ici vous pouvez prévisualiser l’apparence des blocs personnalisés sur votre site. Champs de l’éditeur: les champs seront affichés dans la zone d’édition principale du message ou de la page (vous savez, comme les messages réguliers que vous voyez dans l’éditeur WordPress) champs de l’inspecteur: les champs seront affichés dans la barre latérale droite sous l’inspecteur de bloc. Options de la barre latérale du curseur: le curseur est automatiquement rempli en fonction du titre que vous donnez au bloc personnalisé. Ceci est important lors de la création d’un modèle de bloc. Icônes: Cette option vous permet d’ajouter des icônes à un bloc personnalisé. Catégorie: assigne une catégorie à un bloc personnalisé. Vous pouvez utiliser l’une des catégories intégrées pour catégoriser les blocs personnalisés ou créer de nouvelles catégories. Mots clés: ajoutez jusqu’à trois mots clés associés à un bloc personnalisé afin que les gens puissent facilement le trouver dans le sélecteur de bloc. Ouvrez les champs de bloc en mode au lieu du rendu en place – activez si vous voulez ouvrir les champs en mode. Cette option est utile si vous avez un bloc personnalisé qui contient de nombreux champs. Types de messages: sélectionnez ces cases pour permettre l’affichage de blocs personnalisés sur chaque type de messages. Par exemple, si vous désélectionnez un message, le bloc n’apparaîtra sur aucun message du tout. Créez des blocs personnalisés maintenant que vous avez une meilleure compréhension de l’interface utilisateur et de la fonctionnalité de chaque section, retroussons nos manches et commençons à travailler. Dans le constructeur, spécifiez le titre approprié pour le bloc personnalisé. Je soutiens le CTA comme indiqué ci – dessous. Avant d’ajouter un nouveau camp
Osmose inverse totale;
Couleur: vert;
Emballage: 5px 10px;
Alignement du texte: centré;
Affichage: verrouillage en ligne;
Taille de la police: 20px;
Marge: 10px 30px;
Curseur: pointeur;
Rayon limite: 2px;
Tu vas bien! Cliquez sur publier: Pour voir les nouveaux blocs personnalisés, retournez au tableau de bord de gestion WordPress et allez à publier > ajouter du nouveau contenu (également pour les pages): Créez le post comme d’habitude, cliquez sur le signe plus (+) pour ajouter un nouveau bloc, puis sélectionnez un nouveau bloc personnalisé poli comme indiqué ci – dessous. Ensuite, remplissez le bloc personnalisé et postez le message au besoin: Maintenant, si je regarde les nouveaux blocs CTA personnalisés à l’avant, je vois: Mon CTA personnalisé est là! Ne vous inquiétez pas pour mes compétences en design: il est clair que dans la vraie vie, vous voudrez passer un peu plus de temps à concevoir votre quartier. Mais j’espère que vous avez appris quelque chose ici aujourd’hui. Construire des blocs personnalisés à l’aide d’outils comme Genesis Custom blocks et lazy Blocks n’est pas nécessairement une tâche difficile. De plus, vous pouvez rendre les blocs personnalisés complexes ou simples au besoin. Si vous devez créer manuellement des blocs personnalisés, apprenez quelques leçons de JavaScript. Y a – t – il des idées ou des questions qui pourraient aider? Veuillez nous le faire savoir dans les commentaires ci – dessous.