Block audit: Code

[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: Code
Description: Add text that respects your spacing and tabs -- perfect for displaying code.
Category: Formatting
CSS class: wp-block-code in frontend and editor
Can be converted to: nothing

States

Empty:

Selected:

Unselected:

Placeholder:

Primary (toolbar) settings

None

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

Suggestions

Individual issues will be opened for these soon

• Nix the double-border. (Sometimes it's triple!)

• I was sort of expecting to see a bit more styling here—syntax highlighting would be really nice. (Language Support or Formatting for <Code> block. #9336)

• Being able to see invisibles (spaces, tabs) would make it easier for people to write actual code in here. (Code block should show invisible characters #11380)

• Word wrap?

• Maybe this should be convertible to preformatted?

• 6. I suspect this wouldn't work for accessibility reasons, but I suspect people (especially WordPress people) might want to be able to type tabs into the code box. (Code block should show invisible characters #11380)

[ZebulanStanphill]

Nix the double-border. (Sometimes it's triple!)

This bothered me, but for some reason I never bothered to suggest changing it. Thank you. 😛

I was sort of expecting to see a bit more styling here—syntax highlighting would be really nice.

That sounds like a theme thing?

Maybe this should be convertible to preformatted?

I think so.

I suspect this wouldn't work for accessibility reasons, but I suspect people (especially WordPress people) might want to be able to type tabs into the code box.

I certainly would like to be able to use tabs here. The Custom HTML block allows inserting tabs by pressing Tab. You exit the block by pressing Esc and then pressing Tab.

[ZebulanStanphill]

Also, I think the Edit as HTML option should be available for this block. That would allow you to insert <var>s and other semantic elements or do your own syntax highlighting using <span>s.

See #6672.

[sarahmonster]

All issues here have been filed as individual issues, so I'm going to go ahead and close out this tracking bug. Feel free to comment on if I missed anything, or open new issues as needed! 💪