WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 4 weeks ago

#47948 new defect (bug)

Twenty Eleven: circle mask image blocks are cut off

Reported by: desrosj Owned by:
Milestone: 5.4 Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: good-first-bug has-screenshots has-patch needs-testing
Focuses: Cc:
PR Number:

Description

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.

Attachments (8)

Screenshot_2019-08-29 trunk wordpress test.png (1.0 MB) - added by desrosj 3 months ago.
Screenshot_2019-08-29 trunk wordpress test(1).png (1.4 MB) - added by desrosj 3 months ago.
47948.patch (472 bytes) - added by progremzion 2 months ago.
47948.2.patch (1.2 KB) - added by sabernhardt 6 weeks ago.
removes border and padding from circle mask images; adds styles for better Edge support
circle-mask-contain-edge.png (124.3 KB) - added by sabernhardt 6 weeks ago.
image mask does not crop entire rectangular photo in Edge (with mask-size:contain)
circle-mask-cover-edge-pill-shape.png (167.2 KB) - added by sabernhardt 6 weeks ago.
rectangular photo in Edge with mask-size:cover condition
47948.3.patch (1.2 KB) - added by sabernhardt 6 weeks ago.
adds space after colon (per coding standards) that I missed earlier
47948.4.patch (1016 bytes) - added by sabernhardt 5 weeks ago.
(only) removes border and padding from circle mask images

Change History (18)

#1 @desrosj
3 months ago

  • Keywords has-screenshots added

#2 @progremzion
2 months ago

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!

@progremzion
2 months ago

#3 @progremzion
2 months ago

  • Keywords has-patch added; needs-patch removed

#4 @progremzion
2 months ago

  • Keywords needs-testing added

This ticket was mentioned in Slack in #core by sergey. View the logs.


6 weeks ago

#6 @sabernhardt
6 weeks ago

@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.

Last edited 6 weeks ago by sabernhardt (previous) (diff)

@sabernhardt
6 weeks ago

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

@sabernhardt
6 weeks ago

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

@sabernhardt
6 weeks ago

rectangular photo in Edge with mask-size:cover condition

@sabernhardt
6 weeks ago

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

#7 @ianbelanger
5 weeks ago

  • Keywords needs-testing removed

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
5 weeks ago

(only) removes border and padding from circle mask images

#8 @sabernhardt
5 weeks ago

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

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

Version 0, edited 5 weeks ago by sabernhardt (next)

This ticket was mentioned in Slack in #core by sergey. View the logs.


4 weeks ago

#10 @SergeyBiryukov
4 weeks ago

  • Keywords needs-testing added
  • Milestone changed from Future Release to 5.4
Note: See TracTickets for help on using tickets.