Comment créer un bloc Gutenberg personnalisé dans WordPress (en 3 étapes)
L’éditeur de blocs WordPress (\
Dans cet article, nous discuterons des raisons pour lesquelles tant de propriétaires de sites Web développent des blocs Gutenberg personnalisés. Ensuite, nous vous montrerons comment construire le vôtre en trois étapes simples. Allons – y! L’introduction de blocs personnalisés (et pourquoi les créer) par l’éditeur Gutenberg de WordPress peut être controversée lors de son lancement initial. Cependant, il est maintenant largement admis que les éditeurs de blocs offrent une plus grande souplesse aux propriétaires de sites Web. Bien qu’il y ait beaucoup à apprécier, cet éditeur a quelques limites, en particulier lors de l’utilisation de plug – ins tiers. Par exemple, le plug – in principal de woocommerce a une fonctionnalité de produit connexe que vous voudrez peut – être utiliser à plusieurs endroits sur votre site Web. Cependant, cette fonction ne peut pas être utilisée comme bloc.
Genesis Custom Blocks est un plug – in que vous pouvez utiliser pour construire vos propres blocs. Si vous utilisez les options par défaut de wordpress pour essayer de concrétiser votre vision créative, il peut être utile de créer des projets personnalisés. Cela peut aussi être un excellent moyen de donner à votre site un aspect unique et même de nouvelles fonctionnalités. Le bloc de conception signifie également qu’il n’est pas nécessaire d’installer le plug – in
R et sa catégorie de stockage. Vous pouvez sélectionner à partir de la catégorie de bloc par défaut ou créer une nouvelle catégorie de bloc en sélectionnant ajouter une nouvelle catégorie. Si vous prévoyez créer plusieurs blocs, il peut être utile de créer une catégorie qui conserve tous les blocs Genesis: 
Vous pouvez également assigner des mots clés à ce bloc. Ces mots clés seront plus faciles à trouver dans le sélecteur. Vous pouvez entrer jusqu’à trois:
Par défaut, vous pouvez utiliser des blocs personnalisés sur les pages et les messages. Cependant, vous pouvez modifier ce comportement par défaut en utilisant le bouton type d’article. Comme dans ce cas vous créez un bloc biographique de l’auteur, vous voudrez peut – être le limiter aux messages, car il n’est pas courant d’assigner l’auteur à une page sur un site Web. Les bouchons de bloc sont générés automatiquement en fonction de leur nom. Cependant, vous pouvez modifier ce Snail si nécessaire. Dans les prochaines étapes, nous créerons un modèle de bloc en utilisant Slug, il est donc important de noter cette information.
Étape 2: concevoir un bloc Gutenberg personnalisé ensuite, vous ajouterez quelques champs d’éditeur au bloc personnalisé. Ces champs sont des points de données que vous pouvez modifier chaque fois que vous utilisez ce bloc (par exemple, ajoutez une photo au champ image). Pour ajouter un champ, sélectionnez le champ de l’éditeur et cliquez sur l’icône plus: Sous l’étiquette du champ, saisissez le texte qui apparaîtra à côté du champ d’entrée. C’est l’occasion pour vous de donner aux auteurs des conseils sur ce qu’ils devraient inclure. Sous type de champ, sélectionnez le type d’entrée que ce champ doit accepter. Cela aide à s’assurer que tous les auteurs utilisent les blocs de façon cohérente.
Les blocs personnalisés Genesis prennent en charge une gamme de types de champs, y compris les cases à cocher, les images et les commutateurs. Pour le bloc biographique de l’auteur, il comprend généralement:
Un champ d’image dans lequel l’auteur peut voir sa photo ou son portrait. Tu as besoin d’un autre endroit pour mettre leur biographie. Pour ce faire, vous pouvez créer des options d’insertion de texte simples en ajoutant des blocs de texte. Alternativement, vous pouvez fournir plus d’espace de travail aux auteurs en ajoutant des zones de texte. Ce champ de zone de texte crée une option d’entrée de Texte multiligne pour les paragraphes.
Lorsque vous ajoutez différents champs, vous aurez accès à différentes options de configuration. Dans la capture d’écran ci – dessous, nous utilisons le texte comme type de champ. Pour les champs de texte, vous pouvez fournir du texte de substituant et spécifier une limite de caractères. Vous pouvez également utiliser la largeur du champ pour spécifier son apparence sur le site: 
Vous pouvez répéter ces étapes pour chaque champ d’un bloc personnalisé. Lorsque vous êtes satisfait de la façon dont le bloc est configuré, cliquez sur publier. Cet article sera maintenant disponible dans le sélecteur de blocs WordPress. Étape 3: créer un modèle de bloc pour afficher correctement le nouveau bloc, vous devez créer un modèle de bloc pour le thème WordPress sélectionné. Cela comprend toutes les données de champ utilisées dans le bloc personnalisé, comme les photos de l’auteur et le texte biographique.
Vous devez stocker le modèle de bloc dans le Répertoire du thème actif. La façon d’accéder à ce répertoire varie selon l’environnement hôte. Toutefois, la plupart des fournisseurs d’hébergement fourniront un accès FTP (Protocole de transfert de fichiers). Vous pouvez ensuite vous connecter à distance au fournisseur d’hébergement en utilisant un client FTP comme Filezilla. Si vous n’êtes pas certain de la façon de le faire, consultez la documentation du fournisseur ou Communiquez directement avec lui pour obtenir de l’aide. Une fois que vous vous êtes connecté avec succès au site, vous pouvez ouvrir le répertoire des sujets actifs. À