Lost margin around images

because you have resized your image, gutenberg has added the “is-resized” class to the figure HTML tag, also looks like the is-resized class sets the margin on the HTML tag it is applied to to “0”, perhaps the easiest way to get around this concern is to create a smaller image, the size you have changed it to, and then use that image in the image block. otherwise, I guess you can override the “is-resized” class, this is harder to do.

Al

I think you are in a gutenberg gotcha condition.

Okay… I was able to fix the issue by republishing the image blocks. Once an image block was published a second time, the margins around the images came back. Although I found this easy solution, the problem shouldn’t have occurred. Having to re-publish image blocks across every previously published post each time Gutenberg is upgraded is a less-than-an-ideal workflow situation.

Also, I found a usability issue with the image block. Once the image block has been set so the text wraps around the image, the image block and the text block seem to be merged together; at which point, I am unable to click on the image and select the image edit/alignment options. Instead, I have to click on the text block and then tap the cursor to the left using my keyboard arrow keys until the image block is highlighted – then I was able to access the image alignment options. This is not a user-friendly action; a user should just able to click on the image to access those options.

looks like the code generated for the image block has been changed. there is a new image HTML block code structure.

now the image block has a “div” HTML tag, then the figure tag and finally the img tag. not sure how the CSS you are using would be affected by this, but obviously it was.

Al

wonder if any other blocks have been changed like this?

• This reply was modified 6 years, 2 months ago by almcr.