Подход модульного редактора Gutenberg создает ощущение организованности, однако его особенности требуют времени на привыкание. Так происходит, например, со списками и встроенными изображениями.
Распространенная проблема со списками проявляется, когда нужно вставить изображения в списки. Обычно для того, чтобы вставить изображение в редактор, необходимо добавить блок изображения. Если сделать это внутри списков, то это приведет к поломке, поскольку блок изображения не может быть вложен внутрь списка.
Решением этого ограничения является использование встроенных изображений (inline images). В ранних итерациях редактора Gutenberg это было невозможно, но с тех пор они добавили эту функцию (хотя я считаю, что многие об этом не знают). Вот как это сделать.
.wpj-jtoc.—jtoc-theme-basic-light.—jtoc-has-custom-styles {
—jtoc-numeration-suffix: «. «;
—jtoc-numeration-color: #adadad;
}
Добавление встроенного изображения в блок списка
- Создайте список, добавив блок списка.
- Нажмите Shift+Enter, чтобы перейти к следующей строке, не переходя к следующему элементу списка.
- В верхней части редактора нажмите маленькую стрелку на блоке выбора блока и выберите Встроенное изображение.
- Теперь выберите или загрузите изображение для вставки из медиатеки.
- Изображение будет вставлено, но его ширина составит 150px. Чтобы изменить размер изображения, введите его новую ширину в поле и нажмите
enter
- Если вы хотите удалить изображение, просто выделите его и нажмите клавишу Delete. Обратите внимание, что встроенное изображение не может быть снабжено надписью.
- Далее можете продолжать работу со списком, просто нажав Enter!
Вы заметите, что по умолчанию изображения внутри блока списка выровнены по левому краю. Однако вы можете выровнять изображения по центру, используя некоторые пользовательские CSS и дополнительные классы для конкретных списков.
Видео инструкция
Как обернуть встроенное изображение ссылкой на исходный медиа файл
К сожалению в интерфейсе 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/
Источник: WP-Yoda.com
