Update HTML Custom block to use isSelected for raw HTML view and by d…

[mauteri]

What?

This PR is to put the Custom HTML block in preview mode, and on select show raw HTML.

Why?

Raw HTML is sometimes unavoidable and can be scary or jarring to the enduser. In order to maintain a what-you-see-is-what-you-get feel in the block editor, it is important to have the Custom HTML block look more at home with the rest of the blocks/content in the editor.

How?

This is just a small change to the block so it always displays in preview mode unless selected or empty.

Testing Instructions

1.) Create a new post or open an existing one.
2.) Add a new or edit an existing Custom HTML Block.
3.) Once content is added Custom HTML block should be in preview mode (if Custom HTML block is there already, that should be in preview mode too).
4.) On select the block should display raw HTML and be able to be edited.
5.) If all content is removed (or only whitespace), Custom HTML block should not be in preview mode no matter what.

Testing Instructions for Keyboard

N/A. No significant changes were made to the general UI of the block. Prevew | HTML buttons have been removed as they are no longer needed.

[alexstine]

@mauteri Quick question. If you removed the preview HTML button and the only way to see the rendered HTML is to not have the block selected, how is this still keyboard accessible? Does not sound like it would be. If the block is selected, you will always see the code after this change. Therefor, previewing HTML is no longer possible for keyboard-only users. If I got it wrong, please let me know.

Thanks.

[mauteri]

@mauteri Quick question. If you removed the preview HTML button and the only way to see the rendered HTML is to not have the block selected, how is this still keyboard accessible? Does not sound like it would be. If the block is selected, you will always see the code after this change. Therefor, previewing HTML is no longer possible for keyboard-only users. If I got it wrong, please let me know.

Thanks.

Thanks @alexstine, I wasn't sure how this was supposed to behave with keyboard-only interaction. Currently, tabbing to the block will display it as HTML and tabbing off the block will display it as preview. I'm noticing that sometimes tabbing onto the block allows you access to the raw HTML with arrow keys, and then tabbing off the block keep the block in raw HTML view unless you click esc. This behavior might be a bug with isSelected property, but not certain.

That said, I have another PR that maintains state of preview on save, so maybe this PR is the better option: #46834

Let me know what you think.

[alexstine]

I believe the UX in your linked PR will be better for us long term even though the Custom HTML block is really not keyboard accessible at this point in preview mode. I'll open a related issue for it if one does not already exist. I think this PR should be closed in favor of the other.

Thanks.

[mauteri]

I believe the UX in your linked PR will be better for us long term even though the Custom HTML block is really not keyboard accessible at this point in preview mode. I'll open a related issue for it if one does not already exist. I think this PR should be closed in favor of the other.

Thanks.

Sounds good, thanks for your input on this. I'll close this PR in favor of the other.