WordPress.org
Get WordPress

Make WordPress Core

Changeset 49179


Ignore:
Timestamp:
10/17/2020 09:58:34 AM (4 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.