WordPress.org

Make WordPress Core

Opened 10 days ago

Last modified 19 hours ago

#48269 new defect (bug)

WordPress beta 5.3 - Customizer - Height of input and select are not same.

Reported by: veminom Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version: trunk
Component: Customize Keywords: dev-feedback
Focuses: ui, accessibility Cc:
PR Number:

Description

After testing WordPress 5.3 Beta I found that the height of the input and select in the customizer is not equal. It looks like in beta version we have added increased the min-height of the input from 28px to 30px.

Please see the screenshot below:
https://cl.ly/e82bc0c16da1

And the height of the select is still the same 28px.

Please see the screenshot below:
https://cl.ly/c441e5c20883

I think we should have a similar height for both the select and input fields. ( either 30px or 28px )

Change History (4)

#1 follow-up: @dlh
10 days ago

  • Component changed from General to Customize
  • Keywords reporter-feedback added; needs-patch removed
  • Severity changed from major to normal
  • Version trunk deleted

Hi @veminom, and welcome to WordPress Trac!

I don't see a min-height applied to input fields in the Customizer in WordPress 5.2; from what I can see, the input and select elements have different heights in 5.2, albeit not the same as those in 5.3.

So, I'm not sure I see a regression. Separately, what would be the reasons for making them the same?

#2 in reply to: ↑ 1 @veminom
4 days ago

Hello @dlh,

Thank you for your response.

I don't see a min-height applied to input fields in the Customizer in WordPress 5.2; from what I can see, the input and select elements have different heights in 5.2, albeit not the same as those in 5.3.

  • I'm sorry for not describing it properly. The issue seems to be with the input field type number.

When I checked the input field type number, the below is the CSS I found for the input field type number:

WordPress 5.2:

Input ( type - number ) - 

http://localhost/wp-new/wp-admin/css/customize-controls.css?ver=5.2.4

.customize-control input[type="text"],
.customize-control input[type="password"],
.customize-control input[type="email"],
.customize-control input[type="number"],
.customize-control input[type="search"],
.customize-control input[type="tel"],
.customize-control input[type="url"] {
	width: 100%;
	line-height: 1.3;
	margin: 0;
}

http://localhost/wp-new/wp-admin/css/forms.css?ver=5.2.4

/* Vertically align the number selector with the input. */
input[type="number"] {
	height: 28px;
	line-height: 1;
}

In the above CSS, the height of 28px is applying to the input type number.

There seems to be no default WP theme with number field in it so I opened the Elements(HTML) editor of the page and renamed input type to number from text.

Please see the screenshot below:
https://cl.ly/49943d87bb60

Now, for field select in WordPress 5.2 there is height: 28px;.

WordPress 5.2:

Select -

http://localhost/wp-new/wp-admin/css/customize-controls.css?ver=5.2.4

.customize-control select {
    width: 100%;
    height: 28px;
    line-height: 2;
}

Please see the screenshot below:
https://cl.ly/38c1c0dbd7a6

So it looks like the height for both Input type number and Select is same that is 28px in WordPress 5.2.

# Now, coming to WordPress 5.3

Same input type field number CSS:

WordPress 5.3:

Input ( type - number ) -

http://localhost/wp-beta-test/wp-admin/css/forms.css?ver=5.3-RC1-46558

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"] {
	padding: 0 8px;
	/* inherits font size 14px */
	line-height: 2; /* 28px */
	/* Only necessary for IE11 */
	min-height: 30px;
}

Here the min-height of 30px is applied to the input field type number.

Please see the screenshot below:
https://cl.ly/d9a77327d738

And for select field the below CSS is getting applied:

WordPress 5.3:

Select -

http://localhost/wp-beta-test/wp-admin/css/customize-controls.css?ver=5.3-RC1-46558

.customize-control select {
    width: 100%;
    height: 28px;
    line-height: 2;
}

Please see the screenshot below:
https://cl.ly/f753bab78a23

Here the height is applied to the select field of 28px due to which the height of Input type number is 2 pixels more than that of Select field.


In my opinion, both the heights should be the same.

what would be the reasons for making them the same?

  • We should keep all the fields height the same as they were before. This new change of min-height 30 to input type number field is creating some UI issues because some of the themes use Input type number field with Select field in the same line which creates the height problem.

For example, please check the Astra:

Customizer -> Global -> Typography -> Headings ->

Please see the screenshot below:
https://cl.ly/bf53dece088f

In the above screenshot you can see that the height for input type number and select is different in WP 5.3 beta version while it is equal in WP 5.2 version

Please let me know your thoughts.

Thank you!

Replying to dlh:

Hi @veminom, and welcome to WordPress Trac!

I don't see a min-height applied to input fields in the Customizer in WordPress 5.2; from what I can see, the input and select elements have different heights in 5.2, albeit not the same as those in 5.3.

So, I'm not sure I see a regression. Separately, what would be the reasons for making them the same?

#3 @dlh
19 hours ago

  • Focuses accessibility added
  • Keywords dev-feedback added; reporter-feedback removed
  • Milestone changed from Awaiting Review to 5.3
  • Version set to trunk

Thanks for your detailed explanation, @veminom!

I wonder whether I could ask for help from the accessibility team in understanding the correct approach here.

.customize-control select is still set to height: 28px;. Based on the recent CSS changes, it seems like that should be changed to min-height: 28px;

However, other inputs have been changed to min-height: 30px in the recent CSS changes, and the dev note published at https://make.wordpress.org/core/2019/10/18/noteworthy-admin-css-changes-in-wordpress-5-3/ says that selects should now have a min-height: 30px;. But, as far as I can see, they're 28px.

So:

  1. What is the correct update to the Customize CSS?
  1. Is it intentional that the select min-height be different than inputs?

Adding this to the 5.3 milestone and adding the #accessibility focus for visibility.

This ticket was mentioned in Slack in #accessibility by dlh. View the logs.


19 hours ago

Note: See TracTickets for help on using tickets.