WordPress.org

Make WordPress Core

Ticket #38532: 38532.diff

File 38532.diff, 4.5 KB (added by sirbrillig, 20 months ago)

Most recent fix for Firefox

  • src/wp-includes/css/customize-preview.css

    diff --git src/wp-includes/css/customize-preview.css src/wp-includes/css/customize-preview.css
    index a388488..f8f215a 100644
     
    2828        z-index: 5;
    2929}
    3030
    31 .customize-partial-edit-shortcut:active {
     31.customize-partial-edit-shortcut-click-target:active {
    3232        padding: 0;
    3333        border: 0;
    3434}
    3535
    3636/* Styles for the actual shortcut */
    37 .customize-partial-edit-shortcut:before {
     37.widget button.customize-partial-edit-shortcut-click-target,
     38.customize-partial-edit-shortcut-click-target {
    3839        position: absolute;
    3940        left: -36px;
    4041        color: #fff;
    41         width: 30px;
    42         height: 30px;
     42        min-width: 30px;
     43        min-height: 30px;
    4344        font-size: 18px;
    44         font-family: dashicons;
    45         content: '\f464';
    4645        z-index: 5;
    4746        background-color: #0085ba;
     47        background: #0085ba;
    4848        border-radius: 50%;
    4949        border: 2px solid #fff;
    5050        box-shadow: 0 2px 1px rgba(46,68,83,0.15);
     
    6565                     -1px 0 1px #006799;
    6666}
    6767
    68 .customize-partial-edit-shortcut:hover:before,
    69 .customize-partial-edit-shortcut:focus:before {
     68.customize-partial-edit-shortcut-click-target svg {
     69        fill: #fff;
     70        min-width: 20px;
     71        min-height: 20px;
     72}
     73
     74.customize-partial-edit-shortcut-click-target:hover,
     75.customize-partial-edit-shortcut-click-target:focus {
    7076    background: #008ec2; /* matches primary buttons */
    7177        border-color: #191e23; /* provides visual focus style with 4.5 contrast against background color */
    7278}
    7379
    74 body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut:before {
     80body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut-click-target {
    7581        animation-name: customize-partial-edit-shortcut-bounce-appear;
    7682        pointer-events: auto;
    7783}
    78 body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:before {
     84body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut-click-target {
    7985        animation-name: customize-partial-edit-shortcut-bounce-disappear;
    8086        pointer-events: none;
    8187}
    8288
    83 body.customize-partial-edit-shortcuts-flash .customize-partial-edit-shortcut:before {
     89body.customize-partial-edit-shortcuts-flash .customize-partial-edit-shortcut-click-target {
    8490        animation-duration: 1.5s;
    8591        animation-delay: 0.4s;
    8692        animation-name: customize-partial-edit-shortcut-bounce-disappear;
    8793        pointer-events: none;
    8894}
    8995
    90 .page-sidebar-collapsed .customize-partial-edit-shortcut:before,
    91 .customize-partial-edit-shortcut-hidden:before {
     96.page-sidebar-collapsed .customize-partial-edit-shortcut-click-target ,
     97.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut-click-target {
    9298        visibility: hidden;
    9399}
    94100
    95 .customize-partial-edit-shortcut-left-margin:before {
     101.customize-partial-edit-shortcut-left-margin .customize-partial-edit-shortcut-click-target {
    96102        left: 0;
    97103}
    98104
    body.customize-partial-edit-shortcuts-flash .customize-partial-edit-shortcut:bef 
    151157}
    152158
    153159@media screen and (max-width:800px) {
    154         .customize-partial-edit-shortcut:before {
     160        .customize-partial-edit-shortcut-click-target {
    155161                left: -18px; /* Assume there will be less of a margin available on smaller screens */
    156162        }
    157163}
  • src/wp-includes/js/customize-selective-refresh.js

    diff --git src/wp-includes/js/customize-selective-refresh.js src/wp-includes/js/customize-selective-refresh.js
    index 0fc06e9..dce0d16 100644
    wp.customize.selectiveRefresh = ( function( $, api ) { 
    214214                 * @return {jQuery} The edit shortcut button element.
    215215                 */
    216216                createEditShortcut: function() {
    217                         var partial = this, shortcutTitle;
     217                        var partial = this, shortcutTitle, $button, $clickTarget, $image;
    218218                        shortcutTitle = partial.getEditShortcutTitle();
    219                         return $( '<button>', {
     219                        $button = $( '<span>', {
     220                                'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName()
     221                        } );
     222                        $clickTarget = $( '<button>', {
    220223                                'aria-label': shortcutTitle,
    221224                                'title': shortcutTitle,
    222                                 'type': 'button',
    223                                 'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName()
     225                                'class': 'customize-partial-edit-shortcut-click-target'
    224226                        } );
     227                        $image = $( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.89 3.39l2.71 2.72c.46.46.42 1.24.03 1.64l-8.01 8.02-5.56 1.16 1.16-5.58s7.6-7.63 7.99-8.03c.39-.39 1.22-.39 1.68.07zm-2.73 2.79l-5.59 5.61 1.11 1.11 5.54-5.65zm-2.97 8.23l5.58-5.6-1.07-1.08-5.59 5.6z"/></svg>' );
     228                        $clickTarget.append( $image );
     229                        $button.append( $clickTarget );
     230                        return $button;
    225231                },
    226232
    227233                /**