Make WordPress Core

Opened 6 years ago

Closed 2 weeks ago

#45993 closed defect (bug) (worksforme)

Twenty Nineteen: Image aligncenter inside column is broken

Reported by: dianeco's profile dianeco Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.0.3
Component: Bundled Theme Keywords: has-screenshots has-test-info reporter-feedback close
Focuses: ui Cc:

Description

Since Twenty Nineteen v1.2, the images set to aligncenter aren't centered on the front-end when placed inside a column (they're centered inside the editor).

https://i.imgur.com/ud1ZuvJ.png

Attachments (8)

45993.patch (666 bytes) - added by Mista-Flo 6 years ago.
SCR-20240715-qved.png (488.1 KB) - added by karmatosed 10 months ago.
SCR-20240715-qvgo.png (508.5 KB) - added by karmatosed 10 months ago.
Screenshot 2025-04-01 at 3.32.32 PM.png (1.9 MB) - added by navi161 7 weeks ago.
Screenshot 2025-04-01 at 4.49.16 PM.png (326.6 KB) - added by navi161 7 weeks ago.
Screenshot 2025-04-01 at 4.48.27 PM.png (904.8 KB) - added by navi161 7 weeks ago.
Screenshot 2025-04-01 at 4.48.27 PM.2.png (904.8 KB) - added by navi161 7 weeks ago.
Screenshot 2025-04-01 at 4.48.27 PM.3.png (904.8 KB) - added by navi161 7 weeks ago.

Change History (19)

#1 follow-up: @mukesh27
6 years ago

  • Focuses ui added

@dianeco you can please try below css. it is working fine for me in WordPress 5.1-beta1-44607

.entry .entry-content .wp-block-columns .wp-block-image .aligncenter { width: 100%; }

Try above css and let me know here so add patch.

#2 @laurelfulford
6 years ago

  • Keywords needs-patch has-screenshots added
  • Milestone changed from Awaiting Review to Future Release

#3 in reply to: ↑ 1 @Mista-Flo
6 years ago

Replying to mukesh27:

@dianeco you can please try below css. it is working fine for me in WordPress 5.1-beta1-44607

.entry .entry-content .wp-block-columns .wp-block-image .aligncenter { width: 100%; }

Try above css and let me know here so add patch.

It works on desktop, but not on mobile.

So we should be really careful when editing this CSS

#4 @truchot
6 years ago

Hi, it's seems code below in _block.scss fix this issue & no need media query anyone to test ?

.aligncenter {
	@include postContentMaxWidth();
	width: 100%;

	img {
		margin: 0 auto;
	}
}

@Mista-Flo
6 years ago

#5 @Mista-Flo
6 years ago

  • Keywords has-patch added; needs-patch removed

Just uploaded the patch from @truchot work, it removes unnecessary media queries and add a width 100% to the element.

#6 @karmatosed
11 months ago

  • Keywords needs-testing added

I think because this removes queries it needs some testing. I am going to add that to the keywords for now.

#7 @sudipatel007
11 months ago

  • Keywords needs-testing-info added; needs-testing removed

I have tried without patch and with patch but issue is not regenerated. I think we need more information to replicate the issue

#8 @karmatosed
10 months ago

  • Keywords changes-requested added

As shown in the above examples there is some issue with the alignment, the patch though doesn't resolve it. What it seems to do is make it worse on smaller screens. My recommendation at this point is to move this to getting a refresh and testing.

#9 @sainathpoojary
4 months ago

In my testing, I was unable to reproduce the issue on both desktop and mobile.
I followed these steps to attempt reproduction:

  1. Add a Columns block with two columns.
  2. Add an Image and a Paragraph in each column.
  3. Center-align the images.
  4. Check the frontend.

Editor:

https://rioudcpuyg.ufs.sh/f/PL8E4NiPUWyOHhvP0Oq2N2bxKiQ70vpC8rdRhegntWU63YfI

Frontend:

https://rioudcpuyg.ufs.sh/f/PL8E4NiPUWyOFyvFfPQlPjKxSwy47ckIJHQLbgYtoDfNVhmp

Environment

  • WordPress: 6.8-alpha-59274-src
  • PHP: 8.2.27
  • Server: nginx/1.27.3
  • Database: mysqli (Server: 8.4.3 / Client: mysqlnd 8.2.27)
  • Browser: Chrome 131.0.0.0
  • OS: macOS
  • Theme: Twenty Nineteen 3.0
  • MU Plugins: None activated
  • Plugins: None activated

#10 @navi161
7 weeks ago

The images and align centre work fine for the theme.

Performed the steps mentioned in the previous step to test.

Screens attached
Tested on Mobile devices as well as Web browsers.

Environment

  • OS: macOS Sonoma 14.6.1
  • Web Server: PHP.wasm
  • PHP: 8.2.23 (Supports 64bit values)
  • WordPress: 6.8-RC1
  • Browser: Chrome 134
  • Theme: Twenty Nineteen
  • Active Plugins: NA

#11 @SirLouen
2 weeks ago

  • Keywords has-test-info reporter-feedback close added; has-patch needs-testing-info changes-requested removed
  • Resolution set to worksforme
  • Status changed from new to closed

Since there are multiple reports of users being unable to reproduce this issue and this is a very old report and no answer from the reporter since then, I think that the most adequate resolution of this report is a worksforme

This was reported in Twenty Nineteen 1.2, and we are in 3.1 currently. A lot has rained since then. Maybe it was sorted at some point

To add over the top, I've also tested on my side and I can't reproduce this either.

Note: See TracTickets for help on using tickets.