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