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

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.

File:

• trunk/src/wp-includes/customize/class-wp-customize-date-time-control.php (modified) (4 diffs)

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">