WordPress.org
Get WordPress

Make WordPress Core

Changeset 49179


Ignore:
Timestamp:
10/17/2020 09:58:34 AM (6 years ago)
Author:
azaozz
Message:

Fix and improve arranging of postboxes/metaboxes:

  • Enable arranging only when the Screen Options tab is open.
  • Prevent accidental/unintended dragging. Seen it happen mostly on laptops when using the mousepad/trackpad.
  • Improve discoverability and usefulness by always showing the "drop zones" outline when postboxes are draggable/arrangeable.
  • Add some (brief) explanation to the Screen Options tab helping the user understand what options are available and how to change them. This is especially helpful for screen reader users to give an idea how to use the screen options and what to expect.
  • Fix/enhance some of the code in postbox.js and make it coding standards compliant.

See #50699.

Location:
trunk/src
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/admin/postbox.js

    r48717 r49179  
    1010/* global ajaxurl, postboxes */
    1111
    12 (function($) {
     12( function( $ ) {
    1313        var $document = $( document ),
     14                $body = $( 'body' ),
    1415                __ = wp.i18n.__;
    1516
    … …  
    6465
    6566                        if ( postboxes.page !== 'press-this' ) {
    66                                 postboxes.save_state( postboxes.page );
     67                                postboxes.save_state();
    6768                        }
    6869
    … …  
    119120                        }
    120121
    121                         // Move a postbox up.
    122122                        if ( button.hasClass( 'handle-order-higher' ) ) {
     123                                // Move a postbox up.
    123124                                // If the box is first within a sortable area, move it to the previous sortable area.
    124125                                if ( 0 === postboxWithinSortablesIndex ) {
    … …  
    130131                                button.focus();
    131132                                postboxes.updateOrderButtonsProperties();
    132                                 postboxes.save_order( postboxes.page );
    133                         }
    134 
    135                         // Move a postbox down.
    136                         if ( button.hasClass( 'handle-order-lower' ) ) {
     133                                postboxes.save_order();
     134                        } else if ( button.hasClass( 'handle-order-lower' ) ) {
     135                                // Move a postbox down.
    137136                                // If the box is last within a sortable area, move it to the next sortable area.
    138137                                if ( postboxWithinSortablesIndex + 1 === postboxesWithinSortablesCount ) {
    … …  
    144143                                button.focus();
    145144                                postboxes.updateOrderButtonsProperties();
    146                                 postboxes.save_order( postboxes.page );
    147                         }
    148 
     145                                postboxes.save_order();
     146                        }
    149147                },
    150148
    … …  
    192190                        postboxes._mark_area();
    193191                        button.focus();
    194                         postboxes.updateOrderButtonsProperties();
    195                         postboxes.save_order( postboxes.page );
    196                 },
    197 
    198                 /**
    199                  * Update the move buttons properties depending on the postbox position.
    200                  *
    201                  * @since 5.5.0
    202                  *
    203                  * @return {void}
    204                  */
    205                 updateOrderButtonsProperties: function() {
    206                         var firstSortablesId = $( '.meta-box-sortables:visible:first' ).attr( 'id' ),
    207                                 lastSortablesId = $( '.meta-box-sortables:visible:last' ).attr( 'id' ),
    208                                 firstPostbox = $( '.postbox:visible:first' ),
    209                                 lastPostbox = $( '.postbox:visible:last' ),
    210                                 firstPostboxId = firstPostbox.attr( 'id' ),
    211                                 lastPostboxId = lastPostbox.attr( 'id' ),
    212                                 firstPostboxSortablesId = firstPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
    213                                 lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
    214                                 moveUpButtons = $( '.handle-order-higher' ),
    215                                 moveDownButtons = $( '.handle-order-lower' );
    216 
    217                         // Enable all buttons as a reset first.
    218                         moveUpButtons
     192                        postboxes.save_order();
     193                },
     194
     195                showArrangeArrows: function() {
     196                        $( '.postbox-arrange-arrow' )
    219197                                .attr( 'aria-disabled', 'false' )
    220198                                .removeClass( 'hidden' );
    221                         moveDownButtons
    222                                 .attr( 'aria-disabled', 'false' )
    223                                 .removeClass( 'hidden' );
    224 
    225                         // When there's only one "sortables" area (e.g. in the block editor) and only one visible postbox, hide the buttons.
    226                         if ( firstSortablesId === lastSortablesId && firstPostboxId === lastPostboxId ) {
    227                                 moveUpButtons.addClass( 'hidden' );
    228                                 moveDownButtons.addClass( 'hidden' );
    229                         }
    230 
    231                         // Set an aria-disabled=true attribute on the first visible "move" buttons.
    232                         if ( firstSortablesId === firstPostboxSortablesId ) {
    233                                 $( firstPostbox ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
    234                         }
    235 
    236                         // Set an aria-disabled=true attribute on the last visible "move" buttons.
    237                         if ( lastSortablesId === lastPostboxSortablesId ) {
    238                                 $( '.postbox:visible .handle-order-lower' ).last().attr( 'aria-disabled', 'true' );
     199
     200                        postboxes._mark_area();
     201                },
     202
     203                hideArrangeArrows: function() {
     204                        $( '.postbox-arrange-arrow' )
     205                                .attr( 'aria-disabled', 'true' )
     206                                .addClass( 'hidden' );
     207
     208                        postboxes._mark_area();
     209                },
     210
     211                /**
     212                 * Update the move buttons properties depending on the postbox position.
     213                 *
     214                 * @since 5.5.0
     215                 *
     216                 * @return {void}
     217                 */
     218                updateOrderButtonsProperties: function() {
     219                        var elements  = $( '.postbox:visible' ),
     220                                containers = $( '.meta-box-sortables:visible' )
     221                                        .not( '.unused-container' )
     222                                        .filter( function( i, container ) {
     223                                                if ( i > 0 && container.clientHeight === 0 ) {
     224                                                        return false;
     225                                                }
     226
     227                                                return true;
     228                                        } );
     229
     230                        // When there's only one "sortables" area (e.g. in the block editor)
     231                        // and only one visible postbox, hide the buttons.
     232                        if ( containers.length === 1 && elements.length === 1 ) {
     233                                $( '.postbox-arrange-arrow' ).addClass( 'hidden' ).attr( 'aria-disabled', 'true' );
     234                                return;
     235                        }
     236
     237                        // Reset.
     238                        if ( $body.hasClass( 'screen-options-open' ) ) {
     239                                $( '.postbox-arrange-arrow' ).removeClass( 'hidden' ).attr( 'aria-disabled', 'false' );
     240                        }
     241
     242                        if ( elements.first().parent()[0] === containers.first()[0] ) {
     243                                // Set an aria-disabled=true attribute on the first visible "move higher" buttons.
     244                                elements.first().find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
     245                        }
     246
     247                        if ( elements.last().parent()[0] === containers.last()[0] ) {
     248                                // Set an aria-disabled=true attribute on the last visible "move lower" buttons.
     249                                elements.last().find( '.handle-order-lower' ).attr( 'aria-disabled', 'true' );
    239250                        }
    240251                },
    … …  
    253264                 * @return {void}
    254265                 */
    255                 add_postbox_toggles : function (page, args) {
     266                add_postbox_toggles: function ( page, args ) {
    256267                        var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
    257                                 $orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
     268                                $orderButtons = $( '.postbox .postbox-arrange-arrow' );
    258269
    259270                        this.page = page;
    … …  
    268279                         * @since 2.7.0
    269280                         */
    270                         $('.postbox .hndle a').click( function(e) {
    271                                 e.stopPropagation();
     281                        $( '.postbox .hndle a' ).on( 'click', function( event ) {
     282                                event.stopPropagation();
    272283                        });
    273284
    … …  
    284295                         * @return {void}
    285296                         */
    286                         $( '.postbox a.dismiss' ).on( 'click.postboxes', function( e ) {
    287                                 var hide_id = $(this).parents('.postbox').attr('id') + '-hide';
    288                                 e.preventDefault();
    289                                 $( '#' + hide_id ).prop('checked', false).triggerHandler('click');
     297                        $( '.postbox a.dismiss' ).on( 'click.postboxes', function( event ) {
     298                                var hide_id = $( this ).parents( '.postbox' ).attr( 'id' ) + '-hide';
     299
     300                                event.preventDefault();
     301                                $( '#' + hide_id ).prop( 'checked', false ).triggerHandler( 'click' );
    290302                        });
    291303
    … …  
    303315                         * @return {void}
    304316                         */
    305                         $('.hide-postbox-tog').bind('click.postboxes', function() {
    306                                 var $el = $(this),
     317                        $( '.hide-postbox-tog' ).on( 'click.postboxes', function() {
     318                                var $el = $( this ),
    307319                                        boxId = $el.val(),
    308320                                        $postbox = $( '#' + boxId );
    … …  
    310322                                if ( $el.prop( 'checked' ) ) {
    311323                                        $postbox.show();
     324
    312325                                        if ( $.isFunction( postboxes.pbshow ) ) {
    313326                                                postboxes.pbshow( boxId );
    … …  
    315328                                } else {
    316329                                        $postbox.hide();
     330
    317331                                        if ( $.isFunction( postboxes.pbhide ) ) {
    318332                                                postboxes.pbhide( boxId );
    … …  
    320334                                }
    321335
    322                                 postboxes.save_state( page );
     336                                postboxes.save_state();
    323337                                postboxes._mark_area();
    324338
    … …  
    337351                         * @return {void}
    338352                         */
    339                         $('.columns-prefs input[type="radio"]').bind('click.postboxes', function(){
    340                                 var n = parseInt($(this).val(), 10);
    341 
    342                                 if ( n ) {
    343                                         postboxes._pb_edit(n);
    344                                         postboxes.save_order( page );
    345                                 }
    346                         });
    347                 },
    348 
    349                 /**
    350                  * Initializes all the postboxes, mainly their sortable behaviour.
    351                  *
    352                  * @since 2.7.0
    353                  *
    354                  * @memberof postboxes
    355                  *
    356                  * @param {string} page The page we are currently on.
    357                  * @param {Object} [args={}] The arguments for the postbox initializer.
    358                  * @param {Function} args.pbshow A callback that is called when a postbox opens.
    359                  * @param {Function} args.pbhide A callback that is called when a postbox
    360                  *                               closes.
    361                  *
    362                  * @return {void}
    363                  */
    364                 init : function(page, args) {
    365                         var isMobile = $( document.body ).hasClass( 'mobile' ),
    366                                 $handleButtons = $( '.postbox .handlediv' );
    367 
    368                         $.extend( this, args || {} );
    369                         $('.meta-box-sortables').sortable({
     353                        $( '.columns-prefs input[type="radio"]' ).on( 'click.postboxes', function() {
     354                                var number = parseInt( $( this ).val(), 10 );
     355
     356                                if ( number ) {
     357                                        postboxes._pb_edit( number );
     358                                        postboxes.save_order();
     359                                }
     360                        });
     361
     362                        // Enable dragging/arranging of postboxes and show drop placeholders when Screen Options tab is open.
     363                        // If there is no Screen Options tab on the screen, dragging/arranging is enabled on page load.
     364                        $document.on( 'screen:options:open', function() {
     365                                $body.addClass( 'screen-options-open' );
     366                                postboxes.initializeSortable();
     367                                postboxes.showArrangeArrows();
     368                        } ).on( 'screen:options:close', function() {
     369                                $body.removeClass( 'screen-options-open' );
     370                                $( '.meta-box-sortables' ).sortable( 'destroy' );
     371                                postboxes.hideArrangeArrows()
     372                        } );
     373                },
     374
     375                initializeSortable: function() {
     376                        var hasScreenOptions = $document.find( '#screen-options-wrap' ).length > 0;
     377
     378                        $( '.meta-box-sortables' ).sortable( {
    370379                                placeholder: 'sortable-placeholder',
    371380                                connectWith: '.meta-box-sortables',
    … …  
    373382                                handle: '.hndle',
    374383                                cursor: 'move',
    375                                 delay: ( isMobile ? 200 : 0 ),
     384                                delay: ( $body.hasClass( 'mobile' ) ? 200 : 0 ),
    376385                                distance: 2,
    377386                                tolerance: 'pointer',
     387                                opacity: 0.65,
    378388                                forcePlaceholderSize: true,
     389                                containment: '#wpwrap',
     390
    379391                                helper: function( event, element ) {
    380392                                        /* `helper: 'clone'` is equivalent to `return element.clone();`
    … …  
    387399                                        return element.clone()
    388400                                                .find( ':input' )
    389                                                         .attr( 'name', function( i, currentName ) {
    390                                                                 return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
    391                                                         } )
     401                                                .attr( 'name', function( i, currentName ) {
     402                                                        return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
     403                                                } )
    392404                                                .end();
    393405                                },
    394                                 opacity: 0.65,
    395406                                start: function() {
    396                                         $( 'body' ).addClass( 'is-dragging-metaboxes' );
     407                                        // Pretend the Screen Options tab exists.
     408                                        if ( ! hasScreenOptions ) {
     409                                                $body.addClass( 'screen-options-open' );
     410                                        }
     411
    397412                                        // Refresh the cached positions of all the sortable items so that the min-height set while dragging works.
    398413                                        $( '.meta-box-sortables' ).sortable( 'refreshPositions' );
    … …  
    401416                                        var $el = $( this );
    402417
    403                                         $( 'body' ).removeClass( 'is-dragging-metaboxes' );
     418                                        if ( ! hasScreenOptions ) {
     419                                                $body.removeClass( 'screen-options-open' );
     420                                        }
    404421
    405422                                        if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
    406                                                 $el.sortable('cancel');
     423                                                $el.sortable( 'cancel' );
    407424                                                return;
    408425                                        }
    409426
    410                                         postboxes.updateOrderButtonsProperties();
    411                                         postboxes.save_order(page);
     427                                        postboxes._mark_area();
     428                                        postboxes.save_order();
    412429                                },
    413                                 receive: function(e,ui) {
    414                                         if ( 'dashboard_browser_nag' == ui.item[0].id )
    415                                                 $(ui.sender).sortable('cancel');
    416 
    417                                         postboxes._mark_area();
     430                                receive: function( event, ui ) {
     431                                        if ( 'dashboard_browser_nag' == ui.item[0].id ) {
     432                                                $( ui.sender ).sortable( 'cancel' );
     433                                        }
     434
    418435                                        $document.trigger( 'postbox-moved', ui.item );
    419436                                }
    420437                        });
    421 
    422                         if ( isMobile ) {
    423                                 $(document.body).bind('orientationchange.postboxes', function(){ postboxes._pb_change(); });
     438                },
     439
     440                /**
     441                 * Initializes the postboxes, mainly their sortable behaviour.
     442                 *
     443                 * @since 2.7.0
     444                 *
     445                 * @memberof postboxes
     446                 *
     447                 * @param {string} page The page we are currently on. Not used, here for back-compat.
     448                 * @param {Object} [args={}] The arguments for the postbox initializer.
     449                 * @param {Function} args.pbshow A callback that is called when a postbox opens.
     450                 * @param {Function} args.pbhide A callback that is called when a postbox
     451                 *                               closes.
     452                 *
     453                 * @return {void}
     454                 */
     455                init: function( page, args ) {
     456                        $.extend( this, args || {} );
     457
     458                        if ( $body.hasClass( 'mobile' ) ) {
     459                                $body.on( 'orientationchange.postboxes', function() { postboxes._pb_change(); } );
    424460                                this._pb_change();
    425461                        }
    426462
    427                         this._mark_area();
    428 
    429                         // Update the "move" buttons properties.
     463                        // Set the "arrange" (up/down) buttons properties on page load...
    430464                        this.updateOrderButtonsProperties();
    431                         $document.on( 'postbox-toggled', this.updateOrderButtonsProperties );
     465
     466                        // ...and keep updating it when postboxes are added or removed by using the checkboxes in Screen Options.
     467                        $document.on( 'postbox-toggled', this._mark_area );
    432468
    433469                        // Set the handle buttons `aria-expanded` attribute initial value on page load.
    434                         $handleButtons.each( function () {
     470                        $( '.postbox .handlediv' ).each( function () {
    435471                                var $el = $( this );
    436472                                $el.attr( 'aria-expanded', ! $el.closest( '.postbox' ).hasClass( 'closed' ) );
    437473                        });
     474
     475                        // Init sortables now if there is no Screen Options tab.
     476                        // Otherwise init when Screen Options are open.
     477                        if ( ! $document.find( '#screen-options-wrap' ).length ) {
     478                                this.initializeSortable();
     479                                this.showArrangeArrows();
     480                        }
    438481                },
    439482
    … …  
    451494                 * @return {void}
    452495                 */
    453                 save_state : function(page) {
     496                save_state : function() {
    454497                        var closed, hidden;
    455498
    456499                        // Return on the nav-menus.php screen, see #35112.
    457                         if ( 'nav-menus' === page ) {
     500                        if ( 'nav-menus' === postboxes.page ) {
    458501                                return;
    459502                        }
    … …  
    462505                        hidden = $( '.postbox' ).filter( ':hidden' ).map( function() { return this.id; } ).get().join( ',' );
    463506
    464                         $.post(ajaxurl, {
     507                        $.post( ajaxurl, {
    465508                                action: 'closed-postboxes',
    466509                                closed: closed,
    467510                                hidden: hidden,
    468                                 closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
    469                                 page: page
     511                                closedpostboxesnonce: $( '#closedpostboxesnonce' ).val(),
     512                                page: postboxes.page
    470513                        });
    471514                },
    … …  
    480523                 * @memberof postboxes
    481524                 *
    482                  * @param {string} page The page we are currently on.
    483                  * @return {void}
    484                  */
    485                 save_order : function(page) {
    486                         var postVars, page_columns = $('.columns-prefs input:checked').val() || 0;
    487 
    488                         postVars = {
     525                 * @return {void}
     526                 */
     527                save_order : function() {
     528                        var postVars = {
    489529                                action: 'meta-box-order',
    490                                 _ajax_nonce: $('#meta-box-order-nonce').val(),
    491                                 page_columns: page_columns,
    492                                 page: page
     530                                _ajax_nonce: $( '#meta-box-order-nonce' ).val(),
     531                                page_columns: $( '.columns-prefs input:checked' ).val() || 0,
     532                                page: postboxes.page
    493533                        };
    494534
    495                         $('.meta-box-sortables').each( function() {
     535                        $( '.meta-box-sortables' ).each( function() {
    496536                                postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
    497537                        } );
    … …  
    523563                 */
    524564                _mark_area : function() {
    525                         var visible = $( 'div.postbox:visible' ).length,
    526                                 visibleSortables = $( '#dashboard-widgets .meta-box-sortables:visible, #post-body .meta-box-sortables:visible' ),
    527                                 areAllVisibleSortablesEmpty = true;
    528 
    529                         visibleSortables.each( function() {
    530                                 var t = $(this);
    531 
    532                                 if ( visible == 1 || t.children( '.postbox:visible' ).length ) {
    533                                         t.removeClass('empty-container');
    534                                         areAllVisibleSortablesEmpty = false;
    535                                 }
    536                                 else {
    537                                         t.addClass('empty-container');
    538                                 }
    539                         });
    540 
    541                         postboxes.updateEmptySortablesText( visibleSortables, areAllVisibleSortablesEmpty );
    542                 },
    543 
    544                 /**
    545                  * Updates the text for the empty sortable areas on the Dashboard.
    546                  *
    547                  * @since 5.5.0
    548                  *
    549                  * @param {Object}  visibleSortables            The jQuery object representing the visible sortable areas.
    550                  * @param {boolean} areAllVisibleSortablesEmpty Whether all the visible sortable areas are "empty".
    551                  *
    552                  * @return {void}
    553                  */
    554                 updateEmptySortablesText: function( visibleSortables, areAllVisibleSortablesEmpty ) {
    555                         var isDashboard = $( '#dashboard-widgets' ).length,
    556                                 emptySortableText = areAllVisibleSortablesEmpty ?  __( 'Add boxes from the Screen Options menu' ) : __( 'Drag boxes here' );
    557 
    558                         if ( ! isDashboard ) {
    559                                 return;
    560                         }
    561 
    562                         visibleSortables.each( function() {
    563                                 if ( $( this ).hasClass( 'empty-container' ) ) {
    564                                         $( this ).attr( 'data-emptyString', emptySortableText );
    565                                 }
    566                         } );
     565                        var elements = $( '.postbox:visible' ),
     566                                containers = $( '.meta-box-sortables:visible' );
     567
     568                        containers.each( function( index, element ) {
     569                                var container = $( element );
     570
     571                                if ( container.children( '.postbox:visible' ).length ) {
     572                                        container
     573                                                .removeClass( 'empty-container unused-container' )
     574                                                .removeAttr( 'data-emptystring' );
     575                                } else {
     576                                        container.addClass( 'empty-container' );
     577
     578                                        if ( elements.length < 1 ) {
     579                                                // Edge case: all postboxes are disabled.
     580                                                // Mark the first container as empty, the rest as unused.
     581                                                if ( index === 0 ) {
     582                                                        container.attr( 'data-emptystring', __( 'Enable screen elements from the Screen Options menu' ) );
     583                                                } else {
     584                                                        container.addClass( 'unused-container' );
     585                                                }
     586
     587                                                // Break the loop.
     588                                                return false;
     589                                        }
     590
     591                                        container.attr( 'data-emptystring', __( 'Drag screen elements here' ) );
     592
     593                                        if ( elements.length <= index ) {
     594                                                // If there are not enough elements (postboxes) to add to all containers,
     595                                                // (and this container is empty, as tested above)
     596                                                // mark it as "unused".
     597                                                container.addClass( 'unused-container' );
     598                                        } else {
     599                                                container.removeClass( 'unused-container' );
     600                                        }
     601                                }
     602                        });
     603
     604                        // Refresh up/down arrows attributes.
     605                        if ( $body.hasClass( 'screen-options-open' ) ) {
     606                                postboxes.updateOrderButtonsProperties();
     607                        }
    567608                },
    568609
    … …  
    580621                 * @return {void}
    581622                 */
    582                 _pb_edit : function(n) {
    583                         var el = $('.metabox-holder').get(0);
     623                _pb_edit : function( n ) {
     624                        var el = $( '.metabox-holder' ).get( 0 );
    584625
    585626                        if ( el ) {
    586                                 el.className = el.className.replace(/columns-\d+/, 'columns-' + n);
     627                                el.className = el.className.replace( /columns-\d+/, 'columns-' + n );
    587628                        }
    588629
    … …  
    615656                                case 90:
    616657                                case -90:
    617                                         if ( !check.length || !check.is(':checked') )
    618                                                 this._pb_edit(2);
     658                                        if ( ! check.length || ! check.is( ':checked' ) ) {
     659                                                this._pb_edit( 2 );
     660                                        }
    619661                                        break;
    620662                                case 0:
    621663                                case 180:
    622664                                        if ( $( '#poststuff' ).length ) {
    623                                                 this._pb_edit(1);
    624                                         } else {
    625                                                 if ( !check.length || !check.is(':checked') )
    626                                                         this._pb_edit(2);
     665                                                this._pb_edit( 1 );
     666                                        } else if ( ! check.length || ! check.is( ':checked' ) ) {
     667                                                this._pb_edit( 2 );
    627668                                        }
    628669                                        break;
    … …  
    652693        };
    653694
    654 }(jQuery));
     695}( jQuery ));

  • trunk/src/js/_enqueues/wp/dashboard.js

    r49152 r49179  
    181181                autoResizeTextarea();
    182182        };
     183
    183184        window.quickPressLoad();
    184 
    185         // Enable the dragging functionality of the widgets.
    186         $( '.meta-box-sortables' ).sortable( 'option', 'containment', '#wpwrap' );
    187185
    188186        /**

  • trunk/src/wp-admin/css/common.css

    r48717 r49179  
    19861986}
    19871987
    1988 .metabox-holder .postbox-container .meta-box-sortables {
     1988.postbox-container .meta-box-sortables {
    19891989        /* The jQuery UI Sortables need some initial height to work properly. */
    19901990        min-height: 1px;
    … …  
    20152015                min-height: 0;
    20162016        }
     2017
     2018        #wpbody-content .metabox-holder .postbox-container .empty-container:after {
     2019                display: none;
     2020        }
    20172021}
    20182022
    20192023.js .widget .widget-top,
    2020 .js .postbox .hndle {
     2024.js.screen-options-open .postbox .hndle {
    20212025        cursor: move;
    20222026}

  • trunk/src/wp-admin/css/dashboard.css

    r48717 r49179  
    5050#dashboard-widgets .meta-box-sortables {
    5151        display: flow-root; /* avoid margin collapsing between parent and first/last child elements */
    52         /* Required min-height to make the jQuery UI Sortable drop zone work. */
    53         min-height: 100px;
    5452        margin: 0 8px 20px;
    5553}
    5654
    57 #dashboard-widgets .postbox-container .empty-container {
    58         outline: 3px dashed #b4b9be;
    59         height: 250px;
    60 }
    61 
    62 /* Only highlight drop zones when dragging and only in the 2 columns layout. */
    63 .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
     55/* The following four selectors also apply on the Edit Post screen. */
     56.screen-options-open .meta-box-sortables {
    6457        outline: 3px dashed #606a73;
    65         /* Prevent margin on the child from collapsing with margin on the parent. */
    66         display: flow-root;
    67 }
    68 
    69 #dashboard-widgets .postbox-container .empty-container:after {
     58        min-height: 250px;
     59}
     60
     61.screen-options-open .postbox-container .empty-container {
     62        outline-color: #b4b9be;
     63}
     64
     65.postbox-container .empty-container:after {
    7066        content: attr(data-emptystring);
    7167        margin: auto;
    … …  
    8379}
    8480
     81.screen-options-open .postbox-container .empty-container:after {
     82        display: block;
     83}
    8584
    8685/* @todo: this was originally in this section, but likely belongs elsewhere */
    … …  
    11191118        }
    11201119
    1121         .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
     1120        .screen-options-open #dashboard-widgets .meta-box-sortables {
    11221121                min-height: 100px;
    11231122        }
    … …  
    11751174                display: none;
    11761175        }
    1177 
     1176/*
    11781177        #dashboard-widgets .postbox-container .empty-container:after {
    11791178                display: block;
    11801179        }
     1180*/
    11811181}
    11821182
    … …  
    12061206                display: none;
    12071207        }
    1208 
     1208/*
    12091209        #dashboard-widgets .postbox-container .empty-container:after {
    12101210                display: block;
    12111211        }
    1212 }
    1213 
    1214 /* Always show the "Drag boxes here" CSS generated content on large screens. */
     1212*/
     1213}
     1214
     1215/* Always show the "Drag boxes here" CSS generated content on large screens.
    12151216@media only screen and (min-width: 1801px) {
    12161217        #dashboard-widgets .postbox-container .empty-container:after {
    … …  
    12181219        }
    12191220}
    1220 
     1221*/
    12211222@media screen and (max-width: 870px) {
    12221223        .welcome-panel .welcome-panel-column,

  • trunk/src/wp-admin/css/edit.css

    r49178 r49179  
    149149/* Post Screen */
    150150
    151 /* Only highlight drop zones when dragging and only in the 2 columns layout. */
    152 .is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables {
    153         outline: 3px dashed #606a73;
    154         /* Prevent margin on the child from collapsing with margin on the parent. */
    155         display: flow-root;
    156         /*
    157          * This min-height is meant to limit jumpiness while dragging. It's equivalent
    158          * to the minimum height of the sortable-placeholder which is given by the height
    159          * of a collapsed post box (36px + 1px top and bottom borders) + the placeholder
    160          * bottom margin (20px) + 2 additional pixels to compensate browsers rounding.
    161          */
    162         min-height: 60px;
     151.screen-options-open .metabox-holder .postbox-container .meta-box-sortables {
    163152        margin-bottom: 20px;
     153}
     154
     155.screen-options-open #postbox-container-2 #advanced-sortables.empty-container {
     156        height: 0;
     157        min-height: 0;
     158        outline: none;
     159}
     160
     161.screen-options-open #postbox-container-2 #advanced-sortables.empty-container:after {
     162        display: none;
    164163}
    165164
    … …  
    15081507        }
    15091508
    1510         .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
     1509        .screen-options-open.post-type-attachment #post-body .meta-box-sortables {
    15111510                outline: none;
    15121511                min-height: 0;
    … …  
    15481547
    15491548        /* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */
    1550         .is-dragging-metaboxes #poststuff #postbox-container-1 .empty-container,
    1551         .is-dragging-metaboxes #poststuff #postbox-container-1 #side-sortables:empty,
    1552         .is-dragging-metaboxes #poststuff #post-body.columns-2 #side-sortables,
    1553         .is-dragging-metaboxes #poststuff #post-body.columns-2 .meta-box-sortables {
     1549        .screen-options-open #poststuff #postbox-container-1 .empty-container,
     1550        .screen-options-open #poststuff #postbox-container-1 #side-sortables:empty,
     1551        .screen-options-open #poststuff #post-body.columns-2 #side-sortables,
     1552        .screen-options-open #poststuff #post-body.columns-2 .meta-box-sortables {
    15541553                height: auto;
    15551554                min-height: 60px;

  • trunk/src/wp-admin/includes/class-wp-screen.php

    r48670 r49179  
    11141114                ?>
    11151115                <fieldset class="metabox-prefs">
    1116                 <legend><?php _e( 'Boxes' ); ?></legend>
     1116                <legend><?php _e( 'Screen elements' ); ?></legend>
     1117                <p>
     1118                        <?php _e( 'Some screen elements can be shown or hidden by using the checkboxes.' ); ?>
     1119                        <?php _e( 'They can be expanded and collapsed by clickling on their headings, and arranged by dragging their headings or by clicking on the up and down arrows.' ); ?>
     1120                </p>
    11171121                <?php
    1118                         meta_box_prefs( $this );
     1122
     1123                meta_box_prefs( $this );
    11191124
    11201125                if ( 'dashboard' === $this->id && has_action( 'welcome_panel' ) && current_user_can( 'edit_theme_options' ) ) {

  • trunk/src/wp-admin/includes/template.php

    r49123 r49179  
    13361336                                                echo '<div class="handle-actions hide-if-no-js">';
    13371337
    1338                                                 echo '<button type="button" class="handle-order-higher" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
     1338                                                echo '<button type="button" class="handle-order-higher postbox-arrange-arrow hidden" aria-disabled="true" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
    13391339                                                echo '<span class="screen-reader-text">' . __( 'Move up' ) . '</span>';
    13401340                                                echo '<span class="order-higher-indicator" aria-hidden="true"></span>';
    … …  
    13461346                                                ) . '</span>';
    13471347
    1348                                                 echo '<button type="button" class="handle-order-lower" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
     1348                                                echo '<button type="button" class="handle-order-lower postbox-arrange-arrow hidden" aria-disabled="true" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
    13491349                                                echo '<span class="screen-reader-text">' . __( 'Move down' ) . '</span>';
    13501350                                                echo '<span class="order-lower-indicator" aria-hidden="true"></span>';
Note: See TracChangeset for help on using the changeset viewer.