Twenty Twelve: Line-Height in TinyMCE Editor

[superpoincare]

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

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

Screenshots:

4.7:

4.8:

[spocke]

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.

[superpoincare]

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?

[SergeyBiryukov]

Related: #40743

[azaozz]

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.

[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; 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.

[superpoincare]

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)?

[spocke]

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

[blure]

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

[superpoincare]

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' );

[blure]

thank you,

I was thinking of the file "style.css" that when I upgrade wordpress this not change never.

good
ciao

[azaozz]

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.

[azaozz]

#41085 was marked as a duplicate.

[xkon]

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]

Adds line-height to editor-style

[xkon]

40956.diff preview

[superpoincare]

Hi @xkon,

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

You could instead change line 17 itself.

[xkon]

Change line-height

[xkon]

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 :)

[azaozz]

In 41604:

TinyMCE: update to 4.6.7, changelog: ​https://www.tinymce.com/docs/changelog/#version467september182017.

Fixes #41996 #40956

[azaozz]

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