Ajout d’attributs HTML personnalisés avec le plugin Block Attributes – WP Tavern

Plus tôt cette semaine, websevendev a publié son quatrième plugin WordPress dans le répertoire officiel nommé Attributs de bloc. L’extension permet aux utilisateurs finaux d’ajouter n’importe quel attribut HTML à presque n’importe quel bloc.

L’un des problèmes avec l’éditeur WordPress est qu’il peut être un peu pointilleux sur la personnalisation du HTML. Les blocs sont construits sur un ensemble de normes, et le balisage est censé répondre à ces attentes. Si quelque chose ne convient pas, les utilisateurs voient un avertissement de balisage non valide.

Cependant, il arrive parfois que les utilisateurs aient besoin d’insérer un attribut HTML personnalisé pour diverses raisons. Par exemple, j’ai parfois besoin d’ajouter un data- attribut pour travailler avec un peu de JavaScript. Comme je connais assez bien le code, j’écris généralement le code HTML dans ces situations via le bloc HTML personnalisé. Mais cela n’a pas de sens lorsque des ajouts d’attributs mineurs sont nécessaires.

WordPress permet actuellement aux utilisateurs d’ajouter des classes et des identifiants (appelés « ancre HTML » dans l’administrateur) à presque chaque bloc. Il ne permet pas la saisie directe des dizaines d’autres attributs possibles pris en charge par HTML. Les cas d’utilisation pour l’utilisateur moyen sont rares.

Pour les scénarios où certains utilisateurs pourraient utiliser la fonctionnalité supplémentaire, le plug-in Block Attributes est pratique.

Le plugin est simple à utiliser. Il ajoute un nouveau champ nommé « Attributs supplémentaires » sous l’onglet Avancé de chaque bloc. Les utilisateurs peuvent ajouter le nom de l’attribut et cliquer sur le bouton « Ajouter ». À partir de là, il crée un nouveau champ pour ajouter la valeur de l’attribut.

<img data-attachment-id="121863" data-permalink="https://wptavern.com/adding-custom-html-attributes-with-the-block-attributes-plugin/block-attributes-add" data-orig-file="https://wptavern.com/wp-content/uploads/2021/08/block-attributes-add.jpg" data-orig-size="2400,1125" data-comments-opened="0" data-image-meta="{" aperture="" data-image-title="block-attributes-add" data-image-description="" data-image-caption="" data-medium-file="https://wptavern.com/wp-content/uploads/2021/08/block-attributes-add-300x141.jpg" data-large-file="https://wptavern.com/wp-content/uploads/2021/08/block-attributes-add-500x234.jpg" loading="lazy" width="2400" height="1125" src="https://wptavern.com/wp-content/uploads/2021/08/block-attributes-add.jpg" alt="Ajout d'un attribut personnalisé pour la gestion de JavaScript à un bloc Button dans l'éditeur WordPress via le panneau du plugin Block Attributes." class="wp-image-121863" srcset="https://wptavern.com/wp-content/uploads/2021/08/block-attributes-add.jpg 2400w, https://wptavern.com/wp-content/uploads/2021/08/block-attributes-add-300x141.jpg 300w, https://wptavern.com/wp-content/uploads/2021/08/block-attributes-add-500x234.jpg 500w, https://wptavern.com/wp-content/uploads/2021/08/block-attributes-add-768x360.jpg 768w, https://wptavern.com/wp-content/uploads/2021/08/block-attributes-add-1536x720.jpg 1536w, https://wptavern.com/wp-content/uploads/2021/08/block-attributes-add-2048x960.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />Ajout d’un onclick attribut à un bloc Button.

Le plugin prend également en charge plusieurs attributs. Une fois que vous en avez ajouté un, vous utilisez simplement le même champ de saisie pour en créer d’autres.

Pour mon premier essai routier, j’ai ajouté un simple onclick attribut avec une valeur de myFunction(). Ensuite, je suis passé à mon thème et j’ai créé cette fonction via JavaScript pour afficher un message simple dans la console. Tout avait l’air bien sous le capot, et cela a fonctionné.

Vue HTML et console avec JS personnalisé pour un bloc Button.

La plupart des cas d’utilisation que j’ai en tête concernent l’intégration avec JavaScript, et c’était un exemple simple de ce qui est possible. Il y a des choses bien plus complexes qu’un développeur pourrait faire avec une telle fonctionnalité. C’est une raison suffisante pour garder ce plugin dans la boîte à outils – parfois, vous avez besoin d’une clé au lieu d’un marteau.

Je pouvais également voir des attributs de bloc utilisés pour ajouter des attributs ARIA dans d’autres situations où cela pourrait faciliter l’accessibilité.

Les utilisateurs peuvent ajouter des styles personnalisés à un bloc spécifique via un style attribut avec le plugin. Cependant, à moins qu’il ne s’agisse d’un simple ponctuel, je le déconseille. Pour les cas d’utilisation plus avancés, Bloque les CSS est un plugin bien plus approprié. Il a un surligneur de syntaxe intégré. De plus, une zone de texte est plus conviviale qu’une zone de saisie de texte sur une ligne.

Le seul inconvénient des attributs de bloc que j’ai vu est lors de la désactivation. Vous verrez le message redouté « ce bloc contient du contenu inattendu ou invalide » dans l’éditeur si vous avez ajouté des attributs personnalisés. L’éditeur a réussi à résoudre tous les problèmes que j’ai rencontrés avec les blocs de base.

<img data-attachment-id="121866" data-permalink="https://wptavern.com/adding-custom-html-attributes-with-the-block-attributes-plugin/block-attributes-warning" data-orig-file="https://wptavern.com/wp-content/uploads/2021/08/block-attributes-warning.jpg" data-orig-size="2400,1122" data-comments-opened="0" data-image-meta="{" aperture="" data-image-title="block-attributes-warning" data-image-description="" data-image-caption="" data-medium-file="https://wptavern.com/wp-content/uploads/2021/08/block-attributes-warning-300x140.jpg" data-large-file="https://wptavern.com/wp-content/uploads/2021/08/block-attributes-warning-500x234.jpg" loading="lazy" width="2400" height="1122" src="https://wptavern.com/wp-content/uploads/2021/08/block-attributes-warning.jpg" alt="Vue côte à côte du modal contextuel de résolution de bloc dans l'éditeur WordPress." class="wp-image-121866" srcset="https://wptavern.com/wp-content/uploads/2021/08/block-attributes-warning.jpg 2400w, https://wptavern.com/wp-content/uploads/2021/08/block-attributes-warning-300x140.jpg 300w, https://wptavern.com/wp-content/uploads/2021/08/block-attributes-warning-500x234.jpg 500w, https://wptavern.com/wp-content/uploads/2021/08/block-attributes-warning-768x359.jpg 768w, https://wptavern.com/wp-content/uploads/2021/08/block-attributes-warning-1536x718.jpg 1536w, https://wptavern.com/wp-content/uploads/2021/08/block-attributes-warning-2048x957.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />Résoudre l’avertissement de blocage après la désactivation du plugin.

La désactivation du plugin ne devrait pas affecter la sortie frontale. Étant donné que les attributs personnalisés font partie du balisage HTML, ils seront toujours là. Le message d’erreur ne doit s’afficher que dans l’éditeur.

Comme ça:

Comme Chargement…

— to wptavern.com