WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 7 weeks ago

#48734 accepted defect (bug)

Twenty Twenty: [em] tag with blank string inside ruins theme layout

Reported by: derlynad Owned by: audrasjb
Milestone: Future Release Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: has-screenshots
Focuses: Cc:
PR Number:

Description

Hello!

I’ve found a layout issue, concerning to "em" tag.

When we use the "em" tag and try to separate paragraphs inside this tag with blank strings, all the parts that are not in “touch” with opening and closing tags are "on their own" in layout. Tags were used in Classic Editor. See the screenshot below.

Here’s the source:

https://drive.google.com/file/d/1KWMwDFlodidBTqjDJRfP9j0mmw6QMuo8/view?usp=sharing

And here’s the result:

https://drive.google.com/file/d/1Tzhi-hsaGDLDdJax8kMUonHe7tJaX2Q7/view?usp=sharing

Here's addition example in English. The source code:

<em>This is some random text on the first line

Here is more text on a second line

Additional text on a 3rd line with the closing EM tag</em>

And here's the result

https://drive.google.com/file/d/1v9R127wdjPHjlXThMe9zjKXWz6V3xk8Y/view?usp=sharing

Tested on clean Twenty Twenty theme without any additionsl CSS code.

Tested on two different sites.

The issue is recreated for WordPress versions 4.7.15, 5.2.4 and 5.3.

One more experiment: if I put the strings in <p>...</p> tag, all the strings go to the left and ignore theme styles.

Also tested the case for Twenty Nineteen: there is no such issue.

Attachments (1)

editor-bug-twentytwenty.mov (1.9 MB) - added by audrasjb 2 months ago.
Twenty Twenty VS Twenty Nineteen - Classic Editor Text Mode

Download all attachments as: .zip

Change History (11)

@audrasjb
2 months ago

Twenty Twenty VS Twenty Nineteen - Classic Editor Text Mode

#1 @audrasjb
2 months ago

  • Focuses css template removed
  • Keywords needs-patch has-screenshots added
  • Milestone changed from Awaiting Review to 5.3.1
  • Owner set to audrasjb
  • Status changed from new to accepted

Hi there, thank you for this ticket @derlynad and welcome to WordPress Trac!

I can reproduce the issue on my side, though it's not related to <em> tag.

See video screenshot above.
Investigating…

#2 follow-up: @audrasjb
2 months ago

The issue doesn't appears anymore if I remove this bit of code from functions.php:

/**
 * Output Customizer settings in the classic editor.
 * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
 *
 * @param array $mce_init TinyMCE styles.
 *
 * @return array $mce_init TinyMCE styles.
 */
function twentytwenty_add_classic_editor_customizer_styles( $mce_init ) {

	$styles = twentytwenty_get_customizer_css( 'classic-editor' );

	if ( ! isset( $mce_init['content_style'] ) ) {
		$mce_init['content_style'] = $styles . ' ';
	} else {
		$mce_init['content_style'] .= ' ' . $styles . ' ';
	}

	return $mce_init;

}

#3 @audrasjb
2 months ago

Hm, looks more complicated than I thought at first.

#4 follow-up: @audrasjb
2 months ago

  • Keywords reporter-feedback added; needs-patch removed

It looks like the issue only occurs when editing the Hello World default post.
Other posts are looking good on my side.

Can you reproduce that @derlynad ?

Last edited 2 months ago by audrasjb (previous) (diff)

#5 in reply to: ↑ 4 @derlynad
2 months ago

Replying to audrasjb:

It looks like the issue only occurs when editing the Hello World default post.
Other posts looks good on my side.

Can you reproduce that @derlynad ?

@audrasjb I reproduced it on a sample page in WordPress 5.2.4 (new site) but the first time I noticed this issue on the old posts on my blog (WordPress 4.7.15), so it wasn't connected to default pages.

Created new page in WordPress 4.7.15 and checked one more time. The issue is still reproduceable.

#6 in reply to: ↑ 2 @derlynad
2 months ago

Replying to audrasjb:

The issue doesn't appears anymore if I remove this bit of code from functions.php:

/**
 * Output Customizer settings in the classic editor.
 * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
 *
 * @param array $mce_init TinyMCE styles.
 *
 * @return array $mce_init TinyMCE styles.
 */
function twentytwenty_add_classic_editor_customizer_styles( $mce_init ) {

	$styles = twentytwenty_get_customizer_css( 'classic-editor' );

	if ( ! isset( $mce_init['content_style'] ) ) {
		$mce_init['content_style'] = $styles . ' ';
	} else {
		$mce_init['content_style'] .= ' ' . $styles . ' ';
	}

	return $mce_init;

}

Tried to remove this fragment of code, but the issue is still here.

#7 follow-up: @audrasjb
2 months ago

@derlynad yes, removing those lines don't do anything, I messed up with my tests, sorry.

I can reproduce the issue on every default theme, like Twenty Nineteen for example. It seems to happen only when editing posts made with or for the Block Editor. Like default posts/pages or posts/pages created with the default editor. It doesn't seems to happen with new posts/pages manually created with the Classic Editor.

Can you reproduce that on your side?

#8 in reply to: ↑ 7 @derlynad
2 months ago

Replying to audrasjb:

@derlynad yes, removing those lines don't do anything, I messed up with my tests, sorry.

I can reproduce the issue on every default theme, like Twenty Nineteen for example. It seems to happen only when editing posts made with or for the Block Editor. Like default posts/pages or posts/pages created with the default editor. It doesn't seems to happen with new posts/pages manually created with the Classic Editor.

Can you reproduce that on your side?

Yes, I can. I've tested it today, created new page in WP 5.3 in block editor, classic block, html mode. Here's what's happening when we enter preview mode in Twenty Twenty:

https://drive.google.com/file/d/1X1q8yPGwN4-ZBZr_laPCLwo8p9GqlnK7/view

Here's the tag transformation in the block after saving the page and switching to visual editing mode:

https://drive.google.com/file/d/1wL61TWbMIrJgO34dd_HkUIaDCLg58N5v/view

Somehow em tag was automatically closed before empty string.

Here's how it looks like on Twenty Nineteen preview:

https://drive.google.com/file/d/1Lbalf2_9n-nOisrX-DL0DXBbUlOCD1s8/view

Looks like everything is OK.

Oh, and by the way. If we change EM tag with STRONG one, the issue is the same, here's the screenshot:

https://drive.google.com/file/d/1Q3nQKnIk6HcrEx3MIDcnKkOkX_uSKIRK/view

Hope it helps.

#9 @ianbelanger
8 weeks ago

  • Milestone changed from 5.3.1 to Future Release

#10 @ianbelanger
7 weeks ago

  • Keywords reporter-feedback removed
  • Version set to 5.3
Note: See TracTickets for help on using tickets.