Post Featured Image is double border marked up.

[shimotmk]

Description

Post Featured Image is double border marked up.

Step-by-step reproduction instructions

1. Paste the code below into the block editor.

<!-- wp:post-featured-image {"overlayColor":"black","dimRatio":50,"style":{"spacing":{"padding":{"top":"clamp(1.875rem, 1.303rem + 1.83vw, 2.813rem)","bottom":"clamp(1.875rem, 1.303rem + 1.83vw, 2.813rem)","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"border":{"width":"20px"}},"borderColor":"vivid-cyan-blue"} /-->

2. You can see that the border is double marked up in the block editor and front end.

Setting both Overlay and Padding makes it easy to see that the border is double marked up.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.2.2
• Twenty Twenty-Three 1.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[jordesign]

Hi @shimotmk - thanks for reporting that. Could you please let us know the steps you took to create that Featured Image block in the first place - so the issue can be recreated from scratch rather than pasting the code in.

It will hopefully give some insight into why/if the code was generated that way.

Could you please also clarify what you mean when you say 'double border marked up.' ?

[shimotmk]

@jordesign
Thanks for your comment.

Missed steps from the beginning. I'm sorry.

The steps to reproduce are as follows.

1. Place a Post Featured Image block. If you haven't set an eye catch, set it.
2. Set the border.
3. Set overlay
4. Set Padding
5. You can see the overlayed border and two outer borders
   

[jordesign]

Thanks @shimotmk - I can confirm I've been able to recreate this.

It looks as though the border is applied to both the <img> element and the <span class="wp-block-post-featured-image__overlay"> for the overlay.

I've also confirmed this is present without the Gutenberg plugin active - so it may have been around for a little while.

[shimotmk]

@jordesign
Thank you for confirmation.
Could you adjust the Labels?
I can't change Labels.

[shimotmk]

I feel like the padding control is unnecessary.
Overley needs border because <span class="wp-block-post-featured-image__overlay"></span> covers <img> element .

Post Featured Image doesn't have content like Cover block, so I don't think it's necessary to set padding.

Can I send a pull request with padding supports removed?

[jordesign]

@shimotmk That's true - it does seem like there's not much use for the padding control. Feel free to submit a PR - in the meantime I've flagged it for design feedback to consider the UX of the block.

[jameskoster]

I can imagine situations where padding can be useful, on any image, so I'm not convinced we should remove that control.

In terms of the border, I'd expect it to produce the same result as adding padding and border to and img in html. That is to say: the border would at the outer edge of the overall footprint rather than around the image explicitly.