WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 2 days ago

#45782 new defect (bug)

Images in blocks auto left align when centre align selected

Reported by: lifeadventurers Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.0.2
Component: Editor Keywords: 2nd-opinion close
Focuses: Cc:

Description

When using Gutenberg block editor, images are automatically left aligning in preview and publish mode although in edit mode images are centre aligned. Confirmed in CSS code too.

Attachments (3)

Code information.JPG (95.6 KB) - added by lifeadventurers 3 years ago.
CSS code example of image alignment issue
Preview.JPG (114.7 KB) - added by lifeadventurers 3 years ago.
Preview of published article with conflicting with CSS code information
cubic-theme-image-blocks.jpeg (646.0 KB) - added by sabernhardt 2 days ago.

Download all attachments as: .zip

Change History (9)

@lifeadventurers
3 years ago

CSS code example of image alignment issue

@lifeadventurers
3 years ago

Preview of published article with conflicting with CSS code information

#1 follow-up: @joyously
3 years ago

The preview is controlled by the theme. What theme was this test done with?

#2 in reply to: ↑ 1 @lifeadventurers
3 years ago

Current Theme: Cubic
Web Browsers: iPad, iPhone, Chrome, Safari (desktop) and IE.
Hope this is useful.

Replying to joyously:

The preview is controlled by the theme. What theme was this test done with?

#3 @SergeyBiryukov
3 years ago

  • Component changed from General to Editor

#4 follow-up: @sabernhardt
2 days ago

  • Keywords 2nd-opinion close added

The Cubic theme does not center caption text, either on the front end or in the editor (with the optional theme.css). Yet the editor uses text-align: center for the entire image block when choosing center alignment. However, I do not think the editor should enforce that same style on the public side.

If you want the image captions centered on the front end, you could add one of the following lines to the Additional CSS (in Appearance > Customize).

  1. For all image block captions:
    .wp-block-image figcaption {text-align: center;}
    
  2. For captions in center-aligned image blocks:
    .wp-block-image .aligncenter {text-align: center;}
    

#5 in reply to: ↑ 4 @joyously
2 days ago

Replying to sabernhardt:

If you want the image captions centered on the front end,

The ticket is about the image alignment, not the caption.

#6 @sabernhardt
2 days ago

Thanks for correcting me.

The Cubic theme seems to center the images properly (on the front end) now.

Note: See TracTickets for help on using tickets.