Make WordPress Core

Ticket #34323: 34323.2.diff

File 34323.2.diff, 2.2 KB (added by celloexpressions, 8 years ago)

Clarify that placeholders are only "clickable" for mouse and keyboard users, add a white background to indicate a "clickable" element visually per customizer UI conventions and add a hover state with a darkened border.

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

     
    809809        width: 100%;
    810810        position: relative;
    811811        text-align: center;
    812         cursor: default;
     812        cursor: pointer;
     813        background: #fff;
    813814        border: 1px dashed #b4b9be;
    814815        -webkit-box-sizing: border-box;
    815816        -moz-box-sizing: border-box;
     
    818819        line-height: 20px;
    819820}
    820821
     822.customize-control .attachment-media-view .placeholder:hover { /* Placeholder is not focusable. */
     823        border-color: #191e23;
     824}
     825
     826.customize-control-header .placeholder { /* This area is used for more than a placeholder for headers. */
     827        background: transparent;
     828        cursor: default;
     829}
     830
    821831.customize-control-header .inner {
    822832        display: none;
    823833        position: absolute;
  • src/wp-admin/js/customize-controls.js

     
    18831883                        // Bind events, with delegation to facilitate re-rendering.
    18841884                        control.container.on( 'click keydown', '.upload-button', control.openFrame );
    18851885                        control.container.on( 'click keydown', '.upload-button', control.pausePlayer );
     1886                        control.container.on( 'click',         '.placeholder', control.openFrame );
    18861887                        control.container.on( 'click keydown', '.thumbnail-image img', control.openFrame );
    18871888                        control.container.on( 'click keydown', '.default-button', control.restoreDefault );
    18881889                        control.container.on( 'click keydown', '.remove-button', control.pausePlayer );
  • src/wp-includes/customize/class-wp-customize-media-control.php

     
    199199                <# } else { #>
    200200                        <div class="attachment-media-view">
    201201                                <div class="placeholder">
    202                                                 {{ data.button_labels.placeholder }}
     202                                        {{ data.button_labels.placeholder }}
    203203                                </div>
    204204                                <div class="actions">
    205205                                        <# if ( data.defaultAttachment ) { #>