className не заполняется в пользовательском блоке

Содержание

Вопрос или проблема
Ответ или решение
Проблема: Не заполняется className в пользовательском блоке
Описание проблемы
Причины
Решение
Заключение

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

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

Моя функция редактирования использует return() и передает это:

<>
    <div className={className}>
        <RichText
            tagName="a"
            //
            placeholder={__("Добавьте текст…", plugin.slug)}
            value={text}
            //
            formattingControls={["жирный", "курсив", "зачеркнутый"]}
            //
            onChange={this.onChangeContent}
            //
        />
    </div>
</>

И в моей функции сохранения я также использую return() и пытался передать ряд вариантов, описанных ниже.

Прямое использование RichText.Content:

<RichText.Content
    tagName="a"
    value={text}
    className={className}
/>

С линией className или без нее, это сохраняет <a class="…">Текст демо</a> в базе данных.
Это ожидалось, однако мне нужно обернуть тег ссылки в что-то еще.

Использование обертки:

<>
    <RichText.Content
        tagName="a"
        value={text}
        className={className}
    />
</>

Выше я обернул тег a в <> и </>, но с линией className или без нее, имя класса не заполняется в функции сохранения. <a>Текст демо</a> всегда сохраняется в базе данных.

Использование div:

<div>
    <RichText.Content
        tagName="a"
        value={text}
        className={className}
    />
</div>

Выше я обернул тег a в <div> и </div>, но с линией className или без нее в теге RichText, имя класса заполняется только в div теге при сохранении в базе данных. <div class="…"><a>Текст демо</a></div> всегда сохраняется в базе данных.

То же самое происходит, когда я переключаюсь с тега a на тег p.

Есть ли способ получить имя класса для тегов, обёрнутых в другие теги?
Или у кого-то есть ссылка на более подробную информацию о том, как работает имя класса?

Спасибо!
Дейл.

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

Например, в следующем примере кода, где имя класса warning

return (
<div className="other-class-name" value={ props.attributes.content } />;

вернет элемент на фронтэнде

<div class="wp-block-block-name is-warning other-class-name">

https://developer.wordpress.org/block-editor/developers/block-api/block-registration/#supports-optional содержит дополнительную информацию

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

Проблема: Не заполняется className в пользовательском блоке

Здравствуйте, Дейл.

Вы столкнулись с распространенной проблемой при разработке пользовательских блоков для редактора Gutenberg: класс className не появляется в ожидаемых тегах. Давайте подробно рассмотрим вашу ситуацию и найдем оптимальное решение.

Описание проблемы

В вашем коде, как вы указали, вы пытаетесь применить класс к тегам <a> или <p>, оборачивая их в другие HTML-теги. Однако класс не сохраняется в целевых тегах на выходе функции save. Рассмотрим вашу реализацию:

Использование RichText.Content:
```
<RichText.Content tagName="a" value={text} className={className} />
```
Этот подход корректно сохраняет класс в тег <a>, но его невозможно обернуть.
Оборачивание тегами <></>:
```
<>
  <RichText.Content tagName="a" value={text} className={className} />
</>
```
Даже в этом случае класс не сохраняется в нужном теге.
Использование <div> как обертки:
```
<div>
  <RichText.Content tagName="a" value={text} className={className} />
</div>
```
Здесь класс появляется только на обертывающем элементе <div>, но не распространяется на <a>.

Причины

Причина, по которой класс не появляется в не-основных тегах, заключается в том, что Gutenberg обрабатывает className только для корневого элемента блока. Это проектное решение, которое гарантирует, что стили корректно применяются именно к основному контейнеру блока.

Решение

Для достижения вашей цели — наличия класса в тегах обертки с текстом — имеются несколько альтернатив:

Классы в родительском элементе:
Используйте родительский элемент для применения классов, а внутри него размещайте необходимые теги. Это гарантирует, что стили применяются ко всему блоку, а не только к отдельному тегу.
```
return (
   <div className={className}>
       <RichText.Content tagName="a" value={text} />
   </div>
);
```
Кастомизация через атрибуты:
Если вам нужно применить уникальное оформление для внутреннего тега, вы можете использовать атрибуты data-*, чтобы передавать дополнительные стили через JavaScript или CSS.
Использование стилей через CSS:
Если это единственный тег, который вам нужно стилизовать, рассмотрите возможность применения некоторых стилей к родительскому элементу, используя селекторы CSS.
```
.custom-class a {
   color: red; /* Пример применения стилей к тегу <a> внутри обертки */
}
```

Заключение

К сожалению, механизм Gutenberg ограничивает возможность применения классов к определенным внутренним тегам. Однако, вы можете обойти это ограничение, корректно применяя стили к родительским элементам. Для более детальной информации о поддерживаемых атрибутах и классах рекомендую изучить документацию на сайте разработчиков WordPress.

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

С уважением,
[Ваше имя]
IT-эксперт по разработке блоков для Gutenberg