Кнопка подчеркивания RichText в пользовательском блоке Gutenberg

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

Содержание

Вопрос или проблема
Ответ или решение
Объяснение кода:

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

Я работаю над кастомным блоком для Gutenberg, и часть этого блока — компонент RichText. Я пытаюсь добавить кнопку, которая подчеркивает текст, и не могу заставить это работать с прошлой ночи. У меня есть следующий код [который не работает]:

<div>
            <BlockControls
                controls={ [
                    {
                        icon: 'editor-underline',
                        title: __( 'Подчеркнуть' ),
                        onClick: () => {
                          console.log(this.test.current, this)
                            this.test.current.props.onChange(toggleFormat(
                              this.test.current.props.record,
                                { type: 'core/underline' }
                            ) );
                        },
                    },
                ] }
                />
              <RichText
                  tagName="p"
                  label="Введение"
                  className={ className }
                  multiline="br"
                  ref={this.test}
                  value={ content }
                  formattingControls={[]}
                  onChange={ ( content ) => { this.props.setAttributes( { content } ) } }
              />
            </div>

Можете помочь мне разобраться с этой проблемой?

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

В нем есть кнопки/пункты меню для Жирного, Италик, Кода, Ссылки, Встраиваемого Изображения и Зачеркивания.

Хотя кнопки подчеркивания текста нет, я могу просто использовать сочетание клавиш [cmd+U], и это работает.

Это, похоже, работает и сохраняется как на фронтенде, так и на бэкенде.

Если это бы работало. Возможно, есть несколько причин, почему оно перестало работать. Есть ли у вас какие-либо ошибки в консоли?

Вы пробовали удалить блок и добавить его снова?

ИЗМЕНЕНИЕ: Я новичок в разработке блоков Gutenberg, так что я не знаю, что делать!

Вам может быть это полезно, если вы еще не натолкнулись на это.

Добавить кнопки форматирования к блокам Gutenberg core/paragraph BlockControls

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

Конечно! Давайте разберем, как добавить кнопку подчеркивания текста в ваш пользовательский блок Gutenberg с использованием компонента RichText. Проблема, с которой вы сталкиваетесь, может быть связана с неправильным использованием метода toggleFormat и отсутствием подключения нужных методов.

Вот полный пример кода, который должен помочь вам создать кнопку для подчеркивания текста:

import { registerBlockType } from '@wordpress/blocks';
import { RichText, BlockControls } from '@wordpress/block-editor';
import { Toolbar, IconButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { toggleFormat } from '@wordpress/rich-text';

const MyCustomBlock = ( { attributes, setAttributes } ) => {
    const { content } = attributes;

    const onChangeContent = ( newContent ) => {
        setAttributes( { content: newContent } );
    };

    const addUnderline = () => {
        // Получаем текущее состояние текста
        const newContent = toggleFormat( content, { type: 'core/underline' } );
        onChangeContent(newContent);
    };

    return (
        <div>
            <BlockControls>
                <Toolbar>
                    <IconButton
                        icon="editor-underline"
                        title={ __( 'Underline' ) }
                        onClick={ addUnderline }
                    />
                </Toolbar>
            </BlockControls>
            <RichText
                tagName="p"
                value={ content }
                onChange={ onChangeContent }
                placeholder={ __( 'Введите текст...' ) }
            />
        </div>
    );
};

registerBlockType( 'your-namespace/my-custom-block', {
    title: __( 'Мой пользовательский блок' ),
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit: MyCustomBlock,
    save: ( { attributes } ) => {
        return <RichText.Content tagName="p" value={ attributes.content } />;
    },
} );

Объяснение кода:

Импорты: Мы импортируем необходимые компоненты из библиотеки WordPress, включая registerBlockType, RichText, BlockControls, Toolbar, и IconButton.
Состояние блока: В атрибутах используется content, которое будет хранить содержимое текста.
onChangeContent: Эта функция обновляет состояние content при изменении текста.
addUnderline: В этой функции используется toggleFormat, чтобы добавить или убрать формат подчеркивания из текста.
BlockControls: Здесь мы добавляем кнопку для подчеркивания текста. При нажатии на кнопку вызывается addUnderline.
Рендеринг: В основном рендере блока используется компонент RichText для редактирования текста.

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

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