WordPress.org

Make WordPress Core

Opened 15 months ago

Closed 6 months ago

#47948 closed defect (bug) (invalid)

Twenty Eleven: circle mask image blocks are cut off

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

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 (9)

Screenshot_2019-08-29 trunk wordpress test.png (1.0 MB) - added by desrosj 15 months ago.
Screenshot_2019-08-29 trunk wordpress test(1).png (1.4 MB) - added by desrosj 15 months ago.
47948.patch (472 bytes) - added by progremzion 14 months ago.
47948.2.patch (1.2 KB) - added by sabernhardt 14 months 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 14 months 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 14 months ago.
rectangular photo in Edge with mask-size:cover condition
47948.3.patch (1.2 KB) - added by sabernhardt 14 months ago.
adds space after colon (per coding standards) that I missed earlier
47948.4.patch (1016 bytes) - added by sabernhardt 14 months ago.
(only) removes border and padding from circle mask images
circle-image-block-gutenberg-plugin.png (181.9 KB) - added by sabernhardt 10 months ago.
rounded/circle images with Gutenberg 7.3.0, using Firefox 72

Change History (22)

#1 @desrosj
15 months ago

  • Keywords has-screenshots added

#2 @progremzion
14 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
14 months ago

#3 @progremzion
14 months ago

  • Keywords has-patch added; needs-patch removed

#4 @progremzion
14 months ago

  • Keywords needs-testing added

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


14 months ago

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

@sabernhardt
14 months ago

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

@sabernhardt
14 months ago

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

@sabernhardt
14 months ago

rectangular photo in Edge with mask-size:cover condition

@sabernhardt
14 months ago

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

#7 @ianbelanger
14 months 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
14 months ago

(only) removes border and padding from circle mask images

#8 @sabernhardt
14 months 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 14 months ago by sabernhardt (next)

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


13 months ago

#10 @SergeyBiryukov
13 months ago

  • Keywords needs-testing added
  • Milestone changed from Future Release to 5.4

@sabernhardt
10 months ago

rounded/circle images with Gutenberg 7.3.0, using Firefox 72

#11 @sabernhardt
10 months ago

  • Keywords 2nd-opinion added

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.

#12 @audrasjb
9 months ago

  • Keywords close added
  • Milestone changed from 5.4 to Future Release

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.

#13 @desrosj
6 months ago

  • Keywords needs-testing 2nd-opinion close removed
  • Milestone Future Release deleted
  • Resolution set to invalid
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.