WordPress.org

Make WordPress Core

Opened 9 months ago

Last modified 8 days ago

#45907 new defect (bug)

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

Reported by: kjellr Owned by:
Milestone: Future Release Priority: low
Severity: normal Version: 5.0.2
Component: Bundled Theme Keywords: good-first-bug has-patch
Focuses: Cc:
PR Number:

Description

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:

https://cldup.com/jqNamSAitA-1200x1200.png

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:

https://cldup.com/b_oMnbi4XQ-1200x1200.png

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.

Attachments (1)

45907.diff (1.5 KB) - added by nestor19 3 months ago.
Patch

Download all attachments as: .zip

Change History (8)

#1 @desrosj
5 months ago

  • Component changed from General to Bundled Theme
  • Keywords needs-patch good-first-bug added

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


4 months ago

#3 @desrosj
4 months ago

  • Milestone changed from Awaiting Review to Future Release

#4 @nestor19
3 months ago

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

#5 @kjellr
3 months ago

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
3 months ago

Patch

#6 @nestor19
3 months ago

  • Keywords has-patch added; needs-patch removed

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.

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


8 days ago

Note: See TracTickets for help on using tickets.