Gutenberg: Consider consolidating the appearance of the Code and HTML Blocks

[kjellr]

As originally noted in #8435, the Code and HTML blocks are very similar in appearance. They're close, but they have some minor differences. The reason for these differences is not immediately apparent.

Since both are essentially code editors, I'd suggest we adjust them to use the same styles. My suggestion would be to change the Code block as the base, since it more closely matches the borders used when you switch to the code editor (light gray border, no rounded corners).

Screenshots

_De-selected:_

_Selected:_

[richtabor]

As an alternative view, I'd suggest that these two blocks should be styled _more differently_.

They are very different blocks, with very different functionalities. The Code block displays code inside of a code tag on the frontend (which themes may style with .wp-block-code ), while the HTML block will actually render the code.

Perhaps something as simple as a background color applied to .wp-block-code (_and the textarea within the editor_) would be effective.

Screenshots

_De-selected:_

_Selected:_

[joyously]

Is this about styling only the editor UI, or the block itself (back and front match)?
Either way, if you use a background color, be sure to specify a foreground color at the same time. Themes can be dark, you know?

[richtabor]

Is this about styling only the editor UI, or the block itself (back and front match)?

Both - as they should match. And valid point. ✅

[enriquesanchez]

What if we added line numbers to the code block? This will make it look similar to how other code editors/snippets elsewhere look like, and hopefully matching the user's expectation.

[ibdz]

After discussing this in the Design Team slack today, we agreed to add the numbered lines to visualize the Code block and show up for both Editor and frontend, with the option to turn them off.

[paaljoachim]

Adding line numbers to the Code Block is a very good idea!

A thought that come up as I again read through the above comments.
What if we add background and text color to the Code Block?
One could add a light grey background.
As a user might want to add some variation in how code is seen.

[joyously]

What if we add background and text color to the Code Block?

Please don't! That is a job for themes, not the editor or the block. color options are especially difficult to overcome if the editor has styles for it.

[paaljoachim]

Good point Joy.
It was a random (not that great of a) thought..:)