Изображения в блоке

Урок 5

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

Урок 5

Загрузка / Добавление изображений в блок

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

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

интерфейс добавления ихображений в блок Gutenberg
У нас также есть возможность сделать произвольное отображение серого блока с кнопкой «Добавить фото» при помощи CSS и произвольного HTML

При нажатии на кнопку «Добавить фото» у нас будет открываться стандартное модальное окно медиагалереи WordPress, в котором мы можем загрузить новое изображение или выбрать из уже существующих.

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

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

Блок с изображением в Gutenberg
Кнопка «Удалить» появляется только при фокусе на блоке