Theme.json styling for image gets unexpected results for background and border

[karmatosed]

I am currently experiencing some unexpected results for border and background on the image block when using theme.json. The following is what I have set:

				"color":{
					"background": "currentColor"
				},
				"spacing": {
					"margin":{
						"bottom": "var(--wp--custom--margin--vertical-large)",
						"top": "var(--wp--custom--margin--vertical)"
					},
					"padding": {
						"bottom": "1px",
						"top": "1px",
						"right": "1px",
						"left": "1px"
					}
				}
			},

The result is:

Whilst this is a certain 'look', I don't really want that space at the bottom. I tried the above to get around the problem of no border working.

In addition to this, I find myself unable to set the border properties to the image block at all. It won't output. For example:

				"border": {
					"color": "currentColor",
					"style": "solid",
					"width": "1px 1px 1px 1px"
				}

This doesn't seem to work at all on image block when I output to the front. It works in the editor but doesn't on the front of my site.

I understand it might be something I am doing, but it seems there are also potentially 🐛 lurking in this.

[glendaviesnz]

I think the main issue is that by default the border is being applied to the figure wrapping div and not the image.

There is some working being done here to get the border working correctly on the image for user selected border settings, and these are applied to the img tag so don't have the extra padding at the bottom:

... but there is currently no way to specify in theme.json to target the border to an img element within the block instead of the block wrapper. There are some ongoing discussions about how this might be best handled:

• Styles for blocks with a wide design surface area #33255
• Block Supports: Allow themes to set styles when serialization is skipped #32417