Block audit: Custom HTML

[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: Custom HTML
Description: Add your own HTML (and view it right here as you edit!).
Category: Formatting
CSS class: none that I could tell?
Can be converted to: nothing

States

Empty:

Selected:

Unselected:

Placeholder:

Primary (toolbar) settings

HTML and Preview tabs (no settings)

Secondary (sidebar) settings

none

Frontend appearance

I'm omitting front end screenshots: Since this block outputs its content directly into entry-content — with no wrapper element — it defaults to the theme's standard styles entirely.

Bugs/errors

Individual issues will be opened for these soon

• This block doesn't use any container div at all when output to frontend, meaning formatting can get weird. (See Gutenberg starter theme.) This seems expected. Also, since it's just HTML a user can manually add a wrapper div if they so choose.

• Refreshing the page yields a "this block has been modified externally" message which is a little confusing. (Custom HTML block - invalid markup results in block validation issue with incorrect conversion option #13158)

• When using a RTL language, the block has a few visual bugs. (Custom HTML Block: RTL visual issues #8680)

• Line numbers lack sufficient contrast. (Custom HTML block: line numbers lack sufficient contrast #8736)

• I couldn't figure out how to switch between HTML and Preview modes whilst using keyboard navigation. There may be a shortcut I've missed? (Possibly tangentially related: HTML block: Selecting text with keyboard should not reveal block toolbar #5274.)

Suggestions

Individual issues will be opened for these soon

• I get an error before I've finished typing a block of code, which was a bit confusing. Tested on 2/18/2019, did not see any error reporting.

• Preview mode should potentially use Gutenberg typeface, rather than falling back to Times. (Custom HTML block: Preview styles do not match the rest of the editor #9129)

• The styling here is suffering from the same double-box syndrome as the code block, although it's definitely less pronounced. Considering the design of this alongside the code block may be sensible, since they feel quite different. (Consider consolidating the appearance of the Code and HTML Blocks #13934)

• How do errors display on mobile devices? Right now, they only appear on hover. Tested on 2/18/2019, did not see any error reporting.

• Should this be convertible to and from a code block? (HTML Block: Consider allowing users to convert between HTML and Code blocks  #13935)

[ZebulanStanphill]

No devdocs in https://github.com/WordPress/gutenberg/tree/master/core-blocks/verse

Typo there.

This block doesn't use any container div at all when output to frontend, meaning formatting can get weird. (See Gutenberg starter theme.)

Not using a container <div> is probably desirable behavior, though, is it not?

Preview mode should potentially use Gutenberg typeface, rather than falling back to Times.

Well, technically it should use the typeface that the theme styles Gutenberg to use... or is that what you mean by "Gutenberg typeface"?

The styling here is suffering from the same double-box syndrome as the code block, although it's definitely less pronounced. Considering the design of this alongside the code block may be sensible, since they feel quite different.

I am starting to wonder if the block border should go back to being the actual size of the block. Simultaneously, I think the drag areas around the borders and automatic margins should be removed from blocks. Together, this would all make the double-border thing a non-issue, since the hover/selected border would just overlap the other one. See also:

• Display block tools underneath the block, instead of to the sides #6224
• Drag & Drop: Change to use hover label as the draggable handle #7114
• Try moving block margins to each block #8350

Should this be convertible to and from a code block?

I guess that could be handy for when you accidentally chose one but meant to use the other.

[talldan]

I've created #13158 which seems related to the issue mentioned here:

Refreshing the page yields a "this block has been modified externally" message which is a little confusing.

[kjellr]

I just went through and filed issues (or just made inline notes) for the remaining items in this ticket. I'm going to close this ticket in favor of the smaller issues. 👍