Make WordPress Core

Opened 3 years ago

Closed 2 months ago

#47290 closed defect (bug) (duplicate)

Image can’t align center inside block column

Reported by: hklcf Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords:
Focuses: ui, css, template Cc:


block editor preview https://img.eservice-hk.net/upload/2019/05/16/161450_5b1e7db44114840141f38ee9aa5eed82.png


demo: http://232.email/myav/2019/05/16/7/

Attachments (1)

Screen Shot 2019-07-24 at 12.40.28 AM.png (1.1 MB) - added by garrett-eclipse 2 years ago.
Issue illustrated w/ inspector to show the CSS and how it affects the figure element

Download all attachments as: .zip

Change History (5)

#1 @SergeyBiryukov
3 years ago

  • Component changed from Themes to Editor

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

3 years ago

#3 @garrett-eclipse
2 years ago

  • Component changed from Editor to Bundled Theme

Thanks for the report @hklcf I was able to reproduce this with a clean install of WP using the Twenty Nineteen theme.

Upon inspect I found the theme CSS sets a calculated width on the centered figure element surrounding the image. This causes the element to extend beyond the bounds of the column causing it's centered child image to be displaced out of the column.

Setting to 100% width when in a column block seems to resolve the issue but should be looked at in the bundled theme where this is applied.

I believe this is the SCSS which controls that width in the theme CSS;

Moving into the Bundled Theme component for further review.

2 years ago

Issue illustrated w/ inspector to show the CSS and how it affects the figure element

#4 @sabernhardt
2 months ago

  • Focuses css added
  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Duplicate of #47937.

Thanks for reporting and testing this. Twenty Nineteen had a problem that was fixed in 5.3 (r45897) by setting a max-width of 100% on the figure element.

I checked each of the other bundled themes and did not find a similar problem in any of those.

Note: See TracTickets for help on using tickets.