WordPress / wporg-parent-2021

21 stars 11 forks source link

Comment form inputs and textarea missing borders #147

Closed kathrynwp closed 3 months ago

kathrynwp commented 4 months ago

Describe the bug It's very easy to miss the comment form at the bottom of each documentation page as it has no border, coloured background, or any other visual identifier

To Reproduce

Visit any documentation page with a feedback form at the bottom, in the section with the heading "Was this article helpful? How could it be improved?"

Notification_Center

Screenshot taken at https://wordpress.org/documentation/article/group-block/

Expected behavior The textarea should have a border or some other way to make it clear that there's a form field there.

Desktop (please complete the following information):

ryelle commented 3 months ago

Moved to the parent theme repo, since this was also reported on developer — https://developer.wordpress.org/news/2024/07/30/building-a-card-layout-with-a-hover-reveal-effect/

Seems to be a result of https://github.com/WordPress/gutenberg/pull/62960; previously the default comment form styles added a border, but now that they're lower specificity, our textarea reset is overriding it.

This can be styled (kind of) with a CSS string in theme.json, or maybe rethink the form reset? The following does not work because the input[type…]s are a higher specificity.

"core/post-comments-form": {
  "css": "& textarea, input { border: 5px solid red; }"
},

Alternately, maybe set the custom properties differently when in the form? They're 0 solid transparent by default (to reset the search field).

border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color)