Make WordPress Core

Opened 12 months ago

Closed 3 weeks ago

#58539 closed defect (bug) (fixed)

Twenty Seventeen: Image block figcaption text alignment inconsistency

Reported by: nkeller15's profile nkeller15 Owned by: karmatosed's profile karmatosed
Milestone: 6.6 Priority: normal
Severity: normal Version: 5.8
Component: Bundled Theme Keywords: has-patch has-screenshots needs-testing commit
Focuses: css Cc:

Description

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

Attachments (11)

58539.patch (505 bytes) - added by nkeller15 12 months ago.
Since the gallery block has the captions as centered, I've removed the left alignment causing this for consistency.
SCR-20230614-nvbg.png (400.4 KB) - added by nkeller15 12 months ago.
editor screenshot
SCR-20230614-nvcl.png (240.7 KB) - added by nkeller15 12 months ago.
front end screenshot
58539.diff (599 bytes) - added by thakordarshil 12 months ago.
Patch added
before-patch-backend.png (810.2 KB) - added by anilvaza 12 months ago.
Before Patch - Backend
After-patch-backend.png (811.9 KB) - added by anilvaza 12 months ago.
After Patch - Backend
After-patch-frontend.png (783.0 KB) - added by anilvaza 12 months ago.
After Patch - Backend
58539.2.diff (1.0 KB) - added by sabernhardt 6 weeks ago.
adjusting patch for RTL in the iframe editor and for nested Gallery blocks
frontend.png (693.1 KB) - added by shailu25 5 weeks ago.
Frontend Side Caption Alignment.
backend-before-patch.png (1.1 MB) - added by shailu25 5 weeks ago.
Backend Side - Before Patch
backend-after-patch.png (1.1 MB) - added by shailu25 5 weeks ago.
Backend Side - After Patch

Change History (22)

@nkeller15
12 months ago

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

@nkeller15
12 months ago

editor screenshot

@nkeller15
12 months ago

front end screenshot

#1 @sabernhardt
12 months ago

  • Focuses css added
  • Summary changed from Twenty Seventeen - figcaption text alignment inconsitency to Twenty Seventeen: Image block figcaption text alignment inconsistency
  • Version changed from 6.2.2 to 5.8

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

Last edited 12 months ago by sabernhardt (previous) (diff)

@thakordarshil
12 months ago

Patch added

@anilvaza
12 months ago

Before Patch - Backend

@anilvaza
12 months ago

After Patch - Backend

@anilvaza
12 months ago

After Patch - Backend

#2 @anilvaza
12 months ago

  • Keywords has-patch has-screenshots added

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

This ticket was mentioned in Slack in #design by grantmkin. View the logs.


4 months ago

#4 @sabernhardt
6 weeks ago

#58708 was marked as a duplicate.

@sabernhardt
6 weeks ago

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

#5 @sabernhardt
6 weeks ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 6.6

#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.

#6 @shailu25
5 weeks ago

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.✅
Last edited 5 weeks ago by shailu25 (previous) (diff)

@shailu25
5 weeks ago

Frontend Side Caption Alignment.

@shailu25
5 weeks ago

Backend Side - Before Patch

@shailu25
5 weeks ago

Backend Side - After Patch

#7 @pavanpatil1
3 weeks ago

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

#8 @darshitrajyaguru97
3 weeks ago

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

#9 @karmatosed
3 weeks ago

  • Keywords commit added

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

#10 @karmatosed
3 weeks ago

  • Owner set to karmatosed
  • Status changed from new to assigned

#11 @karmatosed
3 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.