Добавление пользовательских атрибутов HTML с помощью подключаемого модуля атрибутов блока

Ранее на этой неделе websevendev выпустила свой четвертый плагин WordPress в официальном каталоге под названием Block Attributes . Расширение позволяет конечным пользователям добавлять любой атрибут HTML практически в любой блок.

Одна из проблем редактора WordPress заключается в том, что он может немного привередничать с настройкой HTML. Блоки построены на наборе стандартов, и предполагается, что разметка соответствует этим ожиданиям. Если что-то не подходит, пользователи видят предупреждение о недопустимой разметке.

Однако бывают случаи, когда пользователям необходимо добавить настраиваемый атрибут HTML по разным причинам. Например, мне иногда нужно добавить настраиваемый data-атрибут для работы с небольшим количеством JavaScript. Поскольку я достаточно хорошо разбираюсь в коде, я обычно пишу HTML в таких ситуациях через блок Custom HTML. Но это не имеет смысла, когда требуется незначительное добавление атрибутов.

В настоящее время WordPress позволяет пользователям добавлять классы и идентификаторы (называемые «привязкой HTML» в админке) почти к каждому блоку. Он не позволяет напрямую вводить десятки других возможных атрибутов, поддерживаемых HTML. Вариантов использования для обычного пользователя немного, и они очень редки.

Для тех сценариев, где некоторые пользователи могут использовать дополнительную функцию, удобен плагин Block Attributes.

Плагин прост в использовании. Он добавляет новое поле с именем «Дополнительные атрибуты» на вкладке «Дополнительно» каждого блока. Пользователи могут добавить имя атрибута и нажать кнопку «Добавить». Оттуда он создает новое поле для добавления значения атрибута.

Плагин также поддерживает несколько атрибутов. После того, как вы добавите одно, вы просто используете то же поле ввода для создания других.

Для своего первого тест-драйва я добавил простой onclick атрибут со значением myFunction(). Затем я перешел к своей теме и создал эту функцию с помощью JavaScript, чтобы вывести простое сообщение в консоль. Под капотом все выглядело хорошо, и все заработало.

Большинство вариантов использования, которые я имею в виду, предназначены для интеграции с JavaScript, и это был простой пример того, что возможно. С такой функцией разработчик может сделать гораздо более сложные вещи. Это достаточная причина, чтобы держать этот плагин в наборе инструментов – иногда вам нужен гаечный ключ вместо молотка.

Я также мог видеть, что атрибуты блока используются для добавления атрибутов ARIA в других ситуациях, когда это может способствовать доступности.

Пользователи могут добавлять собственные стили к конкретному блоку с помощью styleатрибута в плагине. Однако, если это не простой разовый прием, я бы не рекомендовал его. Для более сложных случаев использования Blocks CSS – гораздо более подходящий плагин. Он имеет встроенную подсветку синтаксиса. Кроме того, текстовое поле удобнее, чем однострочное текстовое поле ввода.

Единственный недостаток атрибутов блока, который я видел, – это деактивация. Вы увидите ужасное сообщение «этот блок содержит неожиданный или недопустимый контент» в редакторе, если вы добавили какие-либо настраиваемые атрибуты. Редактору удалось решить все проблемы, с которыми я столкнулся с основными блоками.

Деактивация плагина не должна влиять на вывод внешнего интерфейса. Поскольку настраиваемые атрибуты являются частью разметки HTML, они все равно будут там. Сообщение об ошибке должно отображаться только в редакторе.