WordPress.org
Get WordPress

Make WordPress Core

Ticket #49288: 49288.8.diff

File 49288.8.diff, 11.4 KB (added by afercia, 4 years ago)

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

     
    77 * @output wp-admin/js/postbox.js
    88 */
    99
    10 /* global ajaxurl, postBoxL10n, postboxes */
     10/* global ajaxurl, postboxes */
    1111
    1212(function($) {
    13         var $document = $( document );
     13        var $document = $( document ),
     14                __ = wp.i18n.__;
    1415
    1516        /**
    1617         * This object contains all function to handle the behaviour of the post boxes. The post boxes are the boxes you see
    … …  
    235236                                                .end();
    236237                                },
    237238                                opacity: 0.65,
     239                                start: function() {
     240                                        $( 'body' ).addClass( 'is-dragging-metaboxes' );
     241                                },
    238242                                stop: function() {
    239243                                        var $el = $( this );
    240244
     245                                        $( 'body' ).removeClass( 'is-dragging-metaboxes' );
     246
    241247                                        if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
    242248                                                $el.sortable('cancel');
    243249                                                return;
    244250                                        }
    245 
    246251                                        postboxes.save_order(page);
    247252                                },
    248253                                receive: function(e,ui) {
    … …  
    345350                 * @return {void}
    346351                 */
    347352                _mark_area : function() {
    348                         var visible = $('div.postbox:visible').length, side = $('#post-body #side-sortables');
     353                        var visibleSortables = $( '#dashboard-widgets .meta-box-sortables:visible, #post-body .meta-box-sortables:visible' ),
     354                                areAllVisibleSortablesEmpty = true;
    349355
    350                         $( '#dashboard-widgets .meta-box-sortables:visible' ).each( function() {
     356                        visibleSortables.each( function() {
    351357                                var t = $(this);
    352358
    353                                 if ( visible == 1 || t.children('.postbox:visible').length ) {
     359                                if ( t.children('.postbox:visible').length ) {
    354360                                        t.removeClass('empty-container');
     361                                        areAllVisibleSortablesEmpty = false;
    355362                                }
    356363                                else {
    357364                                        t.addClass('empty-container');
    358                                         t.attr('data-emptyString', postBoxL10n.postBoxEmptyString);
    359365                                }
    360366                        });
    361367
    362                         if ( side.length ) {
    363                                 if ( side.children('.postbox:visible').length )
    364                                         side.removeClass('empty-container');
    365                                 else if ( $('#postbox-container-1').css('width') == '280px' )
    366                                         side.addClass('empty-container');
     368                        postboxes.updateEmptySortablesText( visibleSortables, areAllVisibleSortablesEmpty );
     369                },
     370
     371                /**
     372                 * Updates the text for the empty sortable areas on the Dashboard.
     373                 *
     374                 * @since 5.5.0
     375                 *
     376                 * @return {void}
     377                 */
     378                updateEmptySortablesText: function( visibleSortables, areAllVisibleSortablesEmpty ) {
     379                        var isDashboard = $( '#dashboard-widgets' ).length,
     380                                emptySortableText = areAllVisibleSortablesEmpty ?  __( 'Add boxes from the Screen Options menu' ) : __( 'Drag boxes here' );
     381
     382                        if ( ! isDashboard ) {
     383                                return;
    367384                        }
     385
     386                        visibleSortables.each( function() {
     387                                if ( $( this ).hasClass( 'empty-container' ) ) {
     388                                        $( this ).attr( 'data-emptyString', emptySortableText );
     389                                }
     390                        } );
    368391                },
    369392
    370393                /**

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

     
    2929        overflow: visible;
    3030}
    3131
    32 /* inner 2 column liquid layout */
    33 
    34 .inner-sidebar {
    35         float: right;
    36         clear: right;
    37         display: none;
    38         width: 281px;
    39         position: relative;
    40 }
    41 
    42 .columns-2 .inner-sidebar {
    43         margin-right: auto;
    44         width: 286px;
    45         display: block;
    46 }
    47 
    48 .inner-sidebar #side-sortables,
    49 .columns-2 .inner-sidebar #side-sortables {
    50         min-height: 300px;
    51         width: 280px;
    52         padding: 0;
    53 }
    54 
    55 .has-right-sidebar .inner-sidebar {
    56         display: block;
    57 }
    58 
    59 .has-right-sidebar #post-body {
    60         float: left;
    61         clear: left;
    62         width: 100%;
    63         margin-right: -2000px;
    64 }
    65 
    66 .has-right-sidebar #post-body-content {
    67         margin-right: 300px;
    68         float: none;
    69         width: auto;
    70 }
    71 
    7232/* 2 columns main area */
    7333
    7434#col-left {
    … …  
    19871947}
    19881948
    19891949.metabox-holder .postbox-container .empty-container {
    1990         border: 3px dashed #b4b9be;
     1950        outline: 3px dashed #b4b9be;
    19911951        height: 250px;
    19921952        position: relative;
    19931953}
    19941954
    1995 .metabox-holder .postbox-container .empty-container:after {
    1996         content: attr(data-emptystring);
    1997         margin: auto;
    1998         position: absolute;
    1999         top: 0;
    2000         left: 0;
    2001         bottom: 0;
    2002         right: 0;
    2003         height: 1em;
    2004         width: 200px;
    2005         text-align: center;
    2006         color: #ccc;
    2007         font-size: 18px;
    2008         display: none;
    2009 }
    2010 
    2011 .metabox-holder.columns-1 .postbox-container .empty-container,
    2012 .columns-2 #postbox-container-3 .empty-container,
    2013 .columns-2 #postbox-container-4 .empty-container,
    2014 .columns-3 #postbox-container-4 .empty-container {
    2015         border: 0 none;
    2016         height: 0;
    2017         min-height: 0;
    2018 }
    2019 
    20201955#post-body-content {
    20211956        width: 100%;
    20221957        min-width: 463px;
    … …  
    20361971/* one column on the dash */
    20371972@media only screen and (max-width: 799px) {
    20381973        #wpbody-content .metabox-holder .postbox-container .empty-container {
    2039                 border: 0 none;
     1974                outline: none;
    20401975                height: 0;
    20411976                min-height: 0;
    20421977        }

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

     
    4848}
    4949
    5050#dashboard-widgets .meta-box-sortables {
    51         margin: 0 8px;
     51        /* Required min-height to make the jQuery UI Sortable drop zone work. */
    5252        min-height: 100px;
     53        margin: 0 8px 20px;
    5354}
    5455
     56/* Only highlight drop zones when dragging and only in the 2 columns layout. */
     57.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
     58        outline: 3px dashed #606a73;
     59        /* Prevent margin on the child from collapsing with margin on the parent. */
     60        display: flow-root;
     61}
     62
     63#dashboard-widgets .postbox-container .empty-container:after {
     64        content: attr(data-emptystring);
     65        margin: auto;
     66        position: absolute;
     67        top: 50%;
     68        left: 0;
     69        right: 0;
     70        transform: translateY( -50% );
     71        padding: 0 2em;
     72        text-align: center;
     73        color: #606a73;
     74        font-size: 16px;
     75        line-height: 1.5;
     76        display: none;
     77}
     78
     79
    5580/* @todo: this was originally in this section, but likely belongs elsewhere */
    5681#the-comment-list td.comment p.comment-author {
    5782        margin-top: 0;
    … …  
    10781103        #wpbody-content #dashboard-widgets .postbox-container {
    10791104                width: 100%;
    10801105        }
     1106
     1107        #dashboard-widgets .meta-box-sortables {
     1108                min-height: 0;
     1109        }
     1110
     1111        .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
     1112                min-height: 100px;
     1113        }
     1114
     1115        #dashboard-widgets .meta-box-sortables.empty-container {
     1116                margin-bottom: 0;
     1117        }
    10811118}
    10821119
    10831120/* two columns on the dash, but keep the setting if one is selected */
    … …  
    10951132
    10961133        #dashboard-widgets #postbox-container-3 .empty-container,
    10971134        #dashboard-widgets #postbox-container-4 .empty-container {
    1098                 border: 0 none;
     1135                outline: none;
    10991136                height: 0;
    11001137                min-height: 0;
     1138                margin-bottom: 0;
    11011139        }
    11021140
    11031141        #dashboard-widgets #postbox-container-3 .empty-container:after,
    … …  
    11091147                width: 100%;
    11101148        }
    11111149
    1112         #wpbody #wpbody-content .metabox-holder.columns-1 .postbox-container .empty-container {
    1113                 border: 0 none;
     1150        #wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container {
     1151                outline: none;
    11141152                height: 0;
    11151153                min-height: 0;
     1154                margin-bottom: 0;
    11161155        }
    11171156
    11181157        /* show the radio buttons for column prefs only for one or two columns */
    … …  
    11261165                display: none;
    11271166        }
    11281167
    1129         .metabox-holder .postbox-container .empty-container:after {
     1168        #dashboard-widgets .postbox-container .empty-container:after {
    11301169                display: block;
    11311170        }
    11321171}
    … …  
    11471186        }
    11481187
    11491188        #dashboard-widgets #postbox-container-4 .empty-container {
    1150                 border: 0 none;
     1189                outline: none;
    11511190                height: 0;
    11521191                min-height: 0;
     1192                margin-bottom: 0;
    11531193        }
    11541194
    11551195        #dashboard-widgets #postbox-container-4 .empty-container:after {
    … …  
    11561196                display: none;
    11571197        }
    11581198
    1159         .metabox-holder .postbox-container .empty-container:after {
     1199        #dashboard-widgets .postbox-container .empty-container:after {
    11601200                display: block;
    11611201        }
    11621202}
    11631203
     1204/* Always show the "Drag boxes here" CSS generated content on large screens. */
     1205@media only screen and (min-width: 1801px) {
     1206        #dashboard-widgets .postbox-container .empty-container:after {
     1207                display: block;
     1208        }
     1209}
     1210
    11641211@media screen and (max-width: 870px) {
    11651212        .welcome-panel .welcome-panel-column,
    11661213        .welcome-panel .welcome-panel-column:first-child {

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

     
    147147}
    148148
    149149/* Post Screen */
    150 #post-body #normal-sortables {
    151         min-height: 50px;
     150
     151/* Only target the sortables in the post screen excluding the ones in the Dashboard. */
     152#post-body .meta-box-sortables {
     153        /* Required min-height to make the jQuery UI Sortable drop zone work. */
     154        min-height: 1px;
    152155}
    153156
     157/* Resets height and outline inherited from common.css. */
     158#post-body.columns-1 #side-sortables.empty-container,
     159#post-body #normal-sortables.empty-container,
     160#post-body #advanced-sortables.empty-container {
     161        /* Sortables need some initial height to work correctly. */
     162        height: 1px;
     163        outline: none;
     164}
     165
     166/* Only highlight drop zones when dragging and only in the 2 columns layout. */
     167.is-dragging-metaboxes #post-body.columns-2 #side-sortables,
     168.is-dragging-metaboxes #post-body #normal-sortables,
     169.is-dragging-metaboxes #post-body #advanced-sortables {
     170        outline: 3px dashed #606a73;
     171        /* Prevent margin on the child from collapsing with margin on the parent. */
     172        display: flow-root;
     173        /*
     174         * This min-height is meant to limit jumpiness while dragging. It's equivalent
     175         * to the minimum height of the sortable-placeholder which is given by the height
     176         * of a collapsed post box (36px + 1px top and bottom borders) + the placeholder
     177         * bottom margin (20px) + 2 additional pixels to compensate browsers rounding.
     178         */
     179        min-height: 60px;
     180        margin-bottom: 20px;
     181}
     182
    154183.postbox {
    155184        position: relative;
    156185        min-width: 255px;
    … …  
    14531482        }
    14541483}
    14551484
    1456 /* one column on the attachment editor screen */
     1485/*
     1486 * The edit attachment screen auto-switches to one column layout when the
     1487 * viewport is smaller than 1200 pixels.
     1488 */
    14571489@media only screen and (max-width: 1200px) {
    14581490        .post-type-attachment #poststuff {
    14591491                min-width: 0;
    … …  
    14701502
    14711503        .post-type-attachment #poststuff #postbox-container-1 .empty-container,
    14721504        .post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty {
    1473                 border: 0 none;
     1505                outline: none;
    14741506                height: 0;
    14751507                min-height: 0;
    14761508        }
    … …  
    14801512                width: auto;
    14811513        }
    14821514
     1515        .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
     1516                outline: none;
     1517                min-height: 0;
     1518                margin-bottom: 0;
     1519        }
     1520
    14831521        /* hide the radio buttons for column prefs */
    14841522        .post-type-attachment .screen-layout,
    14851523        .post-type-attachment .columns-prefs {
    … …  
    15041542
    15051543        #poststuff #postbox-container-1 .empty-container,
    15061544        #poststuff #postbox-container-1 #side-sortables:empty {
    1507                 border: 0 none;
     1545                outline: none;
    15081546                height: 0;
    15091547                min-height: 0;
    15101548        }

  • src/wp-includes/script-loader.php

     
    12401240                $scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", array( 'jquery' ), false, 1 );
    12411241
    12421242                $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array( 'jquery-ui-sortable' ), false, 1 );
    1243                 did_action( 'init' ) && $scripts->localize(
    1244                         'postbox',
    1245                         'postBoxL10n',
    1246                         array(
    1247                                 'postBoxEmptyString' => __( 'Drag boxes here' ),
    1248                         )
    1249                 );
     1243                $scripts->set_translations( 'postbox' );
    12501244
    12511245                $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'tags-suggest' ), false, 1 );
    12521246