Twenty Seventeen: Image block figcaption text alignment inconsistency

[nkeller15]

Steps to reproduce:

1. Activate Twenty Seventeen theme
2. Add an image using the image block
3. Notice center alignment of caption in the editor
4. Save page and view, noticing left alignment of caption now

[nkeller15]

Since the gallery block has the captions as centered, I've removed the left alignment causing this for consistency.

[nkeller15]

editor screenshot

[nkeller15]

front end screenshot

[sabernhardt]

The Image block's captions have been aligned left on the front end since the block editor was made public (r43800). The discrepancy began in WordPress 5.8 when the block class list started with block-editor-block-list__block before wp-block-image, which made the editor styles' selector meaningless (at least for this block).

One way to fix it in the editor is adding a selector that does not require a certain order:

[class^="wp-block-"]:not(.wp-block-gallery) figcaption,
[class*=" wp-block-"]:not(.wp-block-gallery) figcaption

Related: #56747

[thakordarshil]

Patch added

[anilvaza]

Before Patch - Backend

[anilvaza]

After Patch - Backend

[anilvaza]

After Patch - Backend

[anilvaza]

I have Tested https://core.trac.wordpress.org/attachment/ticket/58539/58539.diff Patch & It's Working Fine for me.

[sabernhardt]

#58708 was marked as a duplicate.

[sabernhardt]

adjusting patch for RTL in the iframe editor and for nested Gallery blocks

[sabernhardt]

#56747 has the same basic issue but discusses additional possibilities. This ticket could correct the mismatch for now.

58539.2.diff​ updates the existing rulesets to include selectors for multiple situations:

1. It adds selectors with [class*=" wp-block-"] because that class name is not the first in the list anymore.
2. It uses the child combinator [class*=" wp-block-"]:not(.wp-block-gallery) > figcaption so the styles that do not fit the Gallery block captions do not apply to Gallery blocks within a Group or Column block (see #50376).
3. Selectors for RTL languages include [dir="rtl"] because the iframe editor does not use the .rtl class. It probably does not need [dir="rtl"] [class^="wp-block-"]:not(.wp-block-gallery) > figcaption, but I added that to follow the pattern.

[shailu25]

Test Report

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/58539/58539.2.diff

Environment:

WordPress - 6.5.3
OS - Windows
Browser - Firefox
Theme: Twenty Seventeen
PHP - 8.1.23

Actual Results:

• Image block's Figcaption's text alignment Issue is Resolved With Patch.✅

[shailu25]

Frontend Side Caption Alignment.

[shailu25]

Backend Side - Before Patch

[shailu25]

Backend Side - After Patch

[pavanpatil1]

Test Report

Patch tested - https://core.trac.wordpress.org/attachment/ticket/58539/58539.2.diff

Verified the patch and it is working fine ✅

Environment
WordPress - 6.5.3
OS - Windows 11
Browser - Chrome
Theme: Twenty Seventeen

Visual
Before: ​https://nimb.ws/IMjpUes
After: ​https://nimb.ws/pwugcQ3

[darshitrajyaguru97]

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/58539/58539.2.diff

Environment:

OS: Windows
PHP: 8.2.12
WordPress: 6.5.3
Browser: Chrome
Theme: Twenty Seventeen
Plugins: None

Actual Results:

✅ Before patch:
Screenshot: ​https://prnt.sc/5JDOt0AhOfdt

✅ After patch:
Screenshot: ​https://prnt.sc/VkjRb5xMcWgA

✅ Patch working well as desired solution

[karmatosed]

Thank you everyone, I will look into getting this committed.

[karmatosed]

In 58207:

Twenty Seventeen: Resolves image block caption text alignment inconsitency.

The caption for image block was misaligned. The issue appeared in 5.8 due to the block class name change making the selector meaningless. This is resolved by a change in the selectors.

Props nkeller15, sabernhardt, thakordarshil, anilvaza, shailu25, pavanpatil1, darshitrajyaguru97.
Fixes #58539.