Hybrid themes with Global Styles: custom border images not displayed on the front end

[jartes]

Quick summary

This issue comes from this one, which is similar to #7873.

When adding a custom border to an image with the block editor, it is displayed in the editor but not on the site's front end.

This is happening with Hybrid themes with Global Styles support.

Steps to reproduce

1. Make sure the site is using a hybrid theme.
2. Create a new post or page.
3. Add an image
4. Add a border to it.

What you expected to happen

Seeing the image on the live site with the border set displayed in the editor.

What actually happened

The border from the image is not being displayed

Browser

Google Chrome/Chromium

Context

Related issue and customer report

Platform (Simple, Atomic, or both?)

Simple, Atomic

Other notes

No response

Reproducibility

Consistent

Severity

Most (> 50%)

Available workarounds?

Yes, easy to implement

Workaround details

This can be fixed with some custom CSS code, but as this is affecting the border-style property, it will depend which type of border has been set.

For example, if the border is the default one, the following CSS should work for images in post content:

.entry-content .img {
    border-style: solid;
}

[jartes]

8326462-zd-a8c 8377644-zd-a8c

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8326462-zen
• [ ] 8377644-zen

[miksansegundo]

I'll look into this later.

It seems that Varia theme is removing the border from images in https://github.com/Automattic/themes/blob/fea811917b84a1b40b67f8a1ff149cd3ad43403f/varia/style.css#L371

[miksansegundo]

Hi, I have just deployed a fix and confirmed it's fixed.

EDITOR	FRONT SITE