WordPress.org

Make WordPress Core

Opened 3 months ago

Closed 6 weeks ago

#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 7 weeks ago.
This image shows the missing styles for different types of buttons (on the front).
52029.patch (5.6 KB) - added by poena 7 weeks ago.
style the <button> element
html-buttons-after.png (30.2 KB) - added by poena 7 weeks ago.
With patch 52029 applied. (chrome, windows, front view)

Download all attachments as: .zip

Change History (11)

#1 @slaFFik
3 months ago

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

#2 @poena
3 months ago

  • Component changed from General to Bundled Theme

#3 @slaFFik
3 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
3 months ago

  • Component changed from General to Bundled Theme

#5 @poena
3 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 2 months ago by SergeyBiryukov (previous) (diff)

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


3 months ago

@poena
7 weeks ago

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

@poena
7 weeks ago

style the <button> element

@poena
7 weeks ago

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

#7 @poena
7 weeks ago

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

#8 @SergeyBiryukov
6 weeks 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.