WordPress.org

Make WordPress Core

Opened 2 years ago

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

Change History (22)

#1 @desrosj
2 years ago

  • Keywords has-screenshots added

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

#3 @progremzion
2 years ago

  • Keywords has-patch added; needs-patch removed

#4 @progremzion
2 years ago

  • Keywords needs-testing added

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


2 years ago

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

@sabernhardt
2 years ago

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

@sabernhardt
2 years ago

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

@sabernhardt
2 years ago

rectangular photo in Edge with mask-size:cover condition

@sabernhardt
2 years ago

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

#7 @ianbelanger
2 years 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
2 years ago

(only) removes border and padding from circle mask images

#8 @sabernhardt
2 years 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 2 years ago by sabernhardt (previous) (diff)

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


2 years ago

#10 @SergeyBiryukov
2 years ago

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

@sabernhardt
23 months ago

rounded/circle images with Gutenberg 7.3.0, using Firefox 72

#11 @sabernhardt
23 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
22 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
18 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.