WordPress.org

Make WordPress Core

Ticket #42022: 42022.diff

File 42022.diff, 19.5 KB (added by afercia, 19 months ago)
  • src/wp-admin/css/customize-controls.css

     
    148148}
    149149
    150150#customize-controls .date-input:invalid {
    151         border-color: red;
     151        border-color: #dc3232;
    152152}
    153153
    154 .date-time-fields .month-field {
    155         width: 79px;
    156 }
    157 
    158 .date-time-fields .day-field,
    159 .date-time-fields .hour-field,
    160 .date-time-fields .minute-field {
    161         width: 46px;
    162 }
    163 
    164 .date-time-fields .year-field {
    165         width: 60px;
    166 }
    167 
    168 .date-time-fields .am-pm-field {
    169         width: 53px;
    170 }
    171 
    172154#customize-control-changeset_status label {
    173155        padding-top: 10px;
    174156        padding-bottom: 10px;
     
    200182
    201183.customize-copy-preview-link:before,
    202184.customize-copy-preview-link:after {
    203         content: '';
     185        content: "";
    204186        height: 28px;
    205187        position: absolute;
    206188        background: #ffffff;
     
    225207        border-left: none;
    226208        border-right: none;
    227209        text-indent: -999px;
    228         color: white;
     210        color: #fff;
    229211}
    230212
    231213#customize-control-changeset_preview_link label {
     
    268250        padding-bottom:10px;
    269251}
    270252
    271 .date-time-fields label,
     253.date-time-fields .date-input,
    272254.date-time-fields .date-time-separator {
    273255        float: left;
    274         margin-right:5px;
     256        margin-right: 5px !important;
    275257}
    276258
     259.date-time-fields .date-input.month {
     260        width: 79px;
     261        margin: 0;
     262}
     263
     264.date-time-fields .date-input.day,
     265.date-time-fields .date-input.hour,
     266.date-time-fields .date-input.minute {
     267        width: 46px;
     268}
     269
     270.date-time-fields .date-input.year {
     271        width: 60px;
     272}
     273
     274.date-time-fields .date-input.am-pm {
     275        width: 53px;
     276        margin: 0;
     277}
     278
    277279.date-time-fields .date-time-separator {
    278280        line-height: 2;
    279281}
    280282
    281283.date-time-fields .time-row {
    282         padding-top: 12px;
     284        margin-top: 12px;
    283285}
    284286
    285287.date-time-fields .date-timezone {
     
    10221024}
    10231025
    10241026.customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
    1025         border: 1px solid #f00;
     1027        border: 1px solid #dc3232;
    10261028}
    10271029
    10281030.customize-control-dropdown-pages .add-new-toggle {
     
    11481150        margin-bottom: 0;
    11491151}
    11501152#customize-control-show_on_front.has-error .customize-control-notifications-container {
    1151         margin-top:12px;
     1153        margin-top: 12px;
    11521154}
    11531155
    11541156/**
     
    13331335        content: '';
    13341336        position: absolute;
    13351337        height: auto;
    1336         top: 0; left: 0; bottom: 0; right: 0;
     1338        top: 0;
     1339        left: 0;
     1340        bottom: 0;
     1341        right: 0;
    13371342        border: 4px solid #00a0d2;
    13381343        border-radius: 2px;
    13391344}
     
    21642169                height: 39px;
    21652170        }
    21662171
    2167         .date-time-fields .month-field {
     2172        .date-time-fields .date-input.month {
    21682173                width: 79px;
    21692174        }
    21702175
    2171         .date-time-fields .day-field,
    2172         .date-time-fields .hour-field,
    2173         .date-time-fields .minute-field {
     2176        .date-time-fields .date-input.day,
     2177        .date-time-fields .date-input.hour,
     2178        .date-time-fields .date-input.minute {
    21742179                width: 55px;
    21752180        }
    21762181
    2177         .date-time-fields .year-field {
     2182        .date-time-fields .date-input.year {
    21782183                width: 80px;
    21792184        }
    21802185
     2186        .date-time-fields .date-time-separator,
    21812187        .date-time-fields .date-timezone {
    21822188                line-height: 3.2;
    21832189        }
     2190
    21842191        .wp-core-ui.wp-customizer .button {
    21852192                margin-top: 12px;
    21862193        }
  • src/wp-admin/css/customize-nav-menus.css

     
    132132
    133133.customize-control input.menu-name-field {
    134134        width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
    135         margin: 12px 0;
    136135}
    137136
    138137.wp-customizer .menu-item .item-edit {
  • src/wp-admin/js/customize-controls.js

     
    57015701                                                } );
    57025702                                        } );
    57035703
    5704                                         /**
    5705                                          * Find all invalid setting less controls with notification type error.
    5706                                          */
     5704                                        // Find all invalid setting less controls with notification type error.
    57075705                                        api.control.each( function( control ) {
    57085706                                                if ( ! control.setting || ! control.setting.id && control.active.get() ) {
    57095707                                                        control.notifications.each( function( notification ) {
     
    62236221                                history.replaceState( {}, document.title, urlParser.href );
    62246222                        };
    62256223
    6226                         /**
    6227                          * Deactivate themes section if changeset status is not auto-draft
    6228                          */
     6224                        // Deactivate themes section if changeset status is not auto-draft.
    62296225                        api.section( 'themes', function( section ) {
    62306226                                var canActivate;
    62316227
     
    70367032                        });
    70377033                })();
    70387034
    7039                 /**
    7040                  * Publish settings section and controls.
    7041                  */
     7035                // Publish settings section and controls.
    70427036                api.control( 'changeset_status', 'changeset_scheduled_date', function( statusControl, dateControl ) {
    70437037                        $.when( statusControl.deferred.embedded, dateControl.deferred.embedded ).done( function() {
    70447038                                var radioNodes, statusElement, toggleDateControl, publishWhenTime, pollInterval, updateTimeArrivedPoller, timeArrivedPollingInterval = 1000;
  • src/wp-includes/class-wp-customize-manager.php

     
    35543554                        </ul>
    35553555                </script>
    35563556                <script type="text/html" id="tmpl-customize-preview-link-control" >
    3557                         <span class="customize-control-title">
    3558                                 <label><?php esc_html_e( 'Share Preview Link' ); ?></label>
    3559                         </span>
    3560                         <span class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></span>
     3557                        <p class="customize-control-title">
     3558                                <?php esc_html_e( 'Share Preview Link' ); ?>
     3559                        </p>
     3560                        <p class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></p>
    35613561                        <div class="customize-control-notifications-container"></div>
    35623562                        <div class="preview-link-wrapper">
    3563                                 <label>
    3564                                         <span class="screen-reader-text"><?php esc_html_e( 'Preview Link' ); ?></span>
    3565                                         <a class="preview-control-element" data-component="link" href="" target=""></a>
    3566                                         <input readonly class="preview-control-element" data-component="input" value="test" >
    3567                                         <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
    3568                                 </label>
     3563                                <label for="customize-preview-link-input" class="screen-reader-text"><?php esc_html_e( 'Preview Link' ); ?></label>
     3564                                <a class="preview-control-element" data-component="link" href="" target=""></a>
     3565                                <input id="customize-preview-link-input" readonly class="preview-control-element" data-component="input" value="test">
     3566                                <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
    35693567                        </div>
    35703568                </script>
    35713569                <?php
     
    41474145                } else {
    41484146                        $initial_date = current_time( 'mysql', false );
    41494147                }
     4148
    41504149                $this->add_control( new WP_Customize_Date_Time_Control( $this, 'changeset_scheduled_date', array(
    41514150                        'section' => 'publish_settings',
    41524151                        'settings' => array(),
  • src/wp-includes/class-wp-customize-nav-menus.php

     
    674674                ) ) );
    675675
    676676                $this->manager->add_control( 'new_menu_name', array(
    677                         'label'       => '',
     677                        'label'       => __( 'New menu name' ),
    678678                        'section'     => 'add_menu',
    679679                        'type'        => 'text',
    680680                        'settings'    => array(),
    681681                        'input_attrs' => array(
    682682                                'class'       => 'menu-name-field',
    683                                 'placeholder' => __( 'New menu name' ),
    684683                        ),
    685684                ) );
    686685
     
    10171016                                        <?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
    10181017                                        <?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
    10191018                                                <div class="new-content-item">
    1020                                                         <input type="text" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
     1019                                                        <label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="screen-reader-text"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
     1020                                                        <input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
    10211021                                                        <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
    10221022                                                </div>
    10231023                                        <?php endif; ?>
  • src/wp-includes/customize/class-wp-customize-date-time-control.php

     
    102102
    103103                <# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
    104104
    105                 <span class="customize-control-title">
    106                         <label>{{ data.label }}</label>
    107                 </span>
    108105                <div class="customize-control-notifications-container"></div>
    109106                <span class="description customize-control-description">{{ data.description }}</span>
    110107                <div class="date-time-fields">
    111                         <div class="day-row">
    112                                 <span class="title-day"><?php esc_html_e( 'Day' ); ?></span>
     108                        <fieldset class="day-row">
     109                                <legend class="title-day"><?php esc_html_e( 'Date' ); ?></legend>
    113110                                <div class="day-fields clear">
    114                                         <label class="month-field">
    115                                                 <span class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></span>
    116                                                         <select class="date-input month" data-component="month">
    117                                                                 <# _.each( data.month_choices, function( choice ) {
    118                                                                         if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
    119                                                                                 text = choice.text;
    120                                                                                 value = choice.value;
    121                                                                         }
    122                                                                         #>
    123                                                                         <option value="{{ value }}" >
    124                                                                                 {{ text }}
    125                                                                         </option>
    126                                                                 <# } ); #>
    127                                                         </select>
    128                                         </label>
    129                                         <label class="day-field">
    130                                                 <span class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></span>
    131                                                 <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
    132                                         </label>
     111                                        <label for="date-time-month" class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></label>
     112                                        <select id="date-time-month" class="date-input month" data-component="month">
     113                                                <# _.each( data.month_choices, function( choice ) {
     114                                                        if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
     115                                                                text = choice.text;
     116                                                                value = choice.value;
     117                                                        }
     118                                                        #>
     119                                                        <option value="{{ value }}" >
     120                                                                {{ text }}
     121                                                        </option>
     122                                                <# } ); #>
     123                                        </select>
     124                                        <label for="date-time-day" class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></label>
     125                                        <input id="date-time-day" type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
    133126                                        <span class="time-special-char date-time-separator">,</span>
    134                                         <label class="year-field">
    135                                                 <span class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></span>
    136                                                 <# var maxYearLength = String( data.maxYear ).length; #>
    137                                                 <input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
    138                                         </label>
     127                                        <label for="date-time-year" class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></label>
     128                                        <# var maxYearLength = String( data.maxYear ).length; #>
     129                                        <input id="date-time-year" type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
    139130                                </div>
    140                         </div>
    141                         <div class="time-row clear">
    142                                 <span class="title-time"><?php esc_html_e( 'Time' ); ?></span>
     131                        </fieldset>
     132                        <fieldset class="time-row clear">
     133                                <legend class="title-time"><?php esc_html_e( 'Time' ); ?></legend>
    143134                                <div class="time-fields clear">
    144                                         <label class="hour-field">
    145                                                 <span class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></span>
    146                                                 <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
    147                                                 <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
    148                                         </label>
     135                                        <label for="date-time-hour" class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></label>
     136                                        <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
     137                                        <input id="date-time-hour" type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}" />
    149138                                        <span class="time-special-char date-time-separator">:</span>
    150                                         <label class="minute-field">
    151                                                 <span class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></span>
    152                                                 <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
    153                                         </label>
     139                                        <label for="date-time-minute" class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></label>
     140                                        <input id="date-time-minute" type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
    154141                                        <# if ( data.twelveHourFormat ) { #>
    155                                         <label class="am-pm-field">
    156                                                 <span class="screen-reader-text"><?php esc_html_e( 'AM / PM' ); ?></span>
    157                                                 <select class="date-input" data-component="ampm">
    158                                                         <option value="am"><?php esc_html_e( 'AM' ); ?></option>
    159                                                         <option value="pm"><?php esc_html_e( 'PM' ); ?></option>
    160                                                 </select>
    161                                         </label>
     142                                        <label for="date-time-ampm" class="screen-reader-text"><?php esc_html_e( 'AM / PM' ); ?></label>
     143                                        <select id="date-time-ampm" class="date-input am-pm" data-component="ampm">
     144                                                <option value="am"><?php esc_html_e( 'AM' ); ?></option>
     145                                                <option value="pm"><?php esc_html_e( 'PM' ); ?></option>
     146                                        </select>
    162147                                        <# } #>
    163148                                        <abbr class="date-timezone" aria-label="<?php esc_attr_e( 'Timezone' ); ?>" title="<?php echo esc_attr( $timezone_info['description'] ); ?>"><?php echo esc_html( $timezone_info['abbr'] ); ?></abbr>
    164149                                </div>
    165                         </div>
     150                        </fieldset>
    166151                </div>
    167152                <?php
    168153        }
  • tests/qunit/index.html

     
    882882                <div class="customize-control-notifications-container"></div>
    883883                <span class="description customize-control-description">{{ data.description }}</span>
    884884                <div class="date-time-fields">
    885                         <div class="day-row">
    886                                 <span class="title-day">Day</span>
     885                        <fieldset class="day-row">
     886                                <legend class="title-day">Date</legend>
    887887                                <div class="day-fields clear">
    888                                         <label class="month-field">
    889                                                 <span class="screen-reader-text">Month</span>
    890                                                 <select class="date-input month" data-component="month">
    891                                                         <# _.each( data.month_choices, function( choice ) {
    892                                                                         if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
    893                                                                         text = choice.text;
    894                                                                         value = choice.value;
    895                                                                         }
    896                                                                         #>
    897                                                                 <option value="{{ value }}" >
    898                                                                         {{ text }}
    899                                                                 </option>
    900                                                                 <# } ); #>
    901                                                 </select>
     888                                        <label for="date-time-month" class="screen-reader-text">Month</label>
     889                                        <select id="date-time-month" class="date-input month" data-component="month">
     890                                                <# _.each( data.month_choices, function( choice ) {
     891                                                                if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
     892                                                                text = choice.text;
     893                                                                value = choice.value;
     894                                                                }
     895                                                                #>
     896                                                        <option value="{{ value }}" >
     897                                                                {{ text }}
     898                                                        </option>
     899                                                        <# } ); #>
     900                                        </select>
    902901                                        </label>
    903                                         <label class="day-field">
    904                                                 <span class="screen-reader-text">Day</span>
    905                                                 <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
    906                                         </label>
     902                                        <label for="date-time-day" class="screen-reader-text">Day</label>
     903                                        <input id="date-time-day" type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31">
    907904                                        <span class="time-special-char date-time-separator">,</span>
    908                                         <label class="year-field">
    909                                                 <span class="screen-reader-text">Year</span>
    910                                                 <# var maxYearLength = String( data.maxYear ).length; #>
    911                                                         <input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
    912                                         </label>
     905                                        <label for="date-time-year" class="screen-reader-text">Year</label>
     906                                        <# var maxYearLength = String( data.maxYear ).length; #>
     907                                        <input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
    913908                                </div>
    914                         </div>
    915                         <div class="time-row clear">
    916                                 <span class="title-time">Time</span>
     909                        </fieldset>
     910                        <fieldset class="time-row clear">
     911                                <legend class="title-time">Time</legend>
    917912                                <div class="time-fields clear">
    918                                         <label class="hour-field">
    919                                                 <span class="screen-reader-text">Hour</span>
    920                                                 <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
    921                                                         <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
    922                                         </label>
     913                                        <label for="date-time-hour" class="screen-reader-text">Hour</label>
     914                                        <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
     915                                        <input id="date-time-hour" type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="12">
    923916                                        <span class="time-special-char date-time-separator">:</span>
    924                                         <label class="minute-field">
    925                                                 <span class="screen-reader-text">Minute</span>
    926                                                 <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
    927                                         </label>
     917                                        <label for="date-time-minute" class="screen-reader-text">Minute</label>
     918                                        <input id="date-time-minute" type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
    928919                                        <# if ( data.twelveHourFormat ) { #>
    929                                                 <label class="am-pm-field">
    930                                                         <span class="screen-reader-text">AM / PM</span>
    931                                                         <select class="date-input" data-component="ampm">
    932                                                                 <option value="am">AM</option>
    933                                                                 <option value="pm">PM</option>
    934                                                         </select>
    935                                                 </label>
    936                                                 <# } #>
     920                                        <label for="date-time-ampm" class="screen-reader-text">AM / PM</label>
     921                                        <select id="date-time-ampm" class="date-input am-pm" data-component="ampm">
     922                                                <option value="am">AM</option>
     923                                                <option value="pm">PM</option>
     924                                        </select>
     925                                        <# } #>
    937926                                        <abbr class="date-timezone" aria-label="Timezone" title="Timezone is Asia/Kolkata (IST), currently UTC+5:30.">IST</abbr>
    938927                                </div>
    939928                        </div>