WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 6 months ago

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

Gutenberg block column with "alignright" not working as expected

Reported by: bjuwebteam Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.2.1
Component: Editor Keywords:
Focuses: Cc:
PR Number:

Description

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='https://placekitten.com/g/500/500' />
		<p><em>Image Caption</em></p>
	</div>
	<div class="wp-block-column alignleft">
		<h2>A Header</h2>
		<p>Some content goes here.</p>
	</div>
</div>

Attachments (1)

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

Download all attachments as: .zip

Change History (4)

@bjuwebteam
6 months ago

Column Alignment Issue Screenshot

#1 @SergeyBiryukov
6 months ago

  • Component changed from General to Editor

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


6 months ago

#3 @desrosj
6 months 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.