WordPress.org

Make WordPress Core

Changeset 39202


Ignore:
Timestamp:
11/11/2016 09:46:47 AM (3 years ago)
Author:
westonruter
Message:

Customize: Remove left-margin guard from edit shortcuts and adjust for small screen sizes.

Removes the .customize-partial-edit-shortcut-left-margin class which was not effective on some themes, created a worse experience for other themes, and which did not recalculate when the preview was reflowed or resized. Now some small-width media queries are added to handle common cases while more dramatic issues can be handled by the theme. Also renames Partial.positionEditShortcut()to Partial.addEditShortcutToPlacement() which is a more accurate description of its function.

Props sirbrillig, sstoqnov.
See #38651, #27403.

Location:
trunk/src/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/css/customize-preview.css

    r39186 r39202  
    3636}
    3737
    38 /* Styles for the actual shortcut */
     38/**
     39 * Styles for the actual shortcut
     40 *
     41 * Note that some properties are overly verbose to prevent theme interference.
     42 */
    3943.widget .customize-partial-edit-shortcut button,
    4044.customize-partial-edit-shortcut button {
    4145    position: absolute;
    42     left: -36px;
     46    left: -30px;
     47    top: 2px;
    4348    color: #fff;
    4449    width: 30px;
     
    102107}
    103108
    104 .customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
    105     left: 0;
    106 }
    107 
    108109@-webkit-keyframes customize-partial-edit-shortcut-bounce-appear {
    109110    from, 20%, 40%, 60%, 80%, to {
     
    243244
    244245@media screen and (max-width:800px) {
     246    .widget .customize-partial-edit-shortcut button,
    245247    .customize-partial-edit-shortcut button {
    246         left: -18px; /* Assume there will be less of a margin available on smaller screens */
    247     }
    248 }
     248        left: -32px;
     249    }
     250}
     251
     252@media screen and (max-width:320px) {
     253    .site-title {
     254        padding-left: 10px;
     255    }
     256
     257    .widget-area .widget {
     258        padding-left: 10px;
     259    }
     260
     261    .widget .customize-partial-edit-shortcut button,
     262    .customize-partial-edit-shortcut button {
     263        left: -30px;
     264    }
     265}
  • trunk/src/wp-includes/js/customize-selective-refresh.js

    r39144 r39202  
    119119            }
    120120            $shortcut = partial.createEditShortcut();
    121             partial.positionEditShortcut( placement, $shortcut );
     121            partial.addEditShortcutToPlacement( placement, $shortcut );
    122122            $shortcut.on( 'click', function( event ) {
    123123                event.preventDefault();
     
    128128
    129129        /**
    130          * Position an edit shortcut for the placement container.
    131          *
    132          * The shortcut must already be created and added to the page.
     130         * Add an edit shortcut to the placement container.
    133131         *
    134132         * @since 4.7
     
    138136         * @returns {void}
    139137         */
    140         positionEditShortcut: function( placement, $editShortcut ) {
    141             var $placementContainer = $( placement.container ), $editButton;
     138        addEditShortcutToPlacement: function( placement, $editShortcut ) {
     139            var $placementContainer = $( placement.container );
    142140            $placementContainer.prepend( $editShortcut );
    143141            if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
    144142                $editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
    145143            }
    146             $editButton = $editShortcut.find( 'button' );
    147             $editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editButton.offset().left < 2 );
    148144        },
    149145
Note: See TracChangeset for help on using the changeset viewer.