Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#47372 closed defect (bug) (reported-upstream)

Gutenberg block column with "alignright" not working as expected

Reported by: bjuwebteam's profile bjuwebteam Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.2.1
Component: Editor Keywords:
Focuses: Cc:


I am trying to create a block column row where the first column (containing an image and caption) is aligned right and shows up after the second column (containing text) at full page width. (So that when the row collapses at mobile resolutions, the image appears first and the text comes after.)

You can see a simplified version of the code I used on my test page below, however, the first column is not getting aligned right as expected. When I inspect the page using developer tools in my browser, I can see that the "alignright" CSS styles (including "float:right;") are getting applied to the column, and it does not look as though anything else is interfering, yet the column does not actually float right. The problem occurs both in my current theme and in Twenty Nineteen.

<div class="wp-block-columns has-2-columns">
	<div class="wp-block-column alignright">
		<img src='' />
		<p><em>Image Caption</em></p>
	<div class="wp-block-column alignleft">
		<h2>A Header</h2>
		<p>Some content goes here.</p>

Attachments (1)

Column Align Screenshot.png (175.0 KB) - added by bjuwebteam 5 years ago.
Column Alignment Issue Screenshot

Download all attachments as: .zip

Change History (4)

5 years ago

Column Alignment Issue Screenshot

#1 @SergeyBiryukov
5 years ago

  • Component changed from General to Editor

This ticket was mentioned in Slack in #core by desrosj. View the logs.

5 years ago

#3 @desrosj
5 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

Hi @bjuwebteam!

Welcome to Trac! This seems to be an issue that would need fixing upstream in the Gutenberg GitHub repository. I have transferred this issue there so it can be addressed.

If my evaluation is wrong, we can reopen this ticket.

Note: See TracTickets for help on using tickets.