Add border to block "Edit as HTML" style.

[ZebulanStanphill]

Description

Adds visible borders to blocks in "Edit as HTML" mode.

According to WCAG 2.1, text input fields ought to have a sufficient level of contrast with their surrounding background. And while Twenty Twenty uses a tan background that does contrast with the white textarea, this is far from the norm. Most themes use white backgrounds, so in those cases the field would blend in with the background. That's not good, especially in this particular case where the field isn't even trying to be WYSIWYG. It doesn't even indicate focus properly.

Additionally, most non-WYSIWYG text inputs in our UI have a certain look to them, which this field lacks in master.

This PR solves both issues by giving this text field the same look as other standard text inputs across the editor UI.

Screenshots

Before

Unselected

Selected

After

Unselected

Update: I've added some padding.

Selected

Update: I've added some padding.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[ZebulanStanphill]

For a related accessibility discussion about bringing back borders to selected blocks in visual mode (the removal of which is being considered a regression compared to WP 5.4), see #23892.

[github-actions]

Size Change: +6 B (0%)

Total Size: 1.17 MB

Filename	Size	Change
build/block-editor/style-rtl.css	11.1 kB	+3 B (0%)
build/block-editor/style.css	11.1 kB	+3 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.52 kB	0 B
build/api-fetch/index.js	3.34 kB	0 B
build/autop/index.js	2.72 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	8.53 kB	0 B
build/block-directory/style-rtl.css	943 B	0 B
build/block-directory/style.css	942 B	0 B
build/block-editor/index.js	128 kB	0 B
build/block-library/editor-rtl.css	8.56 kB	0 B
build/block-library/editor.css	8.56 kB	0 B
build/block-library/index.js	135 kB	0 B
build/block-library/style-rtl.css	7.6 kB	0 B
build/block-library/style.css	7.59 kB	0 B
build/block-library/theme-rtl.css	741 B	0 B
build/block-library/theme.css	741 B	0 B
build/block-serialization-default-parser/index.js	1.78 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	47.5 kB	0 B
build/components/index.js	167 kB	0 B
build/components/style-rtl.css	15.5 kB	0 B
build/components/style.css	15.5 kB	0 B
build/compose/index.js	9.42 kB	0 B
build/core-data/index.js	12 kB	0 B
build/data-controls/index.js	1.27 kB	0 B
build/data/index.js	8.43 kB	0 B
build/date/index.js	31.9 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	568 B	0 B
build/dom/index.js	4.42 kB	0 B
build/edit-navigation/index.js	10.4 kB	0 B
build/edit-navigation/style-rtl.css	868 B	0 B
build/edit-navigation/style.css	871 B	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.24 kB	0 B
build/edit-post/style.css	6.23 kB	0 B
build/edit-site/index.js	19.7 kB	0 B
build/edit-site/style-rtl.css	3.3 kB	0 B
build/edit-site/style.css	3.3 kB	0 B
build/edit-widgets/index.js	17.5 kB	0 B
build/edit-widgets/style-rtl.css	2.8 kB	0 B
build/edit-widgets/style.css	2.8 kB	0 B
build/editor/editor-styles-rtl.css	492 B	0 B
build/editor/editor-styles.css	493 B	0 B
build/editor/index.js	45.5 kB	0 B
build/editor/style-rtl.css	3.8 kB	0 B
build/editor/style.css	3.8 kB	0 B
build/element/index.js	4.45 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.49 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	1.74 kB	0 B
build/html-entities/index.js	621 B	0 B
build/i18n/index.js	3.55 kB	0 B
build/is-shallow-equal/index.js	709 B	0 B
build/keyboard-shortcuts/index.js	2.39 kB	0 B
build/keycodes/index.js	1.85 kB	0 B
build/list-reusable-blocks/index.js	3.02 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.12 kB	0 B
build/notices/index.js	1.69 kB	0 B
build/nux/index.js	3.27 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.44 kB	0 B
build/primitives/index.js	1.34 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	13.7 kB	0 B
build/server-side-render/index.js	2.61 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.24 kB	0 B
build/url/index.js	4.06 kB	0 B
build/viewport/index.js	1.74 kB	0 B
build/warning/index.js	1.13 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[youknowriad]

changes look good, I might even add a padding and try to match the design of the "code editor" as much as possible.

let's see what our designers say about it.

[folletto]

Agreed, if possible I'd add some padding.
Given the assumed grid of Gutenberg is generally 12px, I'd suggest do have 12px padding.

[afercia]

Thanks! Nice a11y improvement.

The suggestion to add some padding if possible makes sense to me.

[ZebulanStanphill]

Great idea to add some padding. I've updated the padding to $grid-unit-15 (12px) all around:

[joyously]

Thank you for fixing this. I'm wondering why it has resize:none though.
Did you try testing with two blocks? Since this one has width:100%, what happens when it is next to a block that is floated or has position:absolute?
I saw this once when I was testing my own theme styles: the block being edited as Text was covered by the other Visually styled block, since the Text one didn't have my theme's styles on it anymore.

[ZebulanStanphill]

@joyously Both of the styles you mentioned existed prior to this PR, so changing them is out-of-scope for this PR.

I looked into it, though. They both originate from #2797, when the "Edit as HTML" feature was introduced. No reason is given for the resize bit, but the width is there because otherwise the textarea would default to a very small browser default.

As for what the block looks like next to a floated element...

(Note that Twenty Twenty applies negative margins to floated elements, but the end result would be similar even if it didn't.)

I mean, it's certainly usable. After some playing around with the CSS, I couldn't come up with a better behavior than this. Feel free to open a separate issue discussing how to improve this, though.

[joyously]

Yes, I understand. Thanks for checking with this PR (I don't have a dev setup for GB).
With the float, it seems a bit disjoint to have the 3 dot toolbar so far away from the actual block content, but I know this is unrelated to this PR. I suppose it was the position:absolute that had the overlap I saw, which of course is unrelated...just a concern of Text mode.

[enriquesanchez]

This looks good to me and an overall improvement 👍
Thank you, @ZebulanStanphill!