Мне нужно выбрать текст из редактора Гутенберга. Цель – сохранить и заменить текст.

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

const { select } = wp.data;
const selectedBlock = select('core/block-editor').getSelectedBlock();

if (selectedBlock) {
    const selectedText = selectedBlock.attributes.content;
    console.log("Выбранный текст:", selectedText);
    // Сохраните selectedText по мере необходимости.
}

const { dispatch } = wp.data;
const newText = "Новый текст для замены";

dispatch('core/block-editor').updateBlockAttributes(selectedBlock.clientId, {
    content: newText
});

localStorage.setItem('selectedText', selectedText);

const storedText = localStorage.getItem('selectedText');
console.log("Сохраненный текст:", storedText);

const { registerPlugin } = wp.plugins;
const { PluginBlockSettingsMenuItem } = wp.editPost;

const MyReplaceTextPlugin = () => (
    <PluginBlockSettingsMenuItem
        label="Заменить текст"
        onClick={() => {
            const newText = "Замененный текст!";
            dispatch('core/block-editor').updateBlockAttributes(selectedBlock.clientId, {
                content: newText
            });
        }}
    />
);

registerPlugin('my-replace-text-plugin', {
    render: MyReplaceTextPlugin
});

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

Выбор текста и его замена в редакторе Gutenberg — задача, для которой существует набор инструментов в WordPress. Для достижения этой цели вам нужно будет использовать API вашего редактора. Ниже приведен полный пример кода, который поможет вам выбрать текст, сохранить его и заменить, когда это необходимо.

Шаг 1. Выбор текста в редакторе Gutenberg

const { select } = wp.data;
const selectedBlock = select('core/block-editor').getSelectedBlock();

if (selectedBlock) {
    const selectedText = selectedBlock.attributes.content; // Получаем текст текущего блока
    console.log("Выбранный текст:", selectedText);
    // Сохраняем выбранный текст локально для последующего использования
    localStorage.setItem('selectedText', selectedText);
}

Шаг 2. Замена текста внутри блока

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

const { dispatch } = wp.data;
const newText = "Новый текст для замены"; // Заменяемый текст

dispatch('core/block-editor').updateBlockAttributes(selectedBlock.clientId, {
    content: newText
});

Шаг 3. Сохранение и повторное использование выбранного текста

Вы можете сохранить выбранный текст в localStorage и затем извлечь его для последующего использования:

// Извлечение сохраненного текста из localStorage
const storedText = localStorage.getItem('selectedText');
console.log("Сохраненный текст:", storedText);

Шаг 4. Создание плагина для замены текста

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

const { registerPlugin } = wp.plugins;
const { PluginBlockSettingsMenuItem } = wp.editPost;

const MyReplaceTextPlugin = () => (
    <PluginBlockSettingsMenuItem
        label="Заменить текст"
        onClick={() => {
            const newText = "Заменённый текст!"; // Текст, на который будет произведена замена
            const selectedBlock = select('core/block-editor').getSelectedBlock();
            if (selectedBlock) {
                dispatch('core/block-editor').updateBlockAttributes(selectedBlock.clientId, {
                    content: newText // Обновляем содержимое блока
                });
            }
        }}
    />
);

registerPlugin('my-replace-text-plugin', {
    render: MyReplaceTextPlugin
});

Заключение

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