Гутенберг: Как отключить удаление блока с помощью клавиши Backspace/Delete?

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

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

Вопрос о том, как отключить удаление блока в редакторе Gutenberg нажатиями клавиш Backspace/Delete, представляет собой интересную задачу для разработчиков, работающих с настройками пользовательского опыта в WordPress. Эту проблему необходимо решать, учитывая особенности поведения редактора Gutenberg и взаимодействие событий клавиатуры с собственными обработчиками пользовательских блоков.

Теория

Основная проблема заключается в том, что стандартное поведение клавиш Backspace и Delete в редакторе Gutenberg предполагает удаление или объединение блоков. Это поведение осуществляется на уровне ядра редактора, что может конфликтовать с уникальными обработчиками событий, особенно если блок не содержит RichText-поля и слушатели клавиш должны обрабатывать эти события иначе.

Редактор Gutenberg организован на основе React и специализируется на обработке компонентов и событий, что делает его мощным, но в то же время накладывает ограничения на стандартное поведение элементов интерфейса. Важно понимать, как события клавиатуры обрабатываются на уровне компонентов: многие стандартные события обрабатываются на фазах погружения (capturing) или всплытия (bubbling) в DOM-дереве.

Пример

Представьте, что у вас есть пользовательский блок, который обрабатывает клавиши Backspace и Delete для внутренней логики, скажем, для перемещения по элементам внутри блока или выполнения какого-то действия. Однако стандартный обработчик Gutenberg «перехватывает» это событие и удаляет блок раньше, чем оно достигнет вашего обработчика.

Применение

Для решения проблемы можно использовать несколько подходов:

1. Переопределение поведения событий на уровне блока:

   Можно использовать API React для предотвращения стандартного поведения событием. В функции компонента блока, при определении специфичного для вашего блока обработчика, используйте методы preventDefault() и stopPropagation() в обработчике событий. Это может выглядеть следующим образом в коде на JavaScript:

   function MyCustomBlock({ className }) {
    const handleKeyDown = (event) => {
      if (event.key === 'Backspace' || event.key === 'Delete') {
        event.preventDefault();
        event.stopPropagation();
        // Ваша логика обработки событий клавиш
      }
    };
   
    return (
      <div className={className} onKeyDown={handleKeyDown}>
         {/* Ваши элементы блока */}
      </div>
    );
   }

2. Использование экспериментальных или низкоуровневых API:

   Gutenberg поддерживает расширение функциональности через хуки и фильтры, которые могут быть использованы для изменения стандартного поведения редактора. Например, можете интегрировать useEffect в ваш компонент, чтобы применить специфичную логику на уровне React.

3. Закрепление блока с возможностью ручного удаления:

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

   wp.data.dispatch( 'core/editor' ).lockPostSaving( 'unique-lock-name' );

Заключение

Реализация вышеописанных подходов позволит вам предотвратить удаление блока клавишами Backspace/Delete, обеспечивая при этом стандартные возможности редактирования через UI WordPress. Это требует подробного понимания работы с событиями в JavaScript и особенностей React, используемых в Gutenberg.

Путем применения предложенных методов, вы сможете создать блок, который наилучшим образом соответствует вашим требованиям к пользовательскому интерфейсу и функциональности, не нарушая стандартных механизмов редактирования WordPress.