WordPress.org

Make WordPress Core

Opened 8 weeks ago

Last modified 4 days ago

#47948 new defect (bug)

Twenty Eleven: circle mask image blocks are cut off

Reported by: desrosj Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: trunk
Component: Bundled Theme Keywords: good-first-bug has-screenshots has-patch
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 8 weeks ago.
Screenshot_2019-08-29 trunk wordpress test(1).png (1.4 MB) - added by desrosj 8 weeks ago.
47948.patch (472 bytes) - added by progremzion 4 weeks ago.
47948.2.patch (1.2 KB) - added by sabernhardt 11 days 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 11 days 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 11 days ago.
rectangular photo in Edge with mask-size:cover condition
47948.3.patch (1.2 KB) - added by sabernhardt 11 days ago.
adds space after colon (per coding standards) that I missed earlier
47948.4.patch (1016 bytes) - added by sabernhardt 4 days ago.
(only) removes border and padding from circle mask images

Change History (16)

#1 @desrosj
8 weeks ago

  • Keywords has-screenshots added

#2 @progremzion
4 weeks 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
4 weeks ago

#3 @progremzion
4 weeks ago

  • Keywords has-patch added; needs-patch removed

#4 @progremzion
4 weeks ago

  • Keywords needs-testing added

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


12 days ago

#6 @sabernhardt
11 days 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 11 days ago by sabernhardt (previous) (diff)

@sabernhardt
11 days ago

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

@sabernhardt
11 days ago

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

@sabernhardt
11 days ago

rectangular photo in Edge with mask-size:cover condition

@sabernhardt
11 days ago

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

#7 @ianbelanger
7 days 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
4 days ago

(only) removes border and padding from circle mask images

#8 @sabernhardt
4 days ago

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.

Last edited 4 days ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.