Как удалить изображение из Gutenberg блока без удаления файла в WordPress

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

Почему стандартное удаление изображения в Gutenberg удаляет файл из библиотеки медиа

В стандартных блоках Gutenberg, например, «Изображение», при удалении картинки из блока сам файл из библиотеки не удаляется. Однако при использовании определённых плагинов или кастомных блоков с дополнительной логикой, иногда удаление изображения может привести к удалению файла.

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

Ключевой момент — отделять логику отображения изображения (ссылка на медиафайл) от самого файла и не инициировать вызовы удаления файла из медиа, если нужно только убрать изображение из блока.

Удаление изображения из стандартного блока «Изображение» в Gutenberg

В стандартном блоке «Изображение» удаление картинки происходит исключительно через очистку атрибута url изображения. Файл в медиа библиотеке остаётся нетронутым. Чтобы удалить картинку из блока, можно использовать интерфейс редактора либо программно сбросить атрибут.

Пример сброса изображения в стандартном блоке через JavaScript (например, используя wp.data):

const { select, dispatch } = wp.data;
const blockClientId = 'ID_ВАШЕГО_БЛОКА';
dispatch('core/block-editor').updateBlockAttributes(blockClientId, { url: '', id: 0 });

Здесь мы очищаем атрибуты url и id, которые отвечают за изображение.

Таким образом, изображение убирается из блока, но файл остаётся в медиа библиотеке.

Удаление изображения из кастомного Gutenberg блока без удаления файла

При создании собственного блока на основе wpblock часто используют атрибуты типа imageID и imageURL для управления изображением. Чтобы удалить изображение, достаточно очистить эти атрибуты.

Пример функции удаления изображения, которую можно вызвать из кнопки внутри блока:

function wpblockRemoveImage(setAttributes) {
  setAttributes({
    imageID: null,
    imageURL: null,
  });
}

В редакторе это может выглядеть так:

<button onClick={() => wpblockRemoveImage(setAttributes)}>Удалить изображение</button>

При этом файл останется в библиотеке, так как мы не вызываем никаких функций удаления из медиа.

Реализация кнопки удаления в блоке

Пример полного кода кнопки удаления внутри edit() функции блока:

const { Button } = wp.components;

const Edit = (props) => {
  const { attributes, setAttributes } = props;

  const removeImage = () => {
    setAttributes({ imageID: null, imageURL: null });
  };

  return (
    <div>
      {attributes.imageURL && <img src={attributes.imageURL} alt="" />}
      <Button isDestructive onClick={removeImage}>Удалить изображение</Button>
    </div>
  );
};

Таким образом, мы даём пользователю возможность убрать картинку из блока, не затрагивая физический файл.

Как избежать случайного удаления файлов из медиа библиотеки

Частая ошибка при работе с изображениями в блоках — путать удаление из блока с удалением из медиа библиотеки. Чтобы не удалять файл, не вызывайте функций типа wp.media.model.Attachment.delete() или REST API вызовов на удаление медиа.

Если в вашем блоке есть логика удаления, убедитесь, что она действует только на атрибуты блока, а не на медиафайлы.

Для дополнительной безопасности можно реализовать подтверждение перед удалением файла из библиотеки, если такой функционал всё же нужен.

Пример проверки и подтверждения удаления файла

Если нужно реализовать удаление файла, сделайте диалог подтверждения:

if (confirm('Вы действительно хотите удалить изображение из библиотеки? Это действие необратимо.')) {
  wp.media.model.Attachment.get(imageID).destroy();
}

Но для задачи удаления только из блока этого не требуется.

Плагины, помогающие управлять изображениями в Gutenberg блоках

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

• Advanced Custom Fields (ACF) — с ACF Gutenberg блоки можно создавать с удобными полями для загрузки/удаления изображений без риска удаления файлов.
• Block Lab — визуальный конструктор блоков с простым управлением медиа.
• Media Library Assistant — расширяет возможности медиа библиотеки, помогает фильтровать и управлять файлами.

Использование этих плагинов упрощает контроль над изображениями и минимизирует ошибки при удалении.

Итог: простой и безопасный способ удалить изображение из блока

Основная рекомендация — для удаления изображения из Gutenberg блока меняйте только атрибуты блока, связанные с изображением (например, imageID, url), и не вызывайте удаление медиафайла.

При разработке кастомных блоков используйте функцию wpblockRemoveImage для централизованного управления очисткой атрибутов.

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