Как вставить изображение в список в WordPress Gutenberg

Как вставить изображение в список в WordPress Gutenberg

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

Распространенная проблема со списками проявляется, когда нужно вставить изображения в списки. Обычно для того, чтобы вставить изображение в редактор, необходимо добавить блок изображения. Если сделать это внутри списков, то это приведет к поломке, поскольку блок изображения не может быть вложен внутрь списка.

Решением этого ограничения является использование встроенных изображений (inline images). В ранних итерациях редактора Gutenberg это было невозможно, но с тех пор они добавили эту функцию (хотя я считаю, что многие об этом не знают). Вот как это сделать.

Добавление встроенного изображения в блок списка

  1. Создайте список, добавив блок списка.
  2. Нажмите Shift+Enter, чтобы перейти к следующей строке, не переходя к следующему элементу списка.
  3. В верхней части редактора нажмите маленькую стрелку на блоке выбора блока и выберите Встроенное изображение.
    Как вставлять изображения внутри списков в WordPress Gutenberg Editor
  4. Теперь выберите или загрузите изображение для вставки из медиатеки.
  5. Изображение будет вставлено, но его ширина составит 150px. Чтобы изменить размер изображения, введите его новую ширину в поле и нажмите enter

    Как вставить изображение внутрь списков в редакторе WordPress Gutenberg Editor
  6. Если вы хотите удалить изображение, просто выделите его и нажмите клавишу Delete. Обратите внимание, что встроенное изображение не может быть снабжено надписью.
  7. Далее можете продолжать работу со списком, просто нажав Enter!

Вы заметите, что по умолчанию изображения внутри блока списка выровнены по левому краю. Однако вы можете выровнять изображения по центру, используя некоторые пользовательские CSS и дополнительные классы для конкретных списков.

Видео инструкция

Как вставить изображение в список в WordPress Gutenberg

Как обернуть встроенное изображение ссылкой на исходный медиа файл

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

Как обернуть встроенное изображение ссылкой на исходный медиа файл

Но есть решение.
Для того чтобы обернуть встроенное изображение или inner block в ссылку исходный медиа файл, вам необходимо скопировать URL ссылки на файл из медиатеки

Как обернуть встроенное изображение ссылкой на исходный медиа файл

После этого нажмите на кнопку ссылки

И далее вставьте ее в адрес строки

Как обернуть встроенное изображение ссылкой на исходный медиа файл

Issue на Github

Комьюнити WP создало issue на GitHub с тем чтобы добавили эту функциональность из коробки как реализовано в блочных изображениях. Будем следить за этим issue и надеимся его включат в будующую разработку

https://github.com/WordPress/gutenberg/issues/38184


Часть материла для статьи было взято и переведено с https://www.journeybytes.com/add-inline-image-in-gutenberg-list/


Андрей Писаревский

Автор: Андрей Писаревский 

PHP | WordPress Team Lead. Имею коммерческий опыт в программировании с 2010 года и экспертизу в полном цикле веб разработки: Frontend, Backend, QA, Server administration, управление крупными командами и Enterprise проектами.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *