Измените метку аппендера блока ‘Добавить блок’ InnerBlocks

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

Я использую аппендер кнопки, как указано в документации.

// Используйте предопределенный компонент
<InnerBlocks
    renderAppender={ InnerBlocks.ButtonBlockAppender }
/>

По умолчанию заголовок аппендера (при наведении) имеет текст “Добавить блок”. Я хотел бы изменить его на пользовательский заголовок, не определяя совершенно новый пользовательский аппендер. Я не могу найти способ сделать это, просмотрев документацию и исходный код редактора блоков.

Я вижу, что основные блоки Buttons и Columns делают это и изменяют аппендер на “Добавить кнопку” и “Добавить колонку” соответственно. Но пока я не смог найти, где в коде изменяются заголовки аппендеров.

Возможно, это делается путем обновления строк перевода, как кто-то предложил в Twitter.

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

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/button-block-appender/index.js#L37-L42

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


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

Чтобы изменить текст подсказывающего (tooltip) сообщения для кнопки "Добавить блок" в компоненте InnerBlocks в редакторе Gutenberg, требуется внести некоторые изменения в исходный код блока или же создать свою собственную реализацию аппендера. К сожалению, на данный момент не предусмотрена возможность прямого изменения текста по умолчанию для аппендера InnerBlocks.ButtonBlockAppender, и стандартные методы документации не предлагают этого.

Понимание проблемы

По умолчанию, когда вы используете аппендер кнопки, его текст при наведении будет "Добавить блок". Это можно увидеть в кредитуемом коде компонента, однако, при помощи стандартных средств изменения этого текста не предусмотрено, если в качестве дочерних блоков разрешено несколько типов.

Возможные пути решения

  1. Создание кастомного аппендера:
    Если в вашем случае требуется использовать несколько типов дочерних блоков, самым простым решением будет создание собственного компонента аппендера. Примерно такой:

    import { InnerBlocks } from '@wordpress/block-editor';
    import { Button } from '@wordpress/components';
    
    const CustomButtonBlockAppender = () => (
       <Button
           isPrimary
           onClick={/* функция для добавления блока */}
           title="Ваш собственный текст" // Здесь можно указать свой текст
       >
           Добавить новый блок
       </Button>
    );
    
    const MyCustomBlock = () => (
       <InnerBlocks renderAppender={CustomButtonBlockAppender} />
    );

    Это даст вам полную гибкость в настройке текста и поведения аппендера.

  2. Поиск возможности изменения через переводы:
    Для блока, где подразумевается только один тип дочернего блока, вы можете использовать функцию __() для изменения строки. Однако, учтите, что это имеет ограниченные возможности, и основные примеры использования предназначены именно для ситуаций с единственным типом блока.

  3. Анализ существующего кода:
    Взглянув на примеры из исходного кода ядра Gutenberg, можно заметить, что изменения текста реализованы через систему переводов, что подтверждает вашу идею. Но, как вы правильно заметили, это не применимо, если у вас несколько типов дочерних блоков.

Заключение

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

Таким образом, выбор пути решения остается за вами, и целесообразно учитывать масштабируемость и пользовательский опыт при принятии решения о реализации кастомизации.

Оцените материал
Добавить комментарий

Капча загружается...