WordPress.org
Get WordPress

Make WordPress Core

Ticket #50699: 50699.diff

File 50699.diff, 27.4 KB (added by azaozz, 4 years ago)

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

     
    99
    1010/* global ajaxurl, postboxes */
    1111
    12 (function($) {
     12( function( $ ) {
    1313        var $document = $( document ),
     14                $body = $( 'body' ),
    1415                __ = wp.i18n.__;
    1516
    1617        /**
    … …  
    6364                        }
    6465
    6566                        if ( postboxes.page !== 'press-this' ) {
    66                                 postboxes.save_state( postboxes.page );
     67                                postboxes.save_state();
    6768                        }
    6869
    6970                        if ( id ) {
    … …  
    118119                                return;
    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 ) {
    125126                                        postboxes.handleOrderBetweenSortables( 'previous', button, postbox );
    … …  
    129130                                postbox.prevAll( '.postbox:visible' ).eq( 0 ).before( postbox );
    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 ) {
    139138                                        postboxes.handleOrderBetweenSortables( 'next', button, postbox );
    … …  
    143142                                postbox.nextAll( '.postbox:visible' ).eq( 0 ).after( postbox );
    144143                                button.focus();
    145144                                postboxes.updateOrderButtonsProperties();
    146                                 postboxes.save_order( postboxes.page );
     145                                postboxes.save_order();
    147146                        }
    148 
    149147                },
    150148
    151149                /**
    … …  
    191189
    192190                        postboxes._mark_area();
    193191                        button.focus();
    194                         postboxes.updateOrderButtonsProperties();
    195                         postboxes.save_order( postboxes.page );
     192                        postboxes.save_order();
    196193                },
    197194
     195                showArrangeArrows: function() {
     196                        $( '.postbox-arrange-arrow' )
     197                                .attr( 'aria-disabled', 'false' )
     198                                .removeClass( 'hidden' );
     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
    198211                /**
    199212                 * Update the move buttons properties depending on the postbox position.
    200213                 *
    … …  
    203216                 * @return {void}
    204217                 */
    205218                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' );
     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                                                }
    216226
    217                         // Enable all buttons as a reset first.
    218                         moveUpButtons
    219                                 .attr( 'aria-disabled', 'false' )
    220                                 .removeClass( 'hidden' );
    221                         moveDownButtons
    222                                 .attr( 'aria-disabled', 'false' )
    223                                 .removeClass( 'hidden' );
     227                                                return true;
     228                                        } );
    224229
    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' );
     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;
    229235                        }
    230236
    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' );
     237                        // Reset.
     238                        if ( $body.hasClass( 'screen-options-open' ) ) {
     239                                $( '.postbox-arrange-arrow' ).removeClass( 'hidden' ).attr( 'aria-disabled', 'false' );
    234240                        }
    235241
    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' );
     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' );
    239245                        }
     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' );
     250                        }
    240251                },
    241252
    242253                /**
    … …  
    252263                 * @param {Function} args.pbhide A callback that is called when a postbox closes.
    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;
    260271                        this.init( page, args );
    … …  
    267278                        /**
    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
    274285                        /**
    … …  
    283294                         *
    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
    292304                        /**
    … …  
    302314                         *
    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 );
    309321
    310322                                if ( $el.prop( 'checked' ) ) {
    311323                                        $postbox.show();
     324
    312325                                        if ( $.isFunction( postboxes.pbshow ) ) {
    313326                                                postboxes.pbshow( boxId );
    314327                                        }
    315328                                } else {
    316329                                        $postbox.hide();
     330
    317331                                        if ( $.isFunction( postboxes.pbhide ) ) {
    318332                                                postboxes.pbhide( boxId );
    319333                                        }
    320334                                }
    321335
    322                                 postboxes.save_state( page );
     336                                postboxes.save_state();
    323337                                postboxes._mark_area();
    324338
    325339                                /**
    … …  
    336350                         *
    337351                         * @return {void}
    338352                         */
    339                         $('.columns-prefs input[type="radio"]').bind('click.postboxes', function(){
    340                                 var n = parseInt($(this).val(), 10);
     353                        $( '.columns-prefs input[type="radio"]' ).on( 'click.postboxes', function() {
     354                                var number = parseInt( $( this ).val(), 10 );
    341355
    342                                 if ( n ) {
    343                                         postboxes._pb_edit(n);
    344                                         postboxes.save_order( page );
     356                                if ( number ) {
     357                                        postboxes._pb_edit( number );
     358                                        postboxes.save_order();
    345359                                }
    346360                        });
     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                        } );
    347373                },
    348374
    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' );
     375                initializeSortable: function() {
     376                        var hasScreenOptions = $document.find( '#screen-options-wrap' ).length > 0;
    367377
    368                         $.extend( this, args || {} );
    369                         $('.meta-box-sortables').sortable({
     378                        $( '.meta-box-sortables' ).sortable( {
    370379                                placeholder: 'sortable-placeholder',
    371380                                connectWith: '.meta-box-sortables',
    372381                                items: '.postbox',
    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();`
    381393                                         * Cloning a checked radio and then inserting that clone next to the original
    … …  
    386398                                         */
    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' );
    399414                                },
    … …  
    400415                                stop: function() {
    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');
     430                                receive: function( event, ui ) {
     431                                        if ( 'dashboard_browser_nag' == ui.item[0].id ) {
     432                                                $( ui.sender ).sortable( 'cancel' );
     433                                        }
    416434
    417                                         postboxes._mark_area();
    418435                                        $document.trigger( 'postbox-moved', ui.item );
    419436                                }
    420437                        });
     438                },
    421439
    422                         if ( isMobile ) {
    423                                 $(document.body).bind('orientationchange.postboxes', function(){ postboxes._pb_change(); });
     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 );
    432465
     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 );
     468
    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
    440483                /**
    … …  
    450493                 * @param {string} page The page we are currently on.
    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                        }
    460503
    … …  
    461504                        closed = $( '.postbox' ).filter( '.closed' ).map( function() { return this.id; } ).get().join( ',' );
    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                },
    472515
    … …  
    479522                 *
    480523                 * @memberof postboxes
    481524                 *
    482                  * @param {string} page The page we are currently on.
    483525                 * @return {void}
    484526                 */
    485                 save_order : function(page) {
    486                         var postVars, page_columns = $('.columns-prefs input:checked').val() || 0;
    487 
    488                         postVars = {
     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                        } );
    498538
    … …  
    522562                 * @return {void}
    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;
     565                        var elements = $( '.postbox:visible' ),
     566                                containers = $( '.meta-box-sortables:visible' );
    528567
    529                         visibleSortables.each( function() {
    530                                 var t = $(this);
     568                        containers.each( function( index, element ) {
     569                                var container = $( element );
    531570
    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                         });
     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' );
    540577
    541                         postboxes.updateEmptySortablesText( visibleSortables, areAllVisibleSortablesEmpty );
    542                 },
     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                                                }
    543586
    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' );
     587                                                // Break the loop.
     588                                                return false;
     589                                        }
    557590
    558                         if ( ! isDashboard ) {
    559                                 return;
    560                         }
     591                                        container.attr( 'data-emptystring', __( 'Drag screen elements here' ) );
    561592
    562                         visibleSortables.each( function() {
    563                                 if ( $( this ).hasClass( 'empty-container' ) ) {
    564                                         $( this ).attr( 'data-emptyString', emptySortableText );
     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                                        }
    565601                                }
    566                         } );
     602                        });
     603
     604                        // Refresh up/down arrows attributes.
     605                        if ( $body.hasClass( 'screen-options-open' ) ) {
     606                                postboxes.updateOrderButtonsProperties();
     607                        }
    567608                },
    568609
    569610                /**
    … …  
    579620                 * @param {number} n The amount of columns to divide the post edit page in.
    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
    589630                        /**
    … …  
    614655                        switch ( window.orientation ) {
    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;
    629670                        }
    … …  
    651692                pbhide : false
    652693        };
    653694
    654 }(jQuery));
     695}( jQuery ));

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

     
    179179
    180180                autoResizeTextarea();
    181181        };
     182
    182183        window.quickPressLoad();
    183184
    184         // Enable the dragging functionality of the widgets.
    185         $( '.meta-box-sortables' ).sortable( 'option', 'containment', '#wpwrap' );
    186 
    187185        /**
    188186         * Adjust the height of the textarea based on the content.
    189187         *

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

     
    19851985        padding-top: 10px;
    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;
    19911991        position: relative;
    … …  
    20142014                height: 0;
    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}
    20232027

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

     
    4949
    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;
     55/* The following four selectors also apply on the Edit Post screen. */
     56.screen-options-open .meta-box-sortables {
     57        outline: 3px dashed #606a73;
     58        min-height: 250px;
    6059}
    6160
    62 /* Only highlight drop zones when dragging and only in the 2 columns layout. */
    63 .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
    64         outline: 3px dashed #606a73;
    65         /* Prevent margin on the child from collapsing with margin on the parent. */
    66         display: flow-root;
     61.screen-options-open .postbox-container .empty-container {
     62        outline-color: #b4b9be;
    6763}
    6864
    69 #dashboard-widgets .postbox-container .empty-container:after {
     65.postbox-container .empty-container:after {
    7066        content: attr(data-emptystring);
    7167        margin: auto;
    7268        position: absolute;
    … …  
    8278        display: none;
    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 */
    8786#the-comment-list td.comment p.comment-author {
    … …  
    11181117                min-height: 0;
    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        }
    11241123
    … …  
    11741173        .columns-prefs .columns-prefs-4 {
    11751174                display: none;
    11761175        }
    1177 
     1176/*
    11781177        #dashboard-widgets .postbox-container .empty-container:after {
    11791178                display: block;
    11801179        }
     1180*/
    11811181}
    11821182
    11831183/* three columns on the dash */
    … …  
    12051205        #dashboard-widgets #postbox-container-4 .empty-container:after {
    12061206                display: none;
    12071207        }
    1208 
     1208/*
    12091209        #dashboard-widgets .postbox-container .empty-container:after {
    12101210                display: block;
    12111211        }
     1212*/
    12121213}
    12131214
    1214 /* Always show the "Drag boxes here" CSS generated content on large screens. */
     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 {
    12171218                display: block;
    12181219        }
    12191220}
    1220 
     1221*/
    12211222@media screen and (max-width: 870px) {
    12221223        .welcome-panel .welcome-panel-column,
    12231224        .welcome-panel .welcome-panel-column:first-child {

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

     
    148148
    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;
    164153}
    165154
     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;
     163}
     164
    166165.postbox {
    167166        position: relative;
    168167        min-width: 255px;
    … …  
    14951494                width: auto;
    14961495        }
    14971496
    1498         .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
     1497        .screen-options-open.post-type-attachment #post-body .meta-box-sortables {
    14991498                outline: none;
    15001499                min-height: 0;
    15011500                margin-bottom: 0;
    … …  
    15351534        }
    15361535
    15371536        /* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */
    1538         .is-dragging-metaboxes #poststuff #postbox-container-1 .empty-container,
    1539         .is-dragging-metaboxes #poststuff #postbox-container-1 #side-sortables:empty,
    1540         .is-dragging-metaboxes #poststuff #post-body.columns-2 #side-sortables,
    1541         .is-dragging-metaboxes #poststuff #post-body.columns-2 .meta-box-sortables {
     1537        .screen-options-open #poststuff #postbox-container-1 .empty-container,
     1538        .screen-options-open #poststuff #postbox-container-1 #side-sortables:empty,
     1539        .screen-options-open #poststuff #post-body.columns-2 #side-sortables,
     1540        .screen-options-open #poststuff #post-body.columns-2 .meta-box-sortables {
    15421541                height: auto;
    15431542                min-height: 60px;
    15441543        }

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

     
    11131113                }
    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 );
    11191122
     1123                meta_box_prefs( $this );
     1124
    11201125                if ( 'dashboard' === $this->id && has_action( 'welcome_panel' ) && current_user_can( 'edit_theme_options' ) ) {
    11211126                        if ( isset( $_GET['welcome'] ) ) {
    11221127                                $welcome_checked = empty( $_GET['welcome'] ) ? 0 : 1;

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

     
    13351335
    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>';
    13411341                                                echo '</button>';
    … …  
    13451345                                                        $widget_title
    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>';
    13511351                                                echo '</button>';