Discussion: Adding default styles for form elements

[carolinan]

Description
The Gutenberg PR to add the form inputs to theme.json elements was not completed in time for WordPress 6.7 Beta 1.
Should the theme add default styles for form inputs?

The search and comment forms are already styled.
Login/logout block is not styled: It can be improved, but needs custom CSS since the expected class names for the button style etc. is missing (this is a known issue).

Many forms in third-party plugins and custom blocks are not styled.

[mikemcalister]

I've been reading through the previous discussions on this and there are a lot of good points for and against.

Personally, I'm of the mind that we should have some sensible fallback styles for inputs. As Carolina mentioned, we already have some for the comment form, so the styles are there.

As users have pointed out, without any styling the form elements look broken or woefully out of place against the backdrop of the otherwise beautiful design. Maybe that's just the designer in me. 🙃

This should be something we can seamlessly transition to theme.json powered styles when they are available.

[justintadlock]

The fix for the login form is just a few lines of CSS: WordPress/gutenberg#50466 (comment)

☝ I've also shared a fix for applying the .wp-element-button class to the login form button in that ticket too.

[carolinan]

Since it is not a bug introduced in 6.7, I am not sure an update to login/out can be included now, even if someone was able to work on it.

[evrpress]

+1 for adding some fallback styles. Things to consider:

The fallback is for this theme only
This would be only for the current theme so others could copy this approach.

Form plugins often bring their own styles therefore fallback should be minimal with low specificity
There are not many forms in core but almost every website uses forms. Using a low specificity should prevent any significant issues.

Comment form styles should be used
I see no reason why the existing style from the comment form shouldn't be used.

Discussions

There are already discussions/pr going on
WordPress/gutenberg#29167
WordPress/gutenberg#34198
WordPress/gutenberg#51337

Specific CSS can be found on the post-comment-form block here and here

Approach

I would add default styling with a low specificity by using the :where pseudo selector:

:where(textarea),
:where(select),
:where(input:not([type="submit"])) {
    border: 1px solid;
    font-size: 1em;
    font-family: inherit;
    border-radius: .25rem;
    border-color: var(--wp--preset--color--accent-6);
}
:where(textarea),
:where(select),
:where(input:not([type="submit"]):not([type="checkbox"])) {
    padding: calc(0.667em + 2px);
}

This can be added to the style.css meanwhile until we have form elements in core

without CSS	with CSS

It is still not perfect but I think a good starting point to bring CSS to forms in TT5.

[troychaplin]

What if the example from @evrpress was slightly updated to follow the style of the search block?

:where(textarea),
:where(select),
:where(input:not([type="submit"])) {
    border: 1px solid;
    font-size: 1em;
    font-family: inherit;
    border-radius: 3.125rem;
    border-color: var(--wp--preset--color--accent-6);
}

:where(textarea),
:where(select),
:where(input:not([type="submit"]):not([type="checkbox"])) {
		padding: 0.667rem;
}

[mikemcalister]

@troychaplin I think we should stick to more standard input styles here. The fully-rounded ones can look like buttons and feel visually disconnected.

I'm not an a11y expert but I think there are also some considerations there.

[carolinan]

The different style variations use different border radius.
But I wouldn't expect it on the text area and select.

[troychaplin]

The different style variations use different border radius. But I wouldn't expect it on the text area and select.

You're right, I didn't consider what this applies too, I didn't look beyond its application on the login / out block

[carolinan]

Anyway, I don't see any arguments against adding styles for the inputs. The only question is which styles :)

[carolinan]

What do you think @beafialho ?

I recommend using the same styles as the comment blocks, in all style variations:

The select list needs styling too, especially padding. Compare the current search block and the categories list with dropdown enabled:

[beafialho]

I recommend using the same styles as the comment blocks, in all style variations:

I agree @carolinan.

Do we have a way to customise the category dropdown like this? On the left are the current styles, on the right is a proposal of how they could be.

[carolinan]

Summary:

1. Users want the theme to include styles for third party forms
2. The theme is also using the incorrect styles for the search form
3. The theme is missing styles for select lists

The theme can’t style third party blocks with generic styles, because the CSS bleeds into the editor interface.

There is a bug with the custom CSS field in theme.json, that results in the search block not being updated when you switch style variations. Work on select lists has not started and would be affected by the same CSS issue as above.