Make WordPress Core

#52029 closed defect (bug) (fixed)

Twenty Twenty-One: missing styles for button[type=submit]

Reported by: slaFFik Owned by: SergeyBiryukov
Milestone: 5.7 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch
Focuses: ui, css Cc:

Description

2021 theme has default styles for input[type=submit] but it does not have those same styles for button[type=submit].

So some plugins, that use button to submit the form on the front-end, are having CSS issues with 2021.

Attachments (3)

html-buttons-before.png (29.3 KB) - added by poena 12 months ago.
This image shows the missing styles for different types of buttons (on the front).
52029.patch (5.6 KB) - added by poena 12 months ago.
style the <button> element
html-buttons-after.png (30.2 KB) - added by poena 12 months ago.
With patch 52029 applied. (chrome, windows, front view)

Download all attachments as: .zip

Change History (11)

#1 @slaFFik
14 months ago

  • Summary changed from Twenty Twenty-One: to Twenty Twenty-One: missing styles for button[type=submit]

#2 @poena
14 months ago

  • Component changed from General to Bundled Theme

#3 @slaFFik
14 months ago

  • Component changed from Bundled Theme to General

It looks like https://github.com/WordPress/wordpress-develop/blob/master/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss should be modified to include additional styles for button[type=submit] same as input[type=submit].
Not sure what to do with:

  1. button[type=clear]
  2. generic button without defined type - most likely apply the same as button[type=button] and button[type=submit].

#4 @slaFFik
14 months ago

  • Component changed from General to Bundled Theme

#5 @poena
14 months ago

The button styles are found here:
https://github.com/WordPress/wordpress-develop/blob/master/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss

and

https://github.com/WordPress/wordpress-develop/blob/master/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss

I recommend changing this only after #51927 which updates the buttons.

-There will always be themes that are unstyled, so it is safest for plugins to style their own elements.

Last edited 13 months ago by SergeyBiryukov (previous) (diff)

This ticket was mentioned in Slack in #core-themes by poena. View the logs.


14 months ago

@poena
12 months ago

This image shows the missing styles for different types of buttons (on the front).

@poena
12 months ago

style the <button> element

@poena
12 months ago

With patch 52029 applied. (chrome, windows, front view)

#7 @poena
12 months ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 5.7

#8 @SergeyBiryukov
12 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 49988:

Twenty Twenty-One: Add missing styles for <button> element.

Props poena, slaFFik.
Fixes #52029.

Note: See TracTickets for help on using tickets.