[wp-trac] [WordPress Trac] #48734: Twenty Twenty: [em] tag with blank string inside ruins theme layout

[WordPress Trac]

#48734: Twenty Twenty: [em] tag with blank string inside ruins theme layout
-------------------------------------------------+-------------------------
 Reporter:  derlynad                             |       Owner:  audrasjb
     Type:  defect (bug)                         |      Status:  accepted
 Priority:  normal                               |   Milestone:  Future
                                                 |  Release
Component:  Bundled Theme                        |     Version:  5.3
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots has-patch needs-     |     Focuses:
  testing                                        |
-------------------------------------------------+-------------------------
Changes (by sabernhardt):

 * keywords:  has-screenshots => has-screenshots has-patch needs-testing


Comment:

 The Classic Editor and the Classic block try to make HTML valid, which
 includes efforts to close tags.

 Using Twenty Twenty and the Classic Editor, I added four paragraphs within
 an `<em>` tag. The `em` tag started at the beginning of the first line and
 closed at the end of the fourth paragraph's line. Each paragraph was
 separated by an empty line (instead of explicitly adding the `<p>` tags).

 [[Image(https://live.staticflickr.com/65535/49889024602_ceda8d7ca2_n.jpg)]]

 The editor correctly adjusted the first and last paragraphs by putting the
 `em` tags inside the paragraph tags. But the second and third paragraphs
 were placed inside an `em` tag. That causes a misalignment in Twenty
 Twenty because the `em` does not currently honor the `width` and `max-
 width` intended for paragraph and heading tags.

 [[Image(https://live.staticflickr.com/65535/49889004322_d8ea7b70bb_b.jpg)]]

 I see two different ways of fixing this for similar situations:

 1. Make sure the editor properly recognizes that all of those paragraphs
 should nest any `em` or `strong` tags inside each paragraph tag.
 2. Edit the stylesheet for Twenty Twenty so that any `em` or `strong` tags
 (but not `span`) immediately within the `.entry-content` section can honor
 the width styles:
 {{{
 .entry-content > strong,
 .entry-content > em {
     display: block;
 }
 }}}

 (I'll upload a patch for the second option.)

 **However,** for better semantics and readability in this case, I highly
 recommend not having so much text in an emphasis tag and/or italicized
 (see ticket:47327 for some reasons).

 Or if all of that text **should** be italicized, it could be better inside
 a `div` tag. Note that this option requires the empty line after the
 opening tag in Classic Editor, and it might combine paragraphs if you
 switch from Text to the Visual editor.

 {{{
 <div style="font-style: italic;">

 paragraph 1

 paragraph 2

 paragraph 3

 paragraph 4
 </div>
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48734#comment:11>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform