Make WordPress Core

Opened 6 months ago

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

Change History (9)

@nkeller15
6 months ago

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

@nkeller15
6 months ago

editor screenshot

@nkeller15
6 months ago

front end screenshot

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

@thakordarshil
6 months ago

Patch added

@anilvaza
6 months ago

Before Patch - Backend

@anilvaza
6 months ago

After Patch - Backend

@anilvaza
6 months ago

After Patch - Backend

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

Note: See TracTickets for help on using tickets.