Twenty-Twenty: Image Block Caption alignment is not centered on mobile version

[spanglishwebs]

Summary
The caption alignment within an Image Block does not align centre on mobile device.

Steps to Reproduce

1. Add an Image Block with a caption to a page in the theme Twenty-Twenty
2. Align the caption to be centred, screenshot: ​https://d.pr/i/zus1yt
3. View page on mobile device, caption is still aligned left, screenshot: ​https://d.pr/i/Y8PxJR. But it is aligned correctly on desktop.

Expected Result
I expected the Image Block caption to also be aligned centred on mobile device.

Actual Result
Image Block caption remained aligned left on mobile, but was centred correctly on desktop view.

Additional notes
This was tested on theme Twenty-Twenty, where I could also replicate the issue on a test site. Works correctly and as expected on theme Twenty-Nineteen.

Gutenberg: 8.2.1
CoBlocks: 1.23.0

[sabernhardt]

@spanglishwebs Thanks for the report!

Centering the caption starts at 1000 pixels and wider, which I did not expect either.

Centered text that wraps on multiple lines can be more difficult to read, so the theme authors might have intended to avoid that. However, if the caption is long enough to prefer left-aligned text, editors can leave the image block's alignment setting unselected.

[sabernhardt]

centering .aligncenter image caption for all screen sizes

[sabernhardt]

The centering was added recently (47689), and ticket #49320 does not indicate that placing it inside the media query was intentional.

In case the style belongs outside the media query, for all screen sizes, I uploaded a patch.

[sabernhardt]

another option: centering .aligncenter captions for more blocks (including image gallery, audio and table) at any screen size

[karmatosed]

Thank you for this. I am going to look to test and move this into commit if works as seems a great candidate to just get in.

[karmatosed]

I just did some testing on this and I think it might need some iterations. What I am currently experiencing is that on mobile the centering doesn't come in at all. I would love if someone could confirm this or not so for now lets remove commit and get some more testing. Thank you everyone for your work so far and I am sure we can iterate to get a solution.

[sudipatel007]

Patch Re-testing

@karmatosed I have applied latest patch and i am getting the same issue. I think issue is not resolved.

Screenshot - ​https://prnt.sc/s9_n0luLsLPy

Environment

• WordPress: 6.6-beta2-58420
• PHP: 8.1.23
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.23)
• Browser: Chrome 126.0.0.0 (macOS)
• Theme: Twenty Twenty 2.6

[karmatosed]

@sudipatel007 This has a patch so should have that keyword still on it. It however if doesn't apply in testing should have it changes requested added. Thanks.

[shailu25]

Patch Refreshed.

[shailu25]

I just refreshed @sabernhardt's second patch. It needed to be updated with the latest trunk.

[shailu25]

Before Patch

[shailu25]

After Patch

[karmatosed]

I am going to test this now thanks.

[karmatosed]

In 58909:

Twenty Twenty: Fixes image block caption alignment not being centered on mobile.

The image block caption was not being centered on mobile. This was set to start at 1000 pixels and wider. This might have been intended to prevent wrapping, but you can resolve this by unselecting alignment.

Props spanglishwebs, sabernhardt, sudipatel007, shailu25.
Fixes #50317.