WordPress.org
Get WordPress

Make WordPress Core

Ticket #33327: 33327.3.diff

File 33327.3.diff, 12.7 KB (added by afercia, 10 years ago)

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

     
    615615
    616616/* Style for custom settings */
    617617
    618 /*
     618/**
    619619 * Dropdowns
    620620 */
     621
    621622.accordion-section .dropdown {
    622623        float: left;
    623624        display: block;
    … …  
    698699 * iOS can't scroll iframes,
    699700 * instead it expands the iframe size to match the size of the content
    700701 */
     702
    701703.ios .wp-full-overlay {
    702704        position: relative;
    703705}
    … …  
    710712        -webkit-overflow-scrolling: touch;
    711713}
    712714
    713 /** Media controls **/
     715/* Media controls */
    714716
    715717.customize-control-media .current,
    716718.customize-control-upload .current,
    … …  
    995997/**
    996998 * Themes
    997999 */
     1000
    9981001@-webkit-keyframes customize-reload {
    9991002        0%   { opacity: 0; }
    10001003        100% { opacity: 1; }
    … …  
    12281231        margin: 25px 0 20px;
    12291232}
    12301233
     1234/**
     1235 * Widgets and Menus common styles
     1236 */
     1237
     1238/* higher specificity than .wp-core-ui .button-secondary */
     1239#customize-theme-controls .add-new-widget,
     1240#customize-theme-controls .add-new-menu-item {
     1241        cursor: pointer;
     1242        float: right;
     1243        margin-left: 10px;
     1244        -webkit-transition: all 0.2s;
     1245        transition: all 0.2s;
     1246        -webkit-user-select: none;
     1247        -moz-user-select: none;
     1248        -ms-user-select: none;
     1249        user-select: none;
     1250        outline: none;
     1251}
     1252
     1253.reordering .add-new-widget,
     1254.reordering .add-new-menu-item {
     1255        opacity: 0.2;
     1256        pointer-events: none;
     1257        cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
     1258}
     1259
     1260.add-new-widget:before,
     1261.add-new-menu-item:before {
     1262        content: "\f132";
     1263        display: inline-block;
     1264        position: relative;
     1265        left: -2px;
     1266        top: -1px;
     1267        font: normal 20px/1 dashicons;
     1268        vertical-align: middle;
     1269        -webkit-transition: all 0.2s;
     1270        transition: all 0.2s;
     1271        -webkit-font-smoothing: antialiased;
     1272        -moz-osx-font-smoothing: grayscale;
     1273}
     1274
     1275/* Reordering */
     1276.reorder-toggle {
     1277        float: right;
     1278        padding: 5px 8px;
     1279        text-decoration: none;
     1280        cursor: pointer;
     1281        outline: none;
     1282        -webkit-user-select: none;
     1283        -moz-user-select: none;
     1284        -ms-user-select: none;
     1285        user-select: none;
     1286}
     1287
     1288.reorder-toggle:focus {
     1289        outline: 1px dotted;
     1290}
     1291
     1292.reorder,
     1293.reordering .reorder-done {
     1294        display: block;
     1295        padding: 5px 8px;
     1296}
     1297
     1298.reorder-done,
     1299.reordering .reorder {
     1300        display: none;
     1301        color: #0073aa;
     1302}
     1303
     1304.reorder-toggle:hover .reorder-done,
     1305.reorder-toggle:active .reorder-done,
     1306.reorder-toggle:focus .reorder-done {
     1307        color: #00a0d2;
     1308}
     1309
    12311310/* Responsive */
    12321311.customize-controls-preview-toggle {
    12331312        display: none;

  • src/wp-admin/css/customize-nav-menus.css

     
    9090        box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    9191}
    9292
    93 /* Menu-item reordering nav. */
    94 .reordering .customize-control-nav_menu .reorder,
    95 .customize-control-nav_menu .reorder-done {
    96         display: none;
    97 }
     93/**
     94 * Menu items reordering styles
     95 */
    9896
    99 .customize-control-nav_menu .reorder,
    100 .reordering .customize-control-nav_menu .reorder-done {
    101         display: inline-block;
    102         padding: 5px 8px;
    103 }
    104 
    10597.menu-item-reorder-nav {
    10698        display: none;
    10799        background-color: #fff;
    … …  
    110102        right: 0;
    111103}
    112104
    113 #customize-theme-controls .reordering .add-new-menu-item {
    114         opacity: 0.2;
    115         pointer-events: none;
    116         cursor: not-allowed;
    117 }
    118 
    119105.menu-item-reorder-nav button {
    120106        position: relative;
    121107        overflow: hidden;
    … …  
    361347
    362348.wp-customizer button:focus .toggle-indicator:after {
    363349        -webkit-box-shadow:
    364         0 0 0 1px #5b9dd9,
     350                0 0 0 1px #5b9dd9,
    365351                0 0 2px 1px rgba(30, 140, 190, .8);
    366     box-shadow:
    367         0 0 0 1px #5b9dd9,
     352        box-shadow:
     353                0 0 0 1px #5b9dd9,
    368354                0 0 2px 1px rgba(30, 140, 190, .8);
    369355}
    370356
    … …  
    479465        margin-top: 0;
    480466}
    481467
    482 /*
    483  * Add-menu-items mode.
     468/**
     469 * Add-menu-items mode
    484470 */
     471
    485472.wp-full-overlay-main {
    486473        right: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */
    487474        width: 100%;
    … …  
    496483        opacity: 1;
    497484}
    498485
    499 /* Add-new button. */
    500 #customize-theme-controls .add-new-menu-item {
    501         cursor: pointer;
    502         float: right;
    503         margin-left: 10px;
    504         -webkit-transition: all 0.2s;
    505         transition: all 0.2s;
    506         -webkit-user-select: none;
    507         -moz-user-select: none;
    508         -ms-user-select: none;
    509         user-select: none;
    510         outline: none;
    511 }
    512 
    513 .add-new-menu-item:before {
    514         content: "\f132";
    515         display: inline-block;
    516         position: relative;
    517         left: -2px;
    518         top: -1px;
    519         font: normal 20px/1 dashicons;
    520         vertical-align: middle;
    521         -webkit-transition: all 0.2s;
    522         transition: all 0.2s;
    523         -webkit-font-smoothing: antialiased;
    524         -moz-osx-font-smoothing: grayscale;
    525 }
    526 
    527486.adding-menu-items .add-new-menu-item,
    528487.adding-menu-items .add-new-menu-item:hover,
    529488.add-menu-toggle.open,

  • src/wp-admin/css/customize-widgets.css

     
    117117}
    118118
    119119/**
    120 * Widget reordering styles
    121 **/
     120 * Widget reordering styles
     121 */
    122122
    123 .reorder-toggle {
    124         float: right;
    125         padding: 5px 8px;
    126         text-decoration: none;
    127         cursor: pointer;
    128         outline: none;
    129         -webkit-user-select: none;
    130         -moz-user-select: none;
    131         -ms-user-select: none;
    132         user-select: none;
    133 }
    134 .reorder-toggle:focus {
    135         outline: 1px dotted;
    136 }
    137 
    138 .reorder-done,
    139 .reordering .reorder {
    140         display: none;
    141 }
    142 
    143 .reordering .reorder-done {
    144         display: block;
    145         color: #0073aa;
    146 }
    147 
    148 .reordering .reorder-done:hover,
    149 .reordering .reorder-done:active {
    150         color: #00a0d2;
    151 }
    152 
    153 #customize-theme-controls .reordering .add-new-widget {
    154         opacity: 0.2;
    155         pointer-events: none;
    156         cursor: not-allowed;
    157 }
    158 
    159123#customize-theme-controls .widget-reorder-nav {
    160124        display: none;
    161125        float: right;
    … …  
    213177        cursor: default;
    214178}
    215179
    216 #customize-theme-controls  .move-widget-area {
     180#customize-theme-controls .move-widget-area {
    217181        display: none;
    218182        background: #fff;
    219183        border: 1px solid #dedede;
    … …  
    288252        display: block;
    289253}
    290254
    291 
    292255/**
    293256 * Styles for new widget addition panel
    294257 */
     258
    295259.wp-full-overlay-main {
    296260        right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
    297261        width: 100%;
    298262}
    299263
    300 #customize-theme-controls .add-new-widget {
    301         cursor: pointer;
    302         float: right;
    303         margin-left: 10px;
    304         -webkit-transition: all 0.2s;
    305         transition: all 0.2s;
    306         -webkit-user-select: none;
    307         -moz-user-select: none;
    308         -ms-user-select: none;
    309         user-select: none;
    310         outline: none;
    311 }
    312 
    313 .add-new-widget:before {
    314         content: "\f132";
    315         display: inline-block;
    316         position: relative;
    317         left: -2px;
    318         top: -1px;
    319         font: normal 20px/1 dashicons;
    320         vertical-align: middle;
    321         -webkit-transition: all 0.2s;
    322         transition: all 0.2s;
    323         -webkit-font-smoothing: antialiased;
    324         -moz-osx-font-smoothing: grayscale;
    325 }
    326 
    327264body.adding-widget .add-new-widget,
    328265body.adding-widget .add-new-widget:hover {
    329266        background: #eee;
    … …  
    456393 * Widget Icon styling
    457394 * No plurals in naming.
    458395 * Ordered from lowest to highest specificity.
    459  **/
     396 */
     397
    460398#available-widgets .widget-title {
    461399        position: relative;
    462400}

  • src/wp-admin/js/customize-widgets.js

     
    17891789                        /**
    17901790                         * Keyboard-accessible reordering
    17911791                         */
    1792                         this.container.find( '.reorder-toggle' ).on( 'click keydown', function( event ) {
    1793                                 if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
    1794                                         return;
    1795                                 }
    1796 
     1792                        this.container.find( '.reorder-toggle' ).on( 'click', function() {
    17971793                                self.toggleReordering( ! self.isReordering );
    17981794                        } );
    17991795                },
    … …  
    18041800                _setupAddition: function() {
    18051801                        var self = this;
    18061802
    1807                         this.container.find( '.add-new-widget' ).on( 'click keydown', function( event ) {
    1808                                 if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
    1809                                         return;
    1810                                 }
     1803                        this.container.find( '.add-new-widget' ).on( 'click', function() {
     1804                                var addNewWidgetBtn = $( this );
    18111805
    18121806                                if ( self.$sectionContent.hasClass( 'reordering' ) ) {
    18131807                                        return;
    … …  
    18141808                                }
    18151809
    18161810                                if ( ! $( 'body' ).hasClass( 'adding-widget' ) ) {
     1811                                        addNewWidgetBtn.attr( 'aria-expanded', 'true' );
    18171812                                        api.Widgets.availableWidgetsPanel.open( self );
    18181813                                } else {
     1814                                        addNewWidgetBtn.attr( 'aria-expanded', 'false' );
    18191815                                        api.Widgets.availableWidgetsPanel.close();
    18201816                                }
    18211817                        } );
    … …  
    18691865                 * @todo We should have a reordering state instead and rename this to onChangeReordering
    18701866                 */
    18711867                toggleReordering: function( showOrHide ) {
     1868                        var addNewWidgetBtn = this.$sectionContent.find( '.add-new-widget' ),
     1869                                reorderBtn = this.container.find( '.reorder-toggle' ),
     1870                                widgetsTitle = this.$sectionContent.find( '.widget-title' );
     1871
    18721872                        showOrHide = Boolean( showOrHide );
    18731873
    18741874                        if ( showOrHide === this.$sectionContent.hasClass( 'reordering' ) ) {
    … …  
    18831883                                        formControl.collapse();
    18841884                                } );
    18851885
    1886                                 this.$sectionContent.find( '.first-widget .move-widget' ).focus();
    1887                                 this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', -1 );
     1886                                addNewWidgetBtn.attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
     1887                                reorderBtn.attr( 'aria-label', l10n.reorderLabelOff );
     1888                                wp.a11y.speak( l10n.reorderModeOn );
     1889                                // Hide widget titles while reordering: title is already in the reorder controls.
     1890                                widgetsTitle.attr( 'aria-hidden', 'true' );
    18881891                        } else {
    1889                                 this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', 0 );
     1892                                addNewWidgetBtn.removeAttr( 'tabindex aria-hidden' );
     1893                                reorderBtn.attr( 'aria-label', l10n.reorderLabelOn );
     1894                                wp.a11y.speak( l10n.reorderModeOff );
     1895                                widgetsTitle.attr( 'aria-hidden', 'false' );
    18901896                        }
    18911897                },
    18921898

  • src/wp-includes/class-wp-customize-control.php

     
    344344         * @since 3.4.0
    345345         */
    346346        protected function render() {
    347                 $id    = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
     347                $id    = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
    348348                $class = 'customize-control customize-control-' . $this->type;
    349349
    350350                ?><li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
    … …  
    13051305                                        </span>
    13061306                                </label>
    13071307                                <div class="container">
    1308                                 </div>                         
     1308                                </div>
    13091309                        </div>
    13101310                        <div class="actions">
    13111311                                <?php if ( current_user_can( 'upload_files' ) ): ?>
    … …  
    14581458         * @access public
    14591459         */
    14601460        public function render_content() {
     1461                $id = 'reorder-widgets-desc-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
    14611462                ?>
    1462                 <span class="button-secondary add-new-widget" tabindex="0">
     1463                <button type="button" class="button-secondary add-new-widget" aria-expanded="false" aria-controls="available-widgets">
    14631464                        <?php _e( 'Add a Widget' ); ?>
    1464                 </span>
    1465 
    1466                 <span class="reorder-toggle" tabindex="0">
     1465                </button>
     1466                <button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
    14671467                        <span class="reorder"><?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?></span>
    14681468                        <span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering widgets in Customizer' ); ?></span>
    1469                 </span>
     1469                </button>
     1470                <p class="screen-reader-text" id="<?php echo esc_attr( $id ); ?>"><?php _e( 'When in reorder mode, additional controls to reorder widgets will be available in the widgets list above.' ); ?></p>
    14701471                <?php
    14711472        }
    14721473

  • src/wp-includes/class-wp-customize-widgets.php

     
    674674                                'widgetMovedUp'    => __( 'Widget moved up' ),
    675675                                'widgetMovedDown'  => __( 'Widget moved down' ),
    676676                                'noAreasRendered'  => __( 'There are no widget areas currently rendered in the preview. Navigate in the preview to a template that makes use of a widget area in order to access its widgets here.' ),
     677                                'reorderModeOn'    => __( 'Reorder mode enabled' ),
     678                                'reorderModeOff'   => __( 'Reorder mode closed' ),
     679                                'reorderLabelOn'   => esc_attr__( 'Reorder widgets' ),
     680                                'reorderLabelOff'  => esc_attr__( 'Close reorder mode' ),
    677681                        ),
    678682                        'tpl' => array(
    679683                                'widgetReorderNav' => $widget_reorder_nav_tpl,