Preformatted blocks do not remove styled line spacing

[trickywidget]

The line spacing in a Preformatted block is not correct. It is still being styled, which results in line spacing that is too high. This is clearly seen when using Unicode box-drawing characters. See attached image for an example.

[noisysocks]

Hi @trickywidget. Line height in this case would be up to the theme. Does changing the line height in the theme / the theme's editor.css change the line height in the Preformatted block?

[trickywidget]

Anything in <pre></pre> tags should not be affected by the theme in any way. The whole point of them is that it designates content that is excluded from external formatting. Hence the bug report. If the theme line height is being applied by design, then it is not preformatted and the block needs to be renamed.

​https://www.w3.org/TR/2011/WD-html5-author-20110809/the-pre-element.html

[noisysocks]

<pre> doesn't denote text that is excluded from external formatting, just text that has a "structure represented by typographic content rather than by elements".

In other words, structure such as newlines and whitespace are determined using literal characters such as \n and rather than by elements such as <br>. CSS can still be used to style properties such as line-height, font-weight, letter-spacing, etc.

I do agree, however, that when using the default Twenty Twenty theme, the line height in a Preformatted block is so large that it renders the block impractical for things such as ASCII art and diagrams. This line-height is set by Twenty Twenty's pre styling.

I'd like us to consider decreasing the default pre line height, so am moving this ticket to Bundled Theme.

[sabernhardt]

I opened GB34127 to request a line-height control in the editor so that value can be edited—using any theme—when necessary.

I do not agree with reducing a theme's pre element line-height lower than 1.5 because a larger value can help when reading Verse and Code block content (also using pre tags). Twenty Nineteen's line-height is quite high at 1.8, though that matches the paragraph.

• Twenty Ten: 1.4 within #content (where a paragraph is 1.667), or 1.5 in a widget (same for pre and paragraph)
• Twenty Eleven: 1.5 (paragraph is 1.625)
• Twenty Twelve: 1.714285714 within .entry-content and .comment-content (same as paragraph); pre inherits body line-height of 1 in widgets (where paragraphs have 1.846153846 line-height)
• Twenty Thirteen: no specific line-height for pre, but body has 1.5
• Twenty Fourteen: 1.6 (paragraph is 1.5); pre is slightly taller in widgets (1.6363636363)
• Twenty Fifteen: 1.2 (paragraph is 1.6) at narrower screen widths (on larger screens and IE, pre line-height increases slightly to around 1.25 within content area, or 1.5 within a widget)
• Twenty Sixteen: 1.3125 (paragraph is 1.75); in widgets, pre and paragraph line-heights match at larger screen widths (1.6153846154)
• Twenty Seventeen: 1.6 (paragraph is 1.66, or 1.5 at larger screen widths)
• Twenty Nineteen: 1.8 (same as paragraphs)
• Twenty Twenty: 1.5 (paragraphs are 1.4 to 1.476 within .entry-content, or 1.5 in widgets)
• Twenty Twenty-One: no specific line-height for pre, but the --global--line-height-body variable used on html equals 1.7

[poena]

The preformatted block now has a line height option in the Typography panel,
if the theme opts in ( add_theme_support( 'custom-line-height' ); for classic themes, theme.json for block themes.).

This value is inline,

<pre class="wp-block-preformatted" style="line-height:2.7;">

so when the value is updated, it will override the theme's default line-height correctly in the editor and the front.

I will close this ticket as fixed. Kindly comment on or reopen the ticket if needed.