Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#40956 closed defect (bug) (fixed)

Twenty Twelve: Line-Height in TinyMCE Editor

Reported by: superpoincare's profile superpoincare Owned by: azaozz's profile azaozz
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.8
Component: Bundled Theme Keywords: has-patch has-screenshots
Focuses: administration Cc:

Description

4.8 seems to change the line-height in post editor.

This is for Twenty Twelve. Not sure for other themes.

Screenshots:

4.7:
http://i.imgur.com/wBURiMf.png

4.8:
http://i.imgur.com/st8YtXG.png

Attachments (3)

40956.diff (413 bytes) - added by xkon 7 years ago.
Adds line-height to editor-style
40956.png (243.5 KB) - added by xkon 7 years ago.
40956.diff preview
40956.2.diff (505 bytes) - added by xkon 7 years ago.
Change line-height

Download all attachments as: .zip

Change History (23)

#1 follow-up: @spocke
7 years ago

We changed the default line height in tinymce since the new inline boundary feature would otherwise make the the text jump up/down on windows due to font kerning of zwnbsp characters we use to place the caret. You can override this default style by setting .mceContentBody { line-height: xx; } to the content css used within the editor.

#2 in reply to: ↑ 1 @superpoincare
7 years ago

Replying to spocke:

You can override this default style by setting .mceContentBody { line-height: xx; } to the content css used within the editor.

Sure, personally I have a custom editor-style.css in my child theme. But I raised this ticket so that this is done for everyone using the theme twenty twelve (or other themes where this is affected).

Or else should we change this ticket so that it's for bundled themes?

#3 @SergeyBiryukov
7 years ago

  • Component changed from TinyMCE to Bundled Theme
  • Summary changed from Line-Height in TinyMCE Editor in Twenty Twelve to Twenty Twelve: Line-Height in TinyMCE Editor

#5 @azaozz
7 years ago

Caused by TinyMCE adding more specific line-height: 1.2; for most block elements. To counter that we added line-height: inherit;, but TwentyTwelve overrides line-height to 1 on the body, then sets less specific line-height for the block elements.

As far as I see the best fast fix is to make the selectors for line-height in TwentyTwelve more specific. Ideally this should not be set in TinyMCE with higher specificity, i.e. the selectors should have been the tag names only without .mce-content-body.

#6 follow-up: @spocke
7 years ago

We are changing the specificity of the css selector to "body" in iframe mode and ".mce-content-body" in inline mode. We are also setting the default line height to line-height: 1.3; that seems closest to what we have today and doesn't seem to break when font sizes increases. The default in WP seems to be 1.5 then overridden by skins so with this change everything should work out of the box except for inline gutenberg where the css would have to add a .mce-content-body { line-height: inherit; } or a specific override.

#7 in reply to: ↑ 6 @superpoincare
7 years ago

Replying to spocke:

We are changing the specificity of the css selector to "body" in iframe mode and ".mce-content-body" in inline mode. We are also setting the default line height to line-height: 1.3;

Just to clarify, "we" as in developers of TinyMCE (and not Wordpress developers)?

This ticket was mentioned in Slack in #forums by jcastaneda. View the logs.


7 years ago

#9 @spocke
7 years ago

Yes I meant we as tinymce developers so a patch to wp needs to needs done to get that new css override.

#10 follow-up: @blure
7 years ago

Hi,

one question, I have changed the "line-height" parameter in "wp-content.css" and also in "editor-style.css", directly in browser it functions, when I changed these parameters in the files not function, why ?

I have to wait for plugin changes ?

Thanks

#11 in reply to: ↑ 10 @superpoincare
7 years ago

Replying to blure:

I think it's because the files are being fetched from the cache not the server. Wordpress files have a query string appended to filenames which helps in breaking the cache. A new version will be fetched when the Wordpress version is changed or if cache expires.

But overwriting core Wordpress files is not good practice. This is because future updates will overwrite your changes.

Use a child theme and make a file named editor-style.css in the topmost folder and edit it and enqueue the file like this in child functions.php:

function twentytwelve_child_setup() {
	add_editor_style();
}
add_action( 'after_setup_theme', 'twentytwelve_child_setup' );
Last edited 7 years ago by superpoincare (previous) (diff)

#12 @blure
7 years ago

thank you,

I cleaned my browser cache, it works

Last edited 7 years ago by blure (previous) (diff)

#13 @azaozz
7 years ago

  • Milestone changed from Awaiting Review to 4.9

Thinking it would be best if this is removed or set to only body as a "global" line height, not to specific elements. This is a major readability setting and all themes that override it will still override, jumping text or not. That "jumping" seems to happen only in specific fonts anyway.

Alternatively we can delete it from the default editor css in WP.

Last edited 7 years ago by azaozz (previous) (diff)

#14 @azaozz
7 years ago

#41085 was marked as a duplicate.

#15 @xkon
7 years ago

  • Keywords has-patch added

I've looked at this on 4.8.1 and the TwentlyTwelve editor-style.css was missing the line-height to body as @azaozz referenced. Since themes are using the line-height on body tag at least for the editor's purposes 40956.diff simply adds that 1 missing line. The line-height is the same value as used on textareas for TwentyTwelve.

@xkon
7 years ago

Adds line-height to editor-style

@xkon
7 years ago

40956.diff preview

#16 @melchoyce
7 years ago

  • Keywords has-screenshots added

#17 @superpoincare
7 years ago

Hi @xkon,

In the diff, there's a repetition of line-height in the css.

You could instead change line 17 itself.

@xkon
7 years ago

Change line-height

#18 @xkon
7 years ago

Oh gosh, thanks @superpoincare 40956.2.diff fixes that. I didn't even see and it was in front of me. Time for a break I think :)

#19 @azaozz
7 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

#20 @azaozz
7 years ago

The line-height was removed from the default editor CSS in the latest version of TinyMCE.

Note: See TracTickets for help on using tickets.