Changeset 59942

Timestamp:

03/05/2025 11:25:14 PM (6 weeks ago)

Author:

audrasjb

Message:

Customizer: Improve input field widths and alignment for date/time controls.

This changeset fixes some issues where Select fields were misaligned with neighboring elements, creating visual inconsistency in the customizer.

Props rkradadiya, mukesh27, laxman-prajapati, dlh, karmatosed, ankitkumarshah, sabernhardt.
Fixes #51249.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (1 diff)
• wp-includes/customize/class-wp-customize-date-time-control.php (modified) (4 diffs)

trunk/src/wp-admin/css/customize-controls.css

@@ -364 +364 @@
 .date-time-fields .date-input.minute {
     width: 46px;
+}
+
+.customize-control-date_time select {
+    vertical-align: top;
 }
 

trunk/src/wp-includes/customize/class-wp-customize-date-time-control.php

@@ -155 +155 @@
                         ?>
                     </label>
-                    <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
+                    <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day tiny-text" data-component="day" min="1" max="31" />
                     <?php $day_field = trim( ob_get_clean() ); ?>
 
@@ -165 +165 @@
                         ?>
                     </label>
-                    <input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
+                    <input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year tiny-text" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
                     <?php $year_field = trim( ob_get_clean() ); ?>
 
@@ -183 +183 @@
                         <# var maxHour = data.twelveHourFormat ? 12 : 23; #>
                         <# var minHour = data.twelveHourFormat ? 1 : 0; #>
-                        <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="{{ minHour }}" max="{{ maxHour }}">
+                        <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour tiny-text" data-component="hour" min="{{ minHour }}" max="{{ maxHour }}">
                         :
                         <label for="{{ idPrefix }}date-time-minute" class="screen-reader-text">
@@ -191 +191 @@
                             ?>
                         </label>
-                        <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
+                        <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute tiny-text" data-component="minute" min="0" max="59">
                         <# if ( data.twelveHourFormat ) { #>
                             <label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text">