WordPress.org

Make WordPress Core

Ticket #49288: 49288.7.diff

File 49288.7.diff, 11.3 KB (added by afercia, 5 months 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 {
     
    19711931}
    19721932
    19731933.metabox-holder .postbox-container .empty-container {
    1974         border: 3px dashed #b4b9be;
     1934        outline: 3px dashed #b4b9be;
    19751935        height: 250px;
    19761936        position: relative;
    19771937}
    19781938
    1979 .metabox-holder .postbox-container .empty-container:after {
    1980         content: attr(data-emptystring);
    1981         margin: auto;
    1982         position: absolute;
    1983         top: 0;
    1984         left: 0;
    1985         bottom: 0;
    1986         right: 0;
    1987         height: 1em;
    1988         width: 200px;
    1989         text-align: center;
    1990         color: #ccc;
    1991         font-size: 18px;
    1992         display: none;
    1993 }
    1994 
    1995 .metabox-holder.columns-1 .postbox-container .empty-container,
    1996 .columns-2 #postbox-container-3 .empty-container,
    1997 .columns-2 #postbox-container-4 .empty-container,
    1998 .columns-3 #postbox-container-4 .empty-container {
    1999         border: 0 none;
    2000         height: 0;
    2001         min-height: 0;
    2002 }
    2003 
    20041939#post-body-content {
    20051940        width: 100%;
    20061941        min-width: 463px;
     
    20201955/* one column on the dash */
    20211956@media only screen and (max-width: 799px) {
    20221957        #wpbody-content .metabox-holder .postbox-container .empty-container {
    2023                 border: 0 none;
     1958                outline: none;
    20241959                height: 0;
    20251960                min-height: 0;
    20261961        }
  • 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        height: auto;
     162        outline: none;
     163}
     164
     165/* Only highlight drop zones when dragging and only in the 2 columns layout. */
     166.is-dragging-metaboxes #post-body.columns-2 #side-sortables,
     167.is-dragging-metaboxes #post-body #normal-sortables,
     168.is-dragging-metaboxes #post-body #advanced-sortables {
     169        outline: 3px dashed #606a73;
     170        /* Prevent margin on the child from collapsing with margin on the parent. */
     171        display: flow-root;
     172        /*
     173         * This min-height is meant to limit jumpiness while dragging. It's equivalent
     174         * to the minimum height of the sortable-placeholder which is given by the height
     175         * of a collapsed post box (36px + 1px top and bottom borders) + the placeholder
     176         * bottom margin (20px) + 2 additional pixels to compensate browsers rounding.
     177         */
     178        min-height: 60px;
     179        margin-bottom: 20px;
     180}
     181
    154182.postbox {
    155183        position: relative;
    156184        min-width: 255px;
     
    14531481        }
    14541482}
    14551483
    1456 /* one column on the attachment editor screen */
     1484/*
     1485 * The edit attachment screen auto-switches to one column layout when the
     1486 * viewport is smaller than 1200 pixels.
     1487 */
    14571488@media only screen and (max-width: 1200px) {
    14581489        .post-type-attachment #poststuff {
    14591490                min-width: 0;
     
    14701501
    14711502        .post-type-attachment #poststuff #postbox-container-1 .empty-container,
    14721503        .post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty {
    1473                 border: 0 none;
     1504                outline: none;
    14741505                height: 0;
    14751506                min-height: 0;
    14761507        }
     
    14801511                width: auto;
    14811512        }
    14821513
     1514        .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
     1515                outline: none;
     1516                min-height: 0;
     1517                margin-bottom: 0;
     1518        }
     1519
    14831520        /* hide the radio buttons for column prefs */
    14841521        .post-type-attachment .screen-layout,
    14851522        .post-type-attachment .columns-prefs {
     
    15041541
    15051542        #poststuff #postbox-container-1 .empty-container,
    15061543        #poststuff #postbox-container-1 #side-sortables:empty {
    1507                 border: 0 none;
     1544                outline: none;
    15081545                height: 0;
    15091546                min-height: 0;
    15101547        }
  • src/wp-includes/script-loader.php

     
    12451245                $scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", array( 'jquery' ), false, 1 );
    12461246
    12471247                $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array( 'jquery-ui-sortable' ), false, 1 );
    1248                 did_action( 'init' ) && $scripts->localize(
    1249                         'postbox',
    1250                         'postBoxL10n',
    1251                         array(
    1252                                 'postBoxEmptyString' => __( 'Drag boxes here' ),
    1253                         )
    1254                 );
     1248                $scripts->set_translations( 'postbox' );
    12551249
    12561250                $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'tags-suggest' ), false, 1 );
    12571251