WordPress.org

Make WordPress Core

Ticket #23449: 23449.2.diff

File 23449.2.diff, 18.5 KB (added by aaroncampbell, 17 months ago)
  • wp-admin/customize.php

     
    3636wp_enqueue_script( 'customize-controls' ); 
    3737wp_enqueue_style( 'customize-controls' ); 
    3838 
     39wp_enqueue_script( 'accordion' ); 
     40 
    3941do_action( 'customize_controls_enqueue_scripts' ); 
    4042 
    4143// Let's roll. 
     
    8991                ?> 
    9092 
    9193                <div class="wp-full-overlay-sidebar-content" tabindex="-1"> 
    92                         <div id="customize-info" class="customize-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>"> 
    93                                 <div class="customize-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0"> 
     94                        <div id="customize-info" class="accordion-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>"> 
     95                                <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0"> 
    9496                                        <span class="preview-notice"><?php 
    9597                                                /* translators: %s is the theme name in the Customize/Live Preview pane */ 
    9698                                                echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' ); 
    9799                                        ?></span> 
    98100                                </div> 
    99101                                <?php if ( ! $cannot_expand ) : ?> 
    100                                 <div class="customize-section-content"> 
     102                                <div class="accordion-section-content"> 
    101103                                        <?php if ( $screenshot ) : ?> 
    102104                                                <img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" /> 
    103105                                        <?php endif; ?> 
     
    109111                                <?php endif; ?> 
    110112                        </div> 
    111113 
    112                         <div id="customize-theme-controls"><ul> 
     114                        <div id="customize-theme-controls" class="accordion-container"><ul> 
    113115                                <?php 
    114116                                foreach ( $wp_customize->sections() as $section ) 
    115117                                        $section->maybe_render(); 
  • wp-admin/css/wp-admin.css

     
    82778277        -ms-touch-action: none; 
    82788278} 
    82798279 
     8280/* Accordion */ 
     8281 
     8282.accordion-section { 
     8283        border-top: 1px solid #fff; 
     8284        border-bottom: 1px solid #dfdfdf; 
     8285        margin: 0; 
     8286} 
     8287 
     8288.accordion-section:last-child { 
     8289        box-shadow: 0 1px 0 0px #fff; 
     8290} 
     8291 
     8292.accordion-section.open .accordion-section-content { 
     8293        display: block; 
     8294        background: #fdfdfd; 
     8295} 
     8296 
     8297.accordion-section.open:hover { 
     8298        border-bottom-color: #dfdfdf; 
     8299} 
     8300 
     8301.accordion-section-content { 
     8302        display: none; 
     8303        padding: 10px 20px 15px; 
     8304        overflow: hidden; 
     8305} 
     8306 
     8307.accordion-section-title { 
     8308        margin: 0; 
     8309        padding: 15px 20px; 
     8310        position: relative; 
     8311 
     8312        cursor: pointer; 
     8313 
     8314        -webkit-user-select: none; 
     8315        -moz-user-select: none; 
     8316        user-select: none; 
     8317} 
     8318 
     8319.accordion-section-title:after { 
     8320        content: ''; 
     8321        width: 0; 
     8322        height: 0; 
     8323        border-color: #ccc transparent; 
     8324        border-style: solid; 
     8325        border-width: 6px 6px 0; 
     8326        position: absolute; 
     8327        top: 25px; 
     8328        right: 20px; 
     8329        z-index: 1; 
     8330} 
     8331 
     8332.accordion-section-title:focus { 
     8333        outline: none; 
     8334} 
     8335 
     8336.accordion-section-title:hover:after, 
     8337.accordion-section-title:focus:after { 
     8338        border-color: #aaa transparent; 
     8339} 
     8340 
     8341.cannot-expand .accordion-section-title { 
     8342        cursor: auto; 
     8343} 
     8344 
     8345.cannot-expand .accordion-section-title:after { 
     8346        display: none; 
     8347} 
     8348 
     8349.control-section .accordion-section-title { 
     8350        padding: 10px 20px; 
     8351        font-size: 15px; 
     8352        font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; 
     8353        font-weight: normal; 
     8354        text-shadow: 0 1px 0 #fff; 
     8355        background: #f5f5f5; 
     8356        background-image: -webkit-gradient(linear, left bottom, left top, from(#eee), to(#f5f5f5)); 
     8357        background-image: -webkit-linear-gradient(bottom, #eee, #f5f5f5); 
     8358        background-image:    -moz-linear-gradient(bottom, #eee, #f5f5f5); 
     8359        background-image:      -o-linear-gradient(bottom, #eee, #f5f5f5); 
     8360        background-image: linear-gradient(to top, #eee, #f5f5f5); 
     8361} 
     8362 
     8363.control-section .accordion-section-title:after { 
     8364        top: 15px; 
     8365} 
     8366 
     8367.control-section .accordion-section-title:hover:after, 
     8368.control-section .accordion-section-title:focus:after { 
     8369        border-color: #eee transparent; 
     8370} 
     8371 
     8372.control-section:hover .accordion-section-title, 
     8373.control-section .accordion-section-title:hover, 
     8374.control-section.open .accordion-section-title, 
     8375.control-section .accordion-section-title:focus { 
     8376        color: #fff; 
     8377        text-shadow: 0 -1px 0 #333; 
     8378        background: #808080; 
     8379        background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080)); 
     8380        background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080); 
     8381        background-image:    -moz-linear-gradient(bottom, #6d6d6d, #808080); 
     8382        background-image:      -o-linear-gradient(bottom, #6d6d6d, #808080); 
     8383        background-image: linear-gradient(to top, #6d6d6d, #808080); 
     8384} 
     8385 
     8386.control-section.accordion-section:hover, 
     8387.control-section.accordion-section.open { 
     8388        border-top-color: #808080; 
     8389} 
     8390 
     8391.control-section.open .accordion-section-title { 
     8392        border-bottom: 1px solid #6d6d6d; 
     8393} 
     8394 
    82808395/* =Media Queries 
    82818396-------------------------------------------------------------- */ 
    82828397 
  • wp-admin/css/customize-controls.css

     
    66        text-decoration: none; 
    77} 
    88 
    9 .customize-section { 
    10         border-top: 1px solid #fff; 
    11         border-bottom: 1px solid #dfdfdf; 
    12         margin: 0; 
    13 } 
    14  
    15 .control-section.customize-section:hover, 
    16 .control-section.customize-section.open { 
    17         border-top-color: #808080; 
    18 } 
    19  
    20 .control-section.customize-section:hover { 
    21         border-bottom-color: #6d6d6d; 
    22 } 
    23  
    24 .customize-section.open:hover { 
    25         border-bottom-color: #dfdfdf; 
    26 } 
    27  
    28 .customize-section:last-child { 
    29         box-shadow: 0 1px 0 0px #fff; 
    30 } 
    31  
    32 .customize-section-title { 
    33         margin: 0; 
    34         padding: 15px 20px; 
    35         position: relative; 
    36  
    37         cursor: pointer; 
    38  
    39         -webkit-user-select: none; 
    40         -moz-user-select: none; 
    41         user-select: none; 
    42 } 
    43  
    44 .customize-section-title:focus { 
    45         outline: none; 
    46 } 
    47  
    48 .cannot-expand .customize-section-title { 
    49         cursor: auto; 
    50 } 
    51  
    52 .customize-section-content { 
    53         display: none; 
    54         padding: 10px 20px 15px; 
    55         overflow: hidden; 
    56 } 
    57  
    58 .control-section .customize-section-title { 
    59         padding: 10px 20px; 
    60         font-size: 15px; 
    61         font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; 
    62         font-weight: normal; 
    63         text-shadow: 0 1px 0 #fff; 
    64         background: #f5f5f5; 
    65         background-image: -webkit-gradient(linear, left bottom, left top, from(#eee), to(#f5f5f5)); 
    66         background-image: -webkit-linear-gradient(bottom, #eee, #f5f5f5); 
    67         background-image:    -moz-linear-gradient(bottom, #eee, #f5f5f5); 
    68         background-image:      -o-linear-gradient(bottom, #eee, #f5f5f5); 
    69         background-image: linear-gradient(to top, #eee, #f5f5f5); 
    70 } 
    71  
    72 .control-section:hover .customize-section-title, 
    73 .control-section .customize-section-title:hover, 
    74 .control-section.open .customize-section-title, 
    75 .control-section .customize-section-title:focus { 
    76         color: #fff; 
    77         text-shadow: 0 -1px 0 #333; 
    78         background: #808080; 
    79         background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080)); 
    80         background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080); 
    81         background-image:    -moz-linear-gradient(bottom, #6d6d6d, #808080); 
    82         background-image:      -o-linear-gradient(bottom, #6d6d6d, #808080); 
    83         background-image: linear-gradient(to top, #6d6d6d, #808080); 
    84 } 
    85  
    86 .control-section.open .customize-section-title { 
    87         border-bottom: 1px solid #6d6d6d; 
    88 } 
    89  
    90 .customize-section.open .customize-section-content { 
    91         display: block; 
    92         background: #fdfdfd; 
    93 } 
    94  
    95 .customize-section-title:after { 
    96         content: ''; 
    97         width: 0; 
    98         height: 0; 
    99         border-color: #ccc transparent; 
    100         border-style: solid; 
    101         border-width: 6px 6px 0; 
    102         position: absolute; 
    103         top: 25px; 
    104         right: 20px; 
    105         z-index: 1; 
    106 } 
    107  
    108 .cannot-expand .customize-section-title:after { 
    109         display: none; 
    110 } 
    111  
    112 .customize-section-title:hover:after, 
    113 .customize-section-title:focus:after { 
    114         border-color: #aaa transparent; 
    115 } 
    116  
    117 .control-section .customize-section-title:hover:after, 
    118 .control-section .customize-section-title:focus:after { 
    119         border-color: #eee transparent; 
    120 } 
    121  
    122 .control-section .customize-section-title:after { 
    123         top: 15px; 
    124 } 
    125  
    126 #customize-info .customize-section-content { 
     9#customize-info .accordion-section-content { 
    12710        background: transparent; 
    12811} 
    12912 
     
    15841} 
    15942 
    16043#customize-theme-controls > ul, 
    161 #customize-theme-controls .customize-section-content { 
     44#customize-theme-controls .accordion-section-content { 
    16245        margin: 0; 
    16346} 
    16447 
     
    245128/* 
    246129 * Dropdowns 
    247130 */ 
    248 .customize-section .dropdown { 
     131.accordion-section .dropdown { 
    249132        float: left; 
    250133        display: block; 
    251134        position: relative; 
     
    255138        border-radius: 3px; 
    256139} 
    257140 
    258 .customize-section .dropdown-content { 
     141.accordion-section .dropdown-content { 
    259142        overflow: hidden; 
    260143        float: left; 
    261144        min-width: 30px; 
     
    301184        z-index: 1; 
    302185} 
    303186 
    304 .customize-section .dropdown:hover .dropdown-content, 
     187.accordion-section .dropdown:hover .dropdown-content, 
    305188.customize-control .dropdown:hover .dropdown-arrow { 
    306189        border-color: #aaa; 
    307190} 
    308191 
    309 .customize-section .dropdown:hover .dropdown-arrow:after { 
     192.accordion-section .dropdown:hover .dropdown-arrow:after { 
    310193        border-color: #aaa transparent; 
    311194} 
    312195 
     
    341224        border-color: rgba( 0, 0, 0, 0.25 ); 
    342225} 
    343226 
    344 .customize-section input[type="text"].color-picker-hex { 
     227.accordion-section input[type="text"].color-picker-hex { 
    345228        width: 65px; 
    346229        font-family: monospace; 
    347230        text-align: center; 
     
    349232} 
    350233 
    351234/* The centered cursor overlaps the placeholder in webkit. Hide it when selected. */ 
    352 .customize-section input[type="text"].color-picker-hex:focus::-webkit-input-placeholder { 
     235.accordion-section input[type="text"].color-picker-hex:focus::-webkit-input-placeholder { 
    353236        color: transparent; 
    354237} 
    355 .customize-section input[type="text"].color-picker-hex:-moz-placeholder { 
     238.accordion-section input[type="text"].color-picker-hex:-moz-placeholder { 
    356239        color: #999; 
    357240} 
    358241 
     
    371254        display: block; 
    372255} 
    373256 
    374 .customize-section .customize-control-image .dropdown-content { 
     257.accordion-section .customize-control-image .dropdown-content { 
    375258        height: auto; 
    376259        min-height: 24px; 
    377260        min-width: 40px; 
    378261        padding: 0; 
    379262} 
    380263 
    381 .customize-section .customize-control-image .dropdown-status { 
     264.accordion-section .customize-control-image .dropdown-status { 
    382265        padding: 4px 5px; 
    383266} 
    384267 
    385 .customize-section .customize-control-image .preview-thumbnail img { 
     268.accordion-section .customize-control-image .preview-thumbnail img { 
    386269        display: block; 
    387270        width: 100%; 
    388271        max-width: 122px; 
     
    390273        margin: 0 auto; 
    391274} 
    392275 
    393 .customize-section .customize-control-image .actions { 
     276.accordion-section .customize-control-image .actions { 
    394277        text-align: right; 
    395278} 
    396279 
    397 .customize-section .customize-control-image .library ul { 
     280.accordion-section .customize-control-image .library ul { 
    398281        border-bottom: 1px solid #dfdfdf; 
    399282        float: left; 
    400283        width: 100%; 
    401284        margin: 10px 0 0; 
    402285} 
    403286 
    404 .customize-section .customize-control-image .library li { 
     287.accordion-section .customize-control-image .library li { 
    405288        color: #999; 
    406289        float: left; 
    407290        padding: 3px 5px; 
     
    411294        border-width: 1px 1px 0 1px; 
    412295} 
    413296 
    414 .customize-section .customize-control-image .library li.library-selected { 
     297.accordion-section .customize-control-image .library li.library-selected { 
    415298        margin-bottom: -1px; 
    416299        padding-bottom: 4px; 
    417300 
     
    422305        border-radius: 3px 3px 0 0 ; 
    423306} 
    424307 
    425 .customize-section .customize-control-image .library-content { 
     308.accordion-section .customize-control-image .library-content { 
    426309        display: none; 
    427310        width: 100%; 
    428311        float: left; 
    429312        padding: 10px 0; 
    430313} 
    431314 
    432 .customize-section .customize-control-image .library-content.library-selected { 
     315.accordion-section .customize-control-image .library-content.library-selected { 
    433316        display: block; 
    434317} 
    435318 
    436 .customize-section .customize-control-image .library .thumbnail { 
     319.accordion-section .customize-control-image .library .thumbnail { 
    437320        display: block; 
    438321        width: 100%; 
    439322} 
    440323 
    441 .customize-section .customize-control-image .library .thumbnail:hover img { 
     324.accordion-section .customize-control-image .library .thumbnail:hover img { 
    442325        border-color: #21759b; 
    443326} 
    444327 
    445 .customize-section .customize-control-image .library .thumbnail img { 
     328.accordion-section .customize-control-image .library .thumbnail img { 
    446329        display: block; 
    447330        max-width: 90%; 
    448331        max-height: 80px; 
     
    453336        border: 1px solid #dfdfdf; 
    454337} 
    455338 
    456 .customize-section .customize-control-upload .upload-fallback, 
    457 .customize-section .customize-control-image .upload-fallback { 
     339.accordion-section .customize-control-upload .upload-fallback, 
     340.accordion-section .customize-control-image .upload-fallback { 
    458341        display: none; 
    459342} 
    460343 
    461 .customize-section .customize-control-upload .upload-dropzone, 
    462 .customize-section .customize-control-image .upload-dropzone { 
     344.accordion-section .customize-control-upload .upload-dropzone, 
     345.accordion-section .customize-control-image .upload-dropzone { 
    463346        display: none; 
    464347        padding: 15px 10px; 
    465348        border: 3px dashed #dfdfdf; 
     
    470353        cursor: default; 
    471354} 
    472355 
    473 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop, 
    474 .customize-section .customize-control-image .upload-dropzone.supports-drag-drop { 
     356.accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop, 
     357.accordion-section .customize-control-image .upload-dropzone.supports-drag-drop { 
    475358        display: block; 
    476359        -webkit-transition: border-color 0.1s; 
    477360        -moz-transition:    border-color 0.1s; 
     
    480363        transition:         border-color 0.1s; 
    481364} 
    482365 
    483 .customize-section .customize-control-upload .library ul li, 
    484 .customize-section .customize-control-image .library ul li { 
     366.accordion-section .customize-control-upload .library ul li, 
     367.accordion-section .customize-control-image .library ul li { 
    485368        cursor: pointer; 
    486369} 
    487370 
    488 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over, 
    489 .customize-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over { 
     371.accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over, 
     372.accordion-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over { 
    490373        border-color: #83b4d8; 
    491374} 
    492375 
  • wp-admin/css/wp-admin-rtl.css

     
    25342534        direction: ltr; 
    25352535} 
    25362536 
     2537.control-section .accordion-section-title { 
     2538        font-family: Tahoma, Arial, sans-serif; 
     2539} 
     2540 
     2541.accordion-section-title:after { 
     2542        right: auto; 
     2543        left: 20px; 
     2544} 
     2545 
    25372546/** 
    25382547 * HiDPI Displays 
    25392548 */ 
  • wp-admin/css/customize-controls-rtl.css

     
    1 .control-section .customize-section-title { 
    2         font-family: Tahoma, Arial, sans-serif; 
    3 } 
    4 .customize-section-title:after { 
    5         right: auto; 
    6         left: 20px; 
    7 } 
    8  
    91#customize-header-actions .button-primary { 
    102        float: left; 
    113} 
  • wp-admin/js/accordion.js

     
     1jQuery(document).ready( function($) { 
     2        // Expand/Collapse 
     3        $('.accordion-section-title').on('click keydown', function( event ) { 
     4 
     5                if ( event.type === 'keydown' &&  13 !== event.which ) // enter 
     6                                return; 
     7 
     8                var clicked = $( this ).closest( '.accordion-section' ); 
     9 
     10                if ( clicked.hasClass('cannot-expand') ) 
     11                        return; 
     12 
     13                clicked.closest( '.accordion-container' ).find( '.accordion-section' ).not( clicked ).removeClass( 'open' ); 
     14                clicked.toggleClass( 'open' ); 
     15                event.preventDefault(); 
     16        }); 
     17}); 
     18 No newline at end of file 
  • wp-admin/js/customize-controls.js

     
    846846                        api.state = state; 
    847847                }()); 
    848848 
    849                 // Temporary accordion code. 
    850                 $('.customize-section-title').bind('click keydown', function( event ) { 
    851  
    852                         if ( event.type === 'keydown' &&  13 !== event.which ) // enter 
    853                                         return; 
    854  
    855                         var clicked = $( this ).parents( '.customize-section' ); 
    856  
    857                         if ( clicked.hasClass('cannot-expand') ) 
    858                                 return; 
    859  
    860                         // Scroll up if on #customize-section-title_tagline 
    861                         if ('customize-section-title_tagline' === clicked.attr('id')) 
    862                                 $('.wp-full-overlay-sidebar-content').scrollTop(0); 
    863  
    864                         $( '.customize-section' ).not( clicked ).removeClass( 'open' ); 
    865                         clicked.toggleClass( 'open' ); 
    866                         event.preventDefault(); 
    867                 }); 
    868  
    869849                // Button bindings. 
    870850                $('#save').click( function( event ) { 
    871851                        previewer.save(); 
  • wp-includes/script-loader.php

     
    107107        ) ); 
    108108 
    109109        $scripts->add( 'autosave', "/wp-includes/js/autosave$suffix.js", array('schedule', 'wp-ajax-response'), false, 1 ); 
    110          
     110 
    111111        $scripts->add( 'heartbeat', "/wp-includes/js/heartbeat$suffix.js", array('jquery'), false, 1 ); 
    112112        did_action( 'init' ) && $scripts->localize( 'heartbeat', 'heartbeatSettings', 
    113113                apply_filters( 'heartbeat_settings', array() ) 
     
    331331                'allowedFiles' => __( 'Allowed Files' ), 
    332332        ) ); 
    333333 
     334        $scripts->add( 'accordion', "/wp-admin/js/accordion$suffix.js", array( 'jquery' ), false, 1 ); 
     335 
    334336        $scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 ); 
    335337        $scripts->add( 'media-models', "/wp-includes/js/media-models$suffix.js", array( 'backbone', 'jquery' ), false, 1 ); 
    336338        did_action( 'init' ) && $scripts->localize( 'media-models', '_wpMediaModelsL10n', array( 
  • wp-includes/class-wp-customize-section.php

     
    7979         */ 
    8080        protected function render() { 
    8181                ?> 
    82                 <li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section"> 
    83                         <h3 class="customize-section-title" tabindex="0" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3> 
    84                         <ul class="customize-section-content"> 
     82                <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section accordion-section"> 
     83                        <h3 class="accordion-section-title" tabindex="0" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3> 
     84                        <ul class="accordion-section-content"> 
    8585                                <?php 
    8686                                foreach ( $this->controls as $control ) 
    8787                                        $control->maybe_render();