Как добавить атрибуты data в WordPress блок Gutenberg

В современных проектах на WordPress часто возникает необходимость добавить в блоки Gutenberg нестандартные атрибуты, например, data-* для передачи дополнительной информации, которая может использоваться JavaScript-скриптами или стилями. В этой статье мы подробно рассмотрим, как правильно реализовать добавление таких атрибутов в кастомные и стандартные блоки Gutenberg на WordPress.

Почему нужны атрибуты data в блоках Gutenberg

Атрибуты data-* — это универсальный способ хранить пользовательские данные в HTML-элементах. Они позволяют разработчикам легко добавлять дополнительную информацию, не нарушая валидность HTML и не создавая лишних классов или инлайновых стилей.

В контексте Gutenberg это особенно полезно для передачи данных между PHP, редактором блоков и JavaScript, где эти атрибуты могут использоваться для динамического изменения поведения блоков или интеграции с внешними библиотеками.

Например, вы можете захотеть добавить data-animation="fade-in" для применения анимации к определённому блоку или data-id для идентификации элементов на фронтенде.

Без возможности добавлять такие атрибуты работа с динамикой блоков будет ограничена, что снижает их гибкость и расширяемость.

Как добавить пользовательские атрибуты data в кастомный блок Gutenberg

Рассмотрим пример, как добавить атрибут data-custom в кастомный блок. Для начала в файле регистрации блока (обычно block.json или PHP-скрипте) необходимо определить новый атрибут:

{
  "attributes": {
    "dataCustom": {
      "type": "string",
      "default": ""
    }
  }
}

В JavaScript-редакторе блока нужно добавить поле для редактирования этого атрибута, например, с помощью компонента TextControl:

const { TextControl } = wp.components;

function WpblockEdit(props) {
  const { attributes, setAttributes } = props;
  return (
    <div>
      <TextControl
        label="Custom data attribute"
        value={attributes.dataCustom}
        onChange={value => setAttributes({ dataCustom: value })}
      />
      <p>Текст внутри блока</p>
    </div>
  );
}

Для вывода блока на фронтенде и в редакторе необходимо передать этот атрибут в HTML-элемент с префиксом data-. Это делается через функцию save в JavaScript:

function WpblockSave(props) {
  const { attributes } = props;
  return (
    <div data-custom={attributes.dataCustom}>
      <p>Текст внутри блока</p>
    </div>
  );
}

Если блок рендерится на сервере (PHP), то атрибут нужно добавить в функцию рендеринга:

function wpblock_render_callback( $attributes ) {
    $data_custom = isset( $attributes['dataCustom'] ) ? esc_attr( $attributes['dataCustom'] ) : '';
    return '<div data-custom="' . $data_custom . '">Текст внутри блока</div>';
}

Добавление атрибутов data в стандартные блоки через фильтры

Часто возникает задача добавить нестандартные атрибуты data-* в уже существующие стандартные блоки, например, core/paragraph. Для этого можно использовать фильтр blocks.getSaveContent.extraProps в JavaScript.

Пример кода, который добавляет атрибут data-wpblock="true" ко всем параграфам:

wp.hooks.addFilter(
  'blocks.getSaveContent.extraProps',
  'wpblock/add-data-attributes',
  (props, blockType, attributes) => {
    if (blockType.name === 'core/paragraph') {
      return {
        ...props,
        'data-wpblock': 'true',
      };
    }
    return props;
  }
);

Этот фильтр позволяет модифицировать свойства, которые будут добавлены к блоку при сохранении, включая дополнительные атрибуты.

Особенности и ограничения

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

Также стоит учитывать, что добавление атрибутов в редакторе может потребовать дополнительной обработки при сохранении, если блок использует серверный рендеринг.

Практические примеры использования атрибутов data в блоках

1. Интеграция с JavaScript-анимациями. Например, добавляя data-animation="slide-up", можно потом на фронтенде через библиотеку анимаций запускать нужные эффекты.

2. Идентификация блоков для аналитики. Добавьте data-block-id с уникальным идентификатором, чтобы отслеживать взаимодействия пользователей с разными частями контента.

3. Динамическая смена стилей. Через JavaScript можно менять стили блоков в зависимости от значений data-атрибутов, не затрагивая классы.

Лучшие плагины для работы с кастомными атрибутами и блоками Gutenberg

Если вы не хотите писать код самостоятельно, рассмотрите следующие плагины, которые расширяют возможности Gutenberg по работе с атрибутами и настройками блоков:

• Advanced Custom Fields (ACF) Pro — позволяет создавать пользовательские поля и интегрировать их в блоки с поддержкой data-атрибутов.
• Block Lab — удобный конструктор блоков с возможностью добавлять свои атрибуты.
• Lazy Blocks — конструктор блоков с гибкой системой атрибутов, включая поддержку data-атрибутов.

Эти плагины значительно ускоряют разработку и позволяют настраивать блоки без глубоких знаний JavaScript.

Заключение — рекомендации по добавлению data-атрибутов в Gutenberg

Добавление кастомных атрибутов data-* в блоки Gutenberg — эффективный способ расширить функциональность и интеграцию с фронтенд-логикой. Главное — правильно определить атрибуты, добавить их в attributes блока, обеспечить удобный UI для редактирования и корректно вывести их в разметке как в редакторе, так и на фронтенде.

Используйте фильтры для изменения стандартных блоков и тестируйте совместимость с темами и плагинами. Для быстрой разработки рассмотрите готовые плагины-конструкторы блоков с поддержкой кастомных атрибутов.

Следуя этим рекомендациям, вы получите гибкие, расширяемые и удобные для поддержки блоки, которые легко интегрируются в любые проекты на WordPress.