Как вернуть div с пользовательскими атрибутами (Программирование блока Gutenberg)

На чтение 3 мин Опубликовано 13.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Шаги для создания блока Gutenberg с пользовательскими атрибутами
Заключение

Вопрос или проблема

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

Более конкретно, я научился создавать блок, который выводит div с пользовательским классом, но я не могу найти, как добавить пользовательский атрибут div…

Вот код, отвечающий за вывод блока:

return el( 'div',
      {
         className: 'review-widget',
      }

   ); // Конец возврата

и это выводит

<div class="review-widget"></div>

правильно.

Однако мне нужно вывести div вот так:

<div class="review-widget" data-limit="10"></div>

но у меня возникают трудности с добавлением data-limit=”10″ к div.

Я пробовал:

return el( 'div',
      {
         className: 'review-widget',
         data-limit: 10
      }

   ); // Конец возврата

но это не сработало…

Буду признателен за любые идеи 🙂

Вы можете попробовать вернуть JSX, пропуская часть el:

return (
    <div
        className="review-widget"
        data-limit="10"
    >
    </div>
);

Также возможно, что вам нужно заключить 10 в кавычки в вашем исходном примере el.

Я нашел свой ответ здесь: https://stackoverflow.com/questions/43410377/how-to-add-data-attribute-without-value-in-react-create-element \o/

И имя атрибута, и значение атрибута должны быть заключены в кавычки:

return el( 'div',
      {
         className: 'review-widget',
         'data-limit': '10'
      }

   ); // Конец возврата

Ответ или решение

Создание кастомного блока Gutenberg с пользовательскими атрибутами может быть немного запутанным, особенно если вы только начинаете. В чем заключается ваша проблема? Вы хотите вывести div, которому будут назначены кастомные атрибуты, такие как data-limit. Мы разберем это шаг за шагом.

Шаги для создания блока Gutenberg с пользовательскими атрибутами

Установка и создание блока: Убедитесь, что у вас установлен WordPress с поддержкой Gutenberg. Создайте новый блок с использованием @wordpress/blocks, @wordpress/element, и других необходимых библиотек. Ниже приведен пример структуры подключения:

import { registerBlockType } from '@wordpress/blocks';
import { createElement as el } from '@wordpress/element';

registerBlockType('my-plugin/review-widget', {
    title: 'Review Widget',
    category: 'widgets',
    edit: () => {
        return el('div', {
            className: 'review-widget',
            'data-limit': '10' // Ключ и значение должны быть в кавычках
        });
    },
    save: () => {
        return el('div', {
            className: 'review-widget',
            'data-limit': '10' // Сохраните такой же код для получения атрибутов при сохранении
        });
    },
});

Добавление пользовательского атрибута: Вы уже нашли часть решения. Чтобы добавить кастомный атрибут, просто убедитесь, что как имя атрибута, так и его значение заключены в одинарные или двойные кавычки. Таким образом, правильный код для добавления data-limit в ваш div будет таким:
```
return el('div', {
    className: 'review-widget',
    'data-limit': '10'
});
```
Использование JSX: Если вам удобнее, вы можете использовать синтаксис JSX, что может сделать ваш код более читаемым. Вот пример, как это может выглядеть в JSX:
```
return (
    <div className="review-widget" data-limit="10">
    </div>
);
```
Применение блока: После разработки блока и его регистрации, вы сможете использовать его в редакторе Gutenberg, и он сгенерирует нужный вам HTML-код при публикации.
Проверка: После того, как вы зарегистрировали блок и использовали его, обязательно проверьте, что в сгенерированном HTML-коде присутствует нужный атрибут:
```
<div class="review-widget" data-limit="10"></div>
```

Заключение

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

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