Twenty Eleven: circle mask image blocks are cut off

[desrosj]

Image blocks with the circle mask style selected are cut off in Twenty Eleven.

To reproduce:

• Activate Twenty Eleven.
• Create a post.
• Insert an image block and select the "Circle Mask" style under "Styles".
• Preview the post or publish and view.

The issue happens with both horizontal and vertical orientated images. However, the cut off area is in different spots (vertical images are cut off on the left and right, horizontal images are cut off on the top and bottom).

Note: The circle mask feature was added in Gutenberg 6.4 and is not yet in trunk. You can reproduce this issue by applying the latest patch on #47843 or wait for it to be committed.

[progremzion]

Hi @desrosj

I have fixed the issue. Can you please review? It is my first commit, so please do let me know if something is missing.

Thanks!

[sabernhardt]

@progremzion Thanks for the patch (congratulations on your first one)! For your next patch, you can (usually) remove the units for zero values.
​https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/

After that patch removes the padding, it's still slightly off because of the one-pixel border. So I set the border to 0 as well and applied the same styles for the post editor screen.

I also noticed a problem with mask-size: contain on rectangular images in the Edge browser. This probably should be fixed elsewhere instead, but I added an Edge-specific condition here to give these images the same pill shape that was deemed acceptable for as in Internet Explorer.

[sabernhardt]

removes border and padding from circle mask images; adds styles for better Edge support

[sabernhardt]

image mask does not crop entire rectangular photo in Edge (with mask-size:contain)

[sabernhardt]

rectangular photo in Edge with mask-size:cover condition

[sabernhardt]

adds space after colon (per coding standards) that I missed earlier

[ianbelanger]

I can confirm that 47948.3.patch does fix the issue in Firefox and Chrome, however as @sabernhardt's screenshots show, any image that is not square will be oval in Edge and IE11. It doesn't look bad in Edge and IE11, but it will not match other browsers.

It does not seem that IE11 or Edge support mask-size: cover;. So, we can apply this patch, knowing that IE11 will never support it and Edge may in the future. My vote would be to apply it as-is.

CC @desrosj

[sabernhardt]

(only) removes border and padding from circle mask images

[sabernhardt]

47948.4.patch is simplified so it only pertains to Twenty Eleven-specific styles. (I should have offered this option earlier.)

Hopefully the Edge issue will be handled in the Gutenberg project for all themes.

[sabernhardt]

rounded/circle images with Gutenberg 7.3.0, using Firefox 72

[sabernhardt]

The circle mask was reverted in the Gutenberg plugin, so all browsers should show rounded rectangular images in the oblong pill shape for WordPress 5.4.
​https://github.com/WordPress/gutenberg/pull/19028

Then we may not need to remove the border and padding on these images for Twenty Eleven.

[audrasjb]

Hi,

With 5.4 Beta 3 approaching and the Beta period reserved for bugs introduced during the cycle, this is being moved to Future Release. If any maintainer or committer feels this should be included or wishes to assume ownership during a specific cycle, feel free to update the milestone accordingly.

Also adding close keyword as per comment 11.

[desrosj]

I just did some testing and confirmed that this is no longer an issue! Thanks everyone!