Тест: новый блок image-with-align
Это тестовая новость для проверки кастомного Lexical-блока «изображение с обтеканием». Ниже — три картинки разных размеров и направлений обтекания, чтобы наглядно увидеть, как ведёт себя текст вокруг них.
Сначала идёт большая картинка по центру — без обтекания, текст просто продолжается под ней. Используется размер large (≤720px), выравнивание center.
Картинка слева — текст справа
Дальше — медиум-картинка слева, и текст должен обтекать её справа. Это самый частый сценарий из старого WP-редактора: автор вставляет картинку, выбирает выравнивание «слева» и продолжает писать абзац рядом.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Картинка справа — текст слева
Теперь — маленькая картинка справа, обтекание идёт слева. Размер thumbnail (≤240px), это удобно для маленьких иллюстраций или скриншотов в углу абзаца.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Заключение
Если всё работает корректно — у тебя должны быть три figure-элемента с разными комбинациями align*/size-*: aligncenter+size-large, alignleft+size-medium и alignright+size-thumbnail. Текст вокруг floated-картинок обтекает их с нужной стороны.