Block audit: Preformatted

[sarahmonster]

Note: We'll be doing these audits in waves and editing this as we work through the blocks, so this text will be updated and fleshed out as we progress. See the full picture here.

Overview

Name: Preformatted
Description: Add text that respects your spacing and tabs, and also allows styling.
Category: Formatting
CSS class: wp-block-preformatted in frontend and editor
Can be converted to: paragraph

States

Empty:

Selected:

Unselected:

Placeholder:

Primary (toolbar) settings

Bold, italic, strikethrough, link

Secondary (sidebar) settings

Advanced: Additional CSS Class

Frontend appearance

Gutenberg starter theme:

Atomic Blocks

twentyseventeen:

twentyten:

Bugs/errors

Individual issues will be opened for these soon

• Copy-and-pasting in text in poetry format creates two line breaks instead of one.

• If you create a preformatted block but don't type anything into it, then deselect and reselect it, it won't allow you to type anything into the block.

Suggestions

Individual issues will be opened for these soon

• What's the use case for this? I'm struggling with suggestions here because I genuinely can't think why you'd want to use this, except for maybe poetry... but we've a verse block already. (More on that later.

• Should this also be alignable like other blocks? Again, without knowing the intended use case here, I'm not sure.

• Should probably be convertible to a code block and a verse block. (Might not be doable, see Add Code → Preformatted block transform #9326)

[ZebulanStanphill]

What's the use case for this? I'm struggling with suggestions here because I genuinely can't think why you'd want to use this, except for maybe poetry... but we've a verse block already. (More on that later.

This block is good for ASCII art, as well as showing terminal output or precisely replicating the formatting of a text file that uses spaces to center headings and stuff like that.

Should this also be alignable like other blocks? Again, without knowing the intended use case here, I'm not sure.

It should probably not have text alignment controls, given the context of terminal outputs or .txt files formatted with particular spacing and line breaks. Float alignment controls are unnecessary as well, in my opinion. I could see the wide/full-width alignment options being useful, though.

Should probably be convertible to a code block and a verse block.

I agree.

[sarahmonster]

This block is good for ASCII art, as well as showing terminal output or precisely replicating the formatting of a text file that uses spaces to center headings and stuff like that.

Could you not use the code block or the verse block for that, though? The performatted and verse blocks are so similar (and look exactly the same when output in a theme) that I wonder if this might not be creating unneeded complexity for a very small number of edge cases.

[ZebulanStanphill]

Could you not use the code block or the verse block for that, though?

The Code block uses the <code> element, which would be inappropriate for something that is not code. So it is really the Code block that is more removable. But even then, most people likely want blocks of code to be styled differently (think dark background and potential syntax highlighting) compared to a block of preformatted text (which would probably have a light background and no syntax highlighting since it is not code). The blocks simply make it easy for themes to support both use cases.

Themes are supposed to determine how blocks look, both in the editor and on the front-end. Of course, Gutenberg provides default (opt-in or opt-out, I don't remember) styling, but themes are supposed to override it and provide their own if desired. Of course, right now there are few themes with much Gutenberg support, so of course the Verse and Preformatted blocks look pretty similar. You are probably not using a theme that gives them any different styling.

I think the default styling provided by Gutenberg for the Verse block could definitely be improved, though. I made a suggestion in #4138. Note that the Gutenberg default styles are supposed to be fairly minimal (if I remember correctly), so that may be part of the reason why some of the blocks look so similar.

[sarahmonster]

I'm going to go ahead and close this since the suggestions here have either been solved or discussed elsewhere, and I don't think there's anything actionable here. Thanks for all the feedback! 🌟