WordPress.org
Get WordPress

Make WordPress Core

Changeset 49325


Ignore:
Timestamp:
10/27/2020 10:45:36 AM (6 years ago)
Author:
azaozz
Message:

Revert the improvenents to arranging of postboxes/metaboxes, [49179]. The current patch fixes about half a dozen problems, but seems more general improvements are needed to how Screen Options work.

See #50699.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r49180 r49325  
    1010/* global ajaxurl, postboxes */
    1111
    12 ( function( $ ) {
     12(function($) {
    1313        var $document = $( document ),
    14                 $body = $( 'body' ),
    1514                __ = wp.i18n.__;
    1615
    … …  
    6564
    6665                        if ( postboxes.page !== 'press-this' ) {
    67                                 postboxes.save_state();
     66                                postboxes.save_state( postboxes.page );
    6867                        }
    6968
    … …  
    120119                        }
    121120
     121                        // Move a postbox up.
    122122                        if ( button.hasClass( 'handle-order-higher' ) ) {
    123                                 // Move a postbox up.
    124123                                // If the box is first within a sortable area, move it to the previous sortable area.
    125124                                if ( 0 === postboxWithinSortablesIndex ) {
    … …  
    131130                                button.focus();
    132131                                postboxes.updateOrderButtonsProperties();
    133                                 postboxes.save_order();
    134                         } else if ( button.hasClass( 'handle-order-lower' ) ) {
    135                                 // Move a postbox down.
     132                                postboxes.save_order( postboxes.page );
     133                        }
     134
     135                        // Move a postbox down.
     136                        if ( button.hasClass( 'handle-order-lower' ) ) {
    136137                                // If the box is last within a sortable area, move it to the next sortable area.
    137138                                if ( postboxWithinSortablesIndex + 1 === postboxesWithinSortablesCount ) {
    … …  
    143144                                button.focus();
    144145                                postboxes.updateOrderButtonsProperties();
    145                                 postboxes.save_order();
    146                         }
     146                                postboxes.save_order( postboxes.page );
     147                        }
     148
    147149                },
    148150
    … …  
    190192                        postboxes._mark_area();
    191193                        button.focus();
    192                         postboxes.save_order();
    193                 },
    194 
    195                 showArrangeArrows: function() {
    196                         $( '.postbox-arrange-arrow' )
     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
    197219                                .attr( 'aria-disabled', 'false' )
    198220                                .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 
    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' );
     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' );
    250239                        }
    251240                },
    … …  
    264253                 * @return {void}
    265254                 */
    266                 add_postbox_toggles: function ( page, args ) {
     255                add_postbox_toggles : function (page, args) {
    267256                        var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
    268                                 $orderButtons = $( '.postbox .postbox-arrange-arrow' );
     257                                $orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
    269258
    270259                        this.page = page;
    … …  
    279268                         * @since 2.7.0
    280269                         */
    281                         $( '.postbox .hndle a' ).on( 'click', function( event ) {
    282                                 event.stopPropagation();
     270                        $('.postbox .hndle a').click( function(e) {
     271                                e.stopPropagation();
    283272                        });
    284273
    … …  
    295284                         * @return {void}
    296285                         */
    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' );
     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');
    302290                        });
    303291
    … …  
    315303                         * @return {void}
    316304                         */
    317                         $( '.hide-postbox-tog' ).on( 'click.postboxes', function() {
    318                                 var $el = $( this ),
     305                        $('.hide-postbox-tog').bind('click.postboxes', function() {
     306                                var $el = $(this),
    319307                                        boxId = $el.val(),
    320308                                        $postbox = $( '#' + boxId );
    … …  
    322310                                if ( $el.prop( 'checked' ) ) {
    323311                                        $postbox.show();
    324 
    325312                                        if ( $.isFunction( postboxes.pbshow ) ) {
    326313                                                postboxes.pbshow( boxId );
    … …  
    328315                                } else {
    329316                                        $postbox.hide();
    330 
    331317                                        if ( $.isFunction( postboxes.pbhide ) ) {
    332318                                                postboxes.pbhide( boxId );
    … …  
    334320                                }
    335321
    336                                 postboxes.save_state();
     322                                postboxes.save_state( page );
    337323                                postboxes._mark_area();
    338324
    … …  
    351337                         * @return {void}
    352338                         */
    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( {
     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({
    379370                                placeholder: 'sortable-placeholder',
    380371                                connectWith: '.meta-box-sortables',
    … …  
    382373                                handle: '.hndle',
    383374                                cursor: 'move',
    384                                 delay: ( $body.hasClass( 'mobile' ) ? 200 : 0 ),
     375                                delay: ( isMobile ? 200 : 0 ),
    385376                                distance: 2,
    386377                                tolerance: 'pointer',
    387                                 opacity: 0.65,
    388378                                forcePlaceholderSize: true,
    389                                 containment: '#wpwrap',
    390 
    391379                                helper: function( event, element ) {
    392380                                        /* `helper: 'clone'` is equivalent to `return element.clone();`
    … …  
    399387                                        return element.clone()
    400388                                                .find( ':input' )
    401                                                 .attr( 'name', function( i, currentName ) {
    402                                                         return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
    403                                                 } )
     389                                                        .attr( 'name', function( i, currentName ) {
     390                                                                return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
     391                                                        } )
    404392                                                .end();
    405393                                },
     394                                opacity: 0.65,
    406395                                start: function() {
    407                                         // Pretend the Screen Options tab exists.
    408                                         if ( ! hasScreenOptions ) {
    409                                                 $body.addClass( 'screen-options-open' );
    410                                         }
    411 
     396                                        $( 'body' ).addClass( 'is-dragging-metaboxes' );
    412397                                        // Refresh the cached positions of all the sortable items so that the min-height set while dragging works.
    413398                                        $( '.meta-box-sortables' ).sortable( 'refreshPositions' );
    … …  
    416401                                        var $el = $( this );
    417402
    418                                         if ( ! hasScreenOptions ) {
    419                                                 $body.removeClass( 'screen-options-open' );
    420                                         }
     403                                        $( 'body' ).removeClass( 'is-dragging-metaboxes' );
    421404
    422405                                        if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
    423                                                 $el.sortable( 'cancel' );
     406                                                $el.sortable('cancel');
    424407                                                return;
    425408                                        }
    426409
     410                                        postboxes.updateOrderButtonsProperties();
     411                                        postboxes.save_order(page);
     412                                },
     413                                receive: function(e,ui) {
     414                                        if ( 'dashboard_browser_nag' == ui.item[0].id )
     415                                                $(ui.sender).sortable('cancel');
     416
    427417                                        postboxes._mark_area();
    428                                         postboxes.save_order();
    429                                 },
    430                                 receive: function( event, ui ) {
    431                                         if ( 'dashboard_browser_nag' == ui.item[0].id ) {
    432                                                 $( ui.sender ).sortable( 'cancel' );
    433                                         }
    434 
    435418                                        $document.trigger( 'postbox-moved', ui.item );
    436419                                }
    437420                        });
    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(); } );
     421
     422                        if ( isMobile ) {
     423                                $(document.body).bind('orientationchange.postboxes', function(){ postboxes._pb_change(); });
    460424                                this._pb_change();
    461425                        }
    462426
    463                         // Set the "arrange" (up/down) buttons properties on page load...
     427                        this._mark_area();
     428
     429                        // Update the "move" buttons properties.
    464430                        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 );
     431                        $document.on( 'postbox-toggled', this.updateOrderButtonsProperties );
    468432
    469433                        // Set the handle buttons `aria-expanded` attribute initial value on page load.
    470                         $( '.postbox .handlediv' ).each( function () {
     434                        $handleButtons.each( function () {
    471435                                var $el = $( this );
    472436                                $el.attr( 'aria-expanded', ! $el.closest( '.postbox' ).hasClass( 'closed' ) );
    473437                        });
    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                         }
    481438                },
    482439
    … …  
    494451                 * @return {void}
    495452                 */
    496                 save_state : function() {
     453                save_state : function(page) {
    497454                        var closed, hidden;
    498455
    499456                        // Return on the nav-menus.php screen, see #35112.
    500                         if ( 'nav-menus' === postboxes.page ) {
     457                        if ( 'nav-menus' === page ) {
    501458                                return;
    502459                        }
    … …  
    505462                        hidden = $( '.postbox' ).filter( ':hidden' ).map( function() { return this.id; } ).get().join( ',' );
    506463
    507                         $.post( ajaxurl, {
     464                        $.post(ajaxurl, {
    508465                                action: 'closed-postboxes',
    509466                                closed: closed,
    510467                                hidden: hidden,
    511                                 closedpostboxesnonce: $( '#closedpostboxesnonce' ).val(),
    512                                 page: postboxes.page
     468                                closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
     469                                page: page
    513470                        });
    514471                },
    … …  
    523480                 * @memberof postboxes
    524481                 *
    525                  * @return {void}
    526                  */
    527                 save_order : function() {
    528                         var postVars = {
     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 = {
    529489                                action: 'meta-box-order',
    530                                 _ajax_nonce: $( '#meta-box-order-nonce' ).val(),
    531                                 page_columns: $( '.columns-prefs input:checked' ).val() || 0,
    532                                 page: postboxes.page
     490                                _ajax_nonce: $('#meta-box-order-nonce').val(),
     491                                page_columns: page_columns,
     492                                page: page
    533493                        };
    534494
    535                         $( '.meta-box-sortables' ).each( function() {
     495                        $('.meta-box-sortables').each( function() {
    536496                                postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
    537497                        } );
    … …  
    563523                 */
    564524                _mark_area : function() {
    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                         }
     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                        } );
    608567                },
    609568
    … …  
    621580                 * @return {void}
    622581                 */
    623                 _pb_edit : function( n ) {
    624                         var el = $( '.metabox-holder' ).get( 0 );
     582                _pb_edit : function(n) {
     583                        var el = $('.metabox-holder').get(0);
    625584
    626585                        if ( el ) {
    627                                 el.className = el.className.replace( /columns-\d+/, 'columns-' + n );
     586                                el.className = el.className.replace(/columns-\d+/, 'columns-' + n);
    628587                        }
    629588
    … …  
    656615                                case 90:
    657616                                case -90:
    658                                         if ( ! check.length || ! check.is( ':checked' ) ) {
    659                                                 this._pb_edit( 2 );
    660                                         }
     617                                        if ( !check.length || !check.is(':checked') )
     618                                                this._pb_edit(2);
    661619                                        break;
    662620                                case 0:
    663621                                case 180:
    664622                                        if ( $( '#poststuff' ).length ) {
    665                                                 this._pb_edit( 1 );
    666                                         } else if ( ! check.length || ! check.is( ':checked' ) ) {
    667                                                 this._pb_edit( 2 );
     623                                                this._pb_edit(1);
     624                                        } else {
     625                                                if ( !check.length || !check.is(':checked') )
     626                                                        this._pb_edit(2);
    668627                                        }
    669628                                        break;
    … …  
    693652        };
    694653
    695 }( jQuery ));
     654}(jQuery));

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

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

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

    r49309 r49325  
    19871987}
    19881988
    1989 .postbox-container .meta-box-sortables {
     1989.metabox-holder .postbox-container .meta-box-sortables {
    19901990        /* The jQuery UI Sortables need some initial height to work properly. */
    19911991        min-height: 1px;
    … …  
    20162016                min-height: 0;
    20172017        }
    2018 
    2019         #wpbody-content .metabox-holder .postbox-container .empty-container:after {
    2020                 display: none;
    2021         }
    20222018}
    20232019
    20242020.js .widget .widget-top,
    2025 .js.screen-options-open .postbox .hndle {
     2021.js .postbox .hndle {
    20262022        cursor: move;
    20272023}

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

    r49309 r49325  
    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;
    5254        margin: 0 8px 20px;
    5355}
    5456
    55 /* The following four selectors also apply on the Edit Post screen. */
    56 .screen-options-open .meta-box-sortables {
     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 {
    5764        outline: 3px dashed #606a73;
    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 {
     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 {
    6670        content: attr(data-emptystring);
    6771        margin: auto;
    … …  
    7983}
    8084
    81 .screen-options-open .postbox-container .empty-container:after {
    82         display: block;
    83 }
    8485
    8586/* @todo: this was originally in this section, but likely belongs elsewhere */
    … …  
    11181119        }
    11191120
    1120         .screen-options-open #dashboard-widgets .meta-box-sortables {
     1121        .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
    11211122                min-height: 100px;
    11221123        }
    … …  
    11741175                display: none;
    11751176        }
    1176 /*
     1177
    11771178        #dashboard-widgets .postbox-container .empty-container:after {
    11781179                display: block;
    11791180        }
    1180 */
    11811181}
    11821182
    … …  
    12061206                display: none;
    12071207        }
    1208 /*
     1208
    12091209        #dashboard-widgets .postbox-container .empty-container:after {
    12101210                display: block;
    12111211        }
    1212 */
    1213 }
    1214 
    1215 /* Always show the "Drag boxes here" CSS generated content on large screens.
     1212}
     1213
     1214/* Always show the "Drag boxes here" CSS generated content on large screens. */
    12161215@media only screen and (min-width: 1801px) {
    12171216        #dashboard-widgets .postbox-container .empty-container:after {
    … …  
    12191218        }
    12201219}
    1221 */
     1220
    12221221@media screen and (max-width: 870px) {
    12231222        .welcome-panel .welcome-panel-column,

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

    r49309 r49325  
    149149/* Post Screen */
    150150
    151 .screen-options-open .metabox-holder .postbox-container .meta-box-sortables {
     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;
    152163        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;
    163164}
    164165
    … …  
    15231524        }
    15241525
    1525         .screen-options-open.post-type-attachment #post-body .meta-box-sortables {
     1526        .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
    15261527                outline: none;
    15271528                min-height: 0;
    … …  
    15631564
    15641565        /* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */
    1565         .screen-options-open #poststuff #postbox-container-1 .empty-container,
    1566         .screen-options-open #poststuff #postbox-container-1 #side-sortables:empty,
    1567         .screen-options-open #poststuff #post-body.columns-2 #side-sortables,
    1568         .screen-options-open #poststuff #post-body.columns-2 .meta-box-sortables {
     1566        .is-dragging-metaboxes #poststuff #postbox-container-1 .empty-container,
     1567        .is-dragging-metaboxes #poststuff #postbox-container-1 #side-sortables:empty,
     1568        .is-dragging-metaboxes #poststuff #post-body.columns-2 #side-sortables,
     1569        .is-dragging-metaboxes #poststuff #post-body.columns-2 .meta-box-sortables {
    15691570                height: auto;
    15701571                min-height: 60px;

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

    r49283 r49325  
    13361336                                                echo '<div class="handle-actions hide-if-no-js">';
    13371337
    1338                                                 echo '<button type="button" class="handle-order-higher postbox-arrange-arrow hidden" aria-disabled="true" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
     1338                                                echo '<button type="button" class="handle-order-higher" aria-disabled="false" 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 postbox-arrange-arrow hidden" aria-disabled="true" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
     1348                                                echo '<button type="button" class="handle-order-lower" aria-disabled="false" 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.