Thanks so much for this PR! Here's the editor, before:

Frontend, before:

Here's the editor, after:

Here's the frontend, after:

The font size control is also added:

That font size stuff all seems fine. It also adds a white-space: nowrap; property with a horizontal scrollbar. While it's good that this makes the frontend and editor sync up, this is the part of the PR we need to tread carefully with:

1. It changes the default appearance of the block which is already in wide usage. While I generally think it's an okay change, it is nevertheless a change, which means we need to tread carefully.
2. As I also left some comments about, it changes the intrinsic pre-wrap property to wrap, which based on commentary in the code by @ellatrix might go against initial intentions.

It seems the safest way forward, which still puts the frontend in sync with the editor, is to go in the opposite direction.

Instead of:

.wp-block-preformatted {
	font-size: var(--wp--preset--font-size--extra-small, 1em);
	overflow-x: auto;
	white-space: pre;
}

you output

.wp-block-preformatted {
	font-size: var(--wp--preset--font-size--extra-small, 1em);
	white-space: pre-wrap;
}

That way you can also remove the editor style you added again, and we sync up the frontend.

I'd also argue that this serves as a good bugfix for the lacklustre overflow handling.

What do you think?

It changes the default appearance of the block which is already in wide usage. While I generally think it's an okay change, it is nevertheless a change, which means we need to tread carefully.

@jasmussen What I think would make sense here is to do the following:

Set the default font size to match the existing size in Gutenberg. Right now it is --wp--preset--font-size--extra-small, and it definitely looks different compared to the size before. It may need to be set to the current value it has at the moment. I haven't looked, but there may be a bigger font size that matches the current size of the editor.

My thinking here is that this needs to be done as progressive enhancement instead of doing it like I did initially. It must have backwards compatibility with the existing preformatted block, which means it would be totally better for it to have the same size it had.

I'll work on the backwards compatibility fix for the font size and will keep you posted.

What do you think?

Makes absolute sense, I pushed a commit to address the pre-wrap change. Thanks!

Set the default font size to match the existing size in Gutenberg. Right now it is --wp--preset--font-size--extra-small, and it definitely looks different compared to the size before. It may need to be set to the current value it has at the moment. I haven't looked, but there may be a bigger font size that matches the current size of the editor.

The size looks the same to me in my testing of TT1🔳s, but definitely worth testing the before and after in a few themes to be sure.

My thinking here is that this needs to be done as progressive enhancement instead of doing it like I did initially. It must have backwards compatibility with the existing preformatted block, which means it would be totally better for it to have the same size it had.

I think that's generally the safe mindset, but it doesn't have to be the case always. If the existing block has a bug or something in that category, it's fine to fix it. So the fact that it goes out to every user, is arguably a key benefit. So this isn't a fundamental issue, so much as us being careful that we do this deliberately and thinking through any potential side effects.