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.


Built from https://develop.svn.wordpress.org/trunk@59942


git-svn-id: http://core.svn.wordpress.org/trunk@59284 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
audrasjb
2025-03-05 23:27:21 +00:00
parent db2a4a9cad
commit fbc4151874
6 changed files with 15 additions and 7 deletions

View File

@@ -366,6 +366,10 @@ body.trashing #publish-settings {
width: 46px;
}
.customize-control-date_time select {
vertical-align: top;
}
.date-time-fields .date-input.year {
width: 65px;
}

File diff suppressed because one or more lines are too long

View File

@@ -365,6 +365,10 @@ body.trashing #publish-settings {
width: 46px;
}
.customize-control-date_time select {
vertical-align: top;
}
.date-time-fields .date-input.year {
width: 65px;
}

File diff suppressed because one or more lines are too long

View File

@@ -154,7 +154,7 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
esc_html_e( 'Day' );
?>
</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() ); ?>
<?php ob_start(); ?>
@@ -164,7 +164,7 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
esc_html_e( 'Year' );
?>
</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() ); ?>
<?php printf( $date_format, $year_field, $month_field, $day_field ); ?>
@@ -182,7 +182,7 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
</label>
<# 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">
<?php
@@ -190,7 +190,7 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
esc_html_e( 'Minute' );
?>
</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">
<?php

View File

@@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.8-beta1-59941';
$wp_version = '6.8-beta1-59942';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.