Make WordPress Core

Opened 10 months ago

Last modified 7 weeks ago

#58539 new defect (bug)

Twenty Seventeen: Image block figcaption text alignment inconsistency

Reported by: nkeller15's profile nkeller15 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.8
Component: Bundled Theme Keywords: has-patch has-screenshots
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 (7)

58539.patch (505 bytes) - added by nkeller15 10 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 10 months ago.
editor screenshot
SCR-20230614-nvcl.png (240.7 KB) - added by nkeller15 10 months ago.
front end screenshot
58539.diff (599 bytes) - added by thakordarshil 10 months ago.
Patch added
before-patch-backend.png (810.2 KB) - added by anilvaza 10 months ago.
Before Patch - Backend
After-patch-backend.png (811.9 KB) - added by anilvaza 10 months ago.
After Patch - Backend
After-patch-frontend.png (783.0 KB) - added by anilvaza 10 months ago.
After Patch - Backend

Change History (10)

@nkeller15
10 months ago

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

@nkeller15
10 months ago

editor screenshot

@nkeller15
10 months ago

front end screenshot

#1 @sabernhardt
10 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 10 months ago by sabernhardt (previous) (diff)

@thakordarshil
10 months ago

Patch added

@anilvaza
10 months ago

Before Patch - Backend

@anilvaza
10 months ago

After Patch - Backend

@anilvaza
10 months ago

After Patch - Backend

#2 @anilvaza
10 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.


7 weeks ago

Note: See TracTickets for help on using tickets.