Twenty Nineteen: Right-aligned, uncaptioned images inserted via the Classic Editor do not extend beyond the text column

[kjellr]

Originally reported by @joyously on the Twenty Nineteen GitHub repo:

​https://github.com/WordPress/twentynineteen/issues/688

The Twenty Nineteen is designed to have right-aligned elements extend beyond the text column like so:

This works in all cases except under the following conditions:

1. An image has been inserted via the Classic Editor.
2. The image is floated right.
3. The image does not have a caption.

In that case, the image will appear tucked into the text column:

In that case, the images are housed within paragraph tags. For example:

<p>
  <img src="#" class="alignright">
  This is some text that the image will float around.
</p>

The <p> inherits our max-width styles, and prevents the image from extending beyond the content column. In order to have the image extend beyond the paragraph's width, we'd need to pull it out via negative margins or relative positioning of some sort. The markup would be very different from the markup we're currently using for all other cases though — I'm not personally sure it's worth sorting out for this single use case, but leaving the issue here in case anyone comes across a simple solution.

[nestor19]

Hello, thanks for your comments.
I would like to work on this ticket this weekend. I'm very new on Wordpress and contributing. In fact, this is my very first comment.
I already have been working on this ticket for a few days but I need some guide. I'm a little disoriented. Any comment is welcome.
Should I focus in the way that HTML is rendered in general? Or should I focus in Twenty Nineteen theme in particular??
Thank you for reading and I look forward to your comments

[kjellr]

Hi there, @nestor19! Welcome, and thanks for looking into this one.

Should I focus in the way that HTML is rendered in general? Or should I focus in Twenty Nineteen theme in particular??

Since this bug is specific to Twenty Nineteen, you'll want to focus on that in particular. Specifically, the right-alignment styles for images. The theme currently has some CSS rules which target .alignright images and pull them outside of the content container:

https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss#L47

These only target direct children of entry-content though, so we'd need additional CSS rules that accomplish a similar effect, but target the use case above: where the Classic editor inserts the alignright image inside of p tags.

I hope that's helpful! Please let me know if you have any other questions.

[nestor19]

Patch

[nestor19]

Hi @kjellr thank you very very much for your comments, they were really helpful.
I attached a possibly patch. As you said, I focused in the particular case of alignright images inside a p tag.
I look forward to your comments.

[thetwentyseven2727]

The patch is working great. However, I think the path is wrong. I do believe you should not include the folder with your WordPress site.

[audrasjb]

Hi,

With 5.4 Beta 3 approaching and the Beta period reserved for bugs introduced during the cycle, this is being moved to Future Release. If any maintainer or committer feels this should be included or wishes to assume ownership during a specific cycle, feel free to update the milestone accordingly.

[ianbelanger]

Thanks for the patches @nestor19 and @thetwentyseven2727,

While both patches do move the image outside of the content area, they do not move the image far enough to the right. See screen shots below.

[ianbelanger]

Patch applied without caption

[ianbelanger]

Patch applied with caption

[snehgohil]

Tested using WordPress latest version with the Twenty Nineteen theme and Classic Editor enabled.

Steps followed:

1. Created a new post
2. Added text content
3. Inserted an uncaptained image aligned to the right
4. Published and viewed the post

Result:
The image does not extend beyond the text column and remains constrained within it.

The issue is reproducible.

[snehgohil]

Tested the latest patch (twentynineteen-classic-editor-alignright-fix.patch).

Environment:

• WordPress latest version
• Twenty Nineteen theme
• Classic Editor enabled

Result after applying the patch:
The right-aligned image now extends beyond the text column as expected.

The patch works correctly for me.

[sabernhardt]

People who have added captionless images in the Classic Editor with alignment to the right or left probably should expect them to continue displaying the same way they have been for the past 7 years. I recommend ignoring the discrepancy.

On the ​GitHub issue, @joyously wanted to fix the discrepancy the other way:

Having them stick out might be the design, but it looks odd. It looks like they are the problem, not the ones that are in line with the text being the problem.

Also, the patches do not consider right-to-left languages. The style-rtl.css stylesheet would add rules for the alignleft class instead of alignright. And Twenty Nineteen stylesheets need be compiled from SCSS, which complicates setting rules for two different classes.