Update Classic block to better resemble the current editor

[jasmussen]

The Classic block has caused confusion in a number of ways since the start, which has caused the name to change from "Freeform" to "Classic Text" to "Classic". It's also hard to visually distinguish from the Paragraph blocks, causing confusion because the interactions are very different. Alignments in the paragraph block work at the block level, whereas you can have multiple paragraphs with different alignments inside a Classic block, as well as a multitude of other content.

What if we made the Classic block reflect the styling of the current editor? It would have the following benefits:

• Reduce confusion as to the difference between a Paragraph block and the Classic block
• Provide some recognition for users migrating to Gutenberg
• By not changing the UI, we can better support TinyMCE specific plugins like TinyMCE advanced

Here's a mockup:

[StaggerLeee]

Would like to ask if you can reconsider making content area wider. It will be wider in at least 60-70% of front-end cases. I know you cannot scan PHP code and find out what is width set in theme. One single line filter to decide width of Gutebnerg would help a lot.

As it is now a lot much empty space around.

[ellatrix]

@StaggerLeee This seems to be unrelated to this issue. Maybe create a new one?

[ellatrix]

I love this. I would also suggest to just leave the toolbar visible, regardless of block selection, to make clear at all times that it is a classic editor. Unlike other blocks, this falls out of the regular block experience, so the user is kind of "on their own" within this area. It's also not always easy to get out of it as pressing enter will just keep you inside the block. Added images may look like they are blocks but they are not. Etc.

[jasmussen]

Would like to ask if you can reconsider making content area wider. It will be wider in at least 60-70% of front-end cases. I know you cannot scan PHP code and find out what is width set in theme. One single line filter to decide width of Gutebnerg would help a lot.

At some point we will refactor the main column to address #1483. That should make it possible for the editor to comply with widths that are set by the theme itself.

[karmatosed]

+1 for this.

[ellatrix]

PR linked should be ready apart from the initial focus issue. Cannot do much there without it updated in TinyMCE