search

Automattic / themes

Free WordPress themes made by Automattic for WordPress.org and WordPress.com.
https://themeshaper.com
GNU General Public License v2.0
882 stars 351 forks source link

FSE themes: "is-style-circle-mask" causes the images to not render #5540

Open ChrissiePollock opened 2 years ago

ChrissiePollock commented 2 years ago

Quick summary

The image appears in the Editor, but not on a published page.

Steps to reproduce (EDITED)

  1. Create a new page and do not skip the templates modal

  2. Choose the About examples

  3. Select the "Resume with contact and social links" template

  4. Publish the page and see the results OR

  5. Create a new page and add an image block

  6. Add an image block and add this class in Additional CSS classes: is-style-circle-mask

  7. Publish and check the image

What you expected to happen

The image will not render, but it does show up in the markup.

I expected to see the image just as it shows in draft.

Here it is in TwentyOne (my screenshot doesn't show the phone # or email or social links in TwentyTwentyOne, but they are there. Only the image is missing):

TwentyTwentyOne

Here it is in Quadrat:

QuadratGreen

What actually happened

It was missing. I see the code in Inspect, and it shows the image there, but the image is not visible. I don't see console errors that are applicable.

When I change the theme to TwentyTwentyOne, I see the image so this appears to be a theme issue.

This only happens on an atomic site, not sites on lower level plans.

Context

Customer in #4723115-zen

Simple, Atomic or both?

Atomic

Theme-specific issue?

Quadrat - I tested several Quadrat themes, and none work.

While this is on atomic sites, I also did a plugin test and there are no conflicts. I also tried turning off Lazy Load. It didn't help.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, easy to implement

Workaround details

Reinsert the image using the Rounded styling instead.

tvolpert commented 2 years ago

I briefly played into this ticket at the same time as Chrissie somehow, and discovered that it has something to do with the circle mask on the image. If you remove the class is-style-circle-mask from the figure element in dev tools, the picture shows up. I couldn't find any CSS rules relating to that class, so I'm not sure how it's hiding the image.

Robertght commented 2 years ago

Thank you for reporting this!

I can confirm this is an issue with the Quadrat themes, however, the issue appears to be with is-style-circle-mask which comes from the About Me page template. If we use the "Rounded" option instead, we get the is-style-rounded.

image

I have tested this with Simple and Atomic sites and all the FSE themes appear to be affected.

cc @jeffikus