Как удалить или скрыть контекстное меню в редакторе WordPress (Gutenberg)

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

Что такое контекстное меню в Gutenberg и зачем его удалять

Контекстное меню — это всплывающее окно с опциями, которое появляется над текстом или блоком. Оно содержит кнопки форматирования, настройки и действия с блоком. В ряде случаев, например при создании специализированного редактора или блоков с уникальным поведением, стандартное меню мешает UX или просто не нужно.

Удаление этого меню позволяет:

• Создать более минималистичный интерфейс.
• Избежать конфликтов с кастомными элементами.
• Повысить производительность редактора за счёт уменьшения количества рендеров.

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

Как убрать контекстное меню с помощью стандартных хуков Gutenberg

WordPress Gutenberg построен на React и использует JavaScript. Для управления поведением редактора применяются filters и hooks с пакета @wordpress/hooks. Чтобы убрать контекстное меню, можно воспользоваться фильтром editor.BlockEdit и изменить или отключить его рендеринг.

Вот пример функции для удаления контекстного меню над блоком:

function wpsellRemoveContextMenu( BlockEdit ) {
  return ( props ) => {
    // Отключаем меню при выделении текста внутри блока
    // Можно кастомизировать под конкретные блоки
    return <BlockEdit { ...props } />;
  };
}
wp.hooks.addFilter(
  'editor.BlockEdit',
  'wpsell/remove-context-menu',
  wpsellRemoveContextMenu
);

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

Удаление меню с помощью фильтра Blocks API

Другой способ — переопределить настройки блоков через фильтр blocks.registerBlockType и отключить поддержку контекстного меню там, где это возможно.

function wpsellDisableContextMenuSettings( settings, name ) {
  if ( name === 'core/paragraph' ) {
    return lodash.assign( {}, settings, {
      supports: lodash.assign( {}, settings.supports, {
        __experimentalDisablePostFormats: true,
      } ),
    } );
  }
  return settings;
}
wp.hooks.addFilter(
  'blocks.registerBlockType',
  'wpsell/disable-context-menu-settings',
  wpsellDisableContextMenuSettings
);

Обратите внимание, что в Gutenberg нет официального способа полностью отключить контекстное меню через PHP, поскольку это клиентская часть.

Отключение контекстного меню через CSS

Самый простой способ — скрыть элемент меню с помощью CSS. Это легко сделать, добавив кастомный стиль в админку WordPress:

function wpsellHideContextMenuCss() {
  echo '<style>
    .block-editor-contextual-toolbar {
      display: none !important;
    }
  </style>';
}
add_action( 'admin_head', 'wpsellHideContextMenuCss' );

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

Примеры плагинов для управления редактором Gutenberg

Если хочется более гибко настраивать редактор, можно использовать плагины, которые расширяют или изменяют поведение блоков и интерфейса:

• Clearfy Pro — позволяет отключать лишние функции WordPress, в том числе можно ограничить поведение редактора.
• WPCommunity — плагин для управления контентом и настройками редактора.

Также можно создавать собственные блоки без контекстного меню, задавая свои шаблоны и поведение.

Как создать блок без контекстного меню — пример кода

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

const { registerBlockType } = wp.blocks;

registerBlockType('wpsell/no-context-menu-block', {
  title: 'Блок без контекстного меню',
  icon: 'block-default',
  category: 'common',
  supports: {
    inserter: true,
    reusable: false,
    html: false,
    customClassName: false,
    // Отключаем настройки панели и контекстного меню
    __experimentalDisablePostFormats: true,
  },
  edit() {
    return wp.element.createElement('p', null, 'Это блок без контекстного меню.');
  },
  save() {
    return wp.element.createElement('p', null, 'Это блок без контекстного меню.');
  },
});

Этот пример показывает, как при регистрации блока ограничить стандартное поведение, чтобы меню не появлялось. Но стоит тестировать, так как API Gutenberg постоянно развивается.

Итоги и рекомендации

Удаление или скрытие контекстного меню в редакторе WordPress Gutenberg — задача нетривиальная, так как это встроенный элемент интерфейса. Лучшие подходы:

• Использовать CSS, чтобы скрыть меню, если нужно быстро и просто.
• Писать кастомные блоки с отключёнными настройками меню.
• Применять фильтры JavaScript в редакторе, но внимательно тестировать совместимость с будущими версиями WordPress.
• Использовать специализированные плагины, например, Clearfy Pro, для управления редактором.

Такой подход позволит гибко управлять UX при работе с контентом и создавать уникальные решения для вашего сайта.