mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-03-22 21:09:51 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

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

Browse Source 
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.



git-svn-id: https://develop.svn.wordpress.org/trunk@59942 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jb Audras 2025-03-05 23:25:14 +00:00
parent b6835c12ad
commit fdb29a45e0
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/wp-admin/css/customize-controls.css
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;
}

8
src/wp-includes/customize/class-wp-customize-date-time-control.php
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