Как переместить изображение в Гутенберге


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

Раньше у меня был css для img.alignright, теперь класс alignright применяется к тегу рисунка, поэтому я обновил свой style.css, и он все еще не работает. Я даже вставил пользовательский html следующим образом:

<img class="alignright" src="http://blah.com/image.jpg" />

И это не сработало, хотя, когда я просматриваю исходный код в предварительном просмотре, он должен будь таким же, как до Гутенберга. Есть ли какая-то поддержка темы, которую мне нужно добавить? Я тоже делал снимки экрана во время поиска, и у других были похожие проблемы, но я последовал их совету, и это не помогло. Я также обнаружил, что вы не можете вставить изображение с относительного URL-адреса в Gutenberg. Я не мог напрямую связать свой предварительный просмотр, поэтому мне пришлось опубликовать сообщение в теме, которая явно не готова для Гутенберга, но, очевидно, моих 20 с лишним лет кодирования HTML недостаточно для решения этой проблемы, поскольку очевидно, что в последнее время я занимался другими вещами, кроме программирования. Image in Gutenberg

Image previewed in Safari

CSS rules for the image as custom HTML block

Author: Muskie, 2019-01-25

1 answers

Существует два метода, которые можно использовать:

Способ 1

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

Способ 2

Добавьте блок Image и добавьте класс alignright в расширенную настройку этого блока. Следуйте за этим блоком Image другими блоками.

Я также обнаружил, что вы не можете вставить изображение с относительного URL-адреса в Гутенберг.

Медиатека всегда предоставляет полный URL-адрес изображения. После вставки изображения переключитесь из визуального редактора в редактор кода и отредактируйте атрибут src элемента img, чтобы использовать относительный URL-адрес.

 1
Author: Frank P. Walentynowicz, 2019-01-25 22:49:09