WordPress.org
Get WordPress

Make WordPress Core

Changeset 48340


Ignore:
Timestamp:
07/06/2020 06:01:55 PM (6 years ago)
Author:
afercia
Message:

Accessibility: Administration: Improve the sortable postboxes areas on the Dashboard and Classic Editor pages.

  • makes the postboxes areas in the Dashboard visible also on large screens
  • uses a more meaningful text when all postboxes areas are empty instead of "Drag boxes here"
  • restores the ability to drag boxes to the "advanced" area in the Classic Editor page
  • makes the postboxes areas in the Classic Editor page visible while dragging so that users have a clue what the available areas are
  • improves the color contrast of the postboxes areas while dragging
  • uses wp.i18n for translatable strings in wp-admin/js/postbox.js

Props xkon, karmatosed, audrasjb, ocean90, joedolson, afercia, azaozz.
See #20491.
Fixes #49288, #47541.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r48129 r48340  
    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        /**
    … …  
    236237                                },
    237238                                opacity: 0.65,
     239                                start: function() {
     240                                        $( 'body' ).addClass( 'is-dragging-metaboxes' );
     241                                },
    238242                                stop: function() {
    239243                                        var $el = $( this );
     244
     245                                        $( 'body' ).removeClass( 'is-dragging-metaboxes' );
    240246
    241247                                        if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
    … …  
    243249                                                return;
    244250                                        }
    245 
    246251                                        postboxes.save_order(page);
    247252                                },
    … …  
    346351                 */
    347352                _mark_area : function() {
    348                         var visible = $('div.postbox:visible').length, side = $('#post-body #side-sortables');
    349 
    350                         $( '#dashboard-widgets .meta-box-sortables:visible' ).each( function() {
     353                        var visibleSortables = $( '#dashboard-widgets .meta-box-sortables:visible, #post-body .meta-box-sortables:visible' ),
     354                                areAllVisibleSortablesEmpty = true;
     355
     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);
    359                                 }
    360                         });
    361 
    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');
    367                         }
     365                                }
     366                        });
     367
     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;
     384                        }
     385
     386                        visibleSortables.each( function() {
     387                                if ( $( this ).hasClass( 'empty-container' ) ) {
     388                                        $( this ).attr( 'data-emptyString', emptySortableText );
     389                                }
     390                        } );
    368391                },
    369392

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

    r48316 r48340  
    2828        width: 100%;
    2929        overflow: visible;
    30 }
    31 
    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;
    7030}
    7131
    … …  
    19841944
    19851945.metabox-holder .postbox-container .empty-container {
    1986         border: 3px dashed #b4b9be;
     1946        outline: 3px dashed #b4b9be;
    19871947        height: 250px;
    19881948        position: relative;
    1989 }
    1990 
    1991 .metabox-holder .postbox-container .empty-container:after {
    1992         content: attr(data-emptystring);
    1993         margin: auto;
    1994         position: absolute;
    1995         top: 0;
    1996         left: 0;
    1997         bottom: 0;
    1998         right: 0;
    1999         height: 1em;
    2000         width: 200px;
    2001         text-align: center;
    2002         color: #ccc;
    2003         font-size: 18px;
    2004         display: none;
    2005 }
    2006 
    2007 .metabox-holder.columns-1 .postbox-container .empty-container,
    2008 .columns-2 #postbox-container-3 .empty-container,
    2009 .columns-2 #postbox-container-4 .empty-container,
    2010 .columns-3 #postbox-container-4 .empty-container {
    2011         border: 0 none;
    2012         height: 0;
    2013         min-height: 0;
    20141949}
    20151950
    … …  
    20331968@media only screen and (max-width: 799px) {
    20341969        #wpbody-content .metabox-holder .postbox-container .empty-container {
    2035                 border: 0 none;
     1970                outline: none;
    20361971                height: 0;
    20371972                min-height: 0;

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

    r48146 r48340  
    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 }
     53        margin: 0 8px 20px;
     54}
     55
     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
    5479
    5580/* @todo: this was originally in this section, but likely belongs elsewhere */
    … …  
    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
    … …  
    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
    … …  
    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
    … …  
    11271166        }
    11281167
    1129         .metabox-holder .postbox-container .empty-container:after {
     1168        #dashboard-widgets .postbox-container .empty-container:after {
    11301169                display: block;
    11311170        }
    … …  
    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
    … …  
    11571197        }
    11581198
    1159         .metabox-holder .postbox-container .empty-container:after {
     1199        #dashboard-widgets .postbox-container .empty-container:after {
     1200                display: block;
     1201        }
     1202}
     1203
     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 {
    11601207                display: block;
    11611208        }

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

    r48234 r48340  
    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;
     155}
     156
     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;
    152181}
    153182
    … …  
    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 {
    … …  
    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;
    … …  
    14791511                min-height: 0;
    14801512                width: auto;
     1513        }
     1514
     1515        .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
     1516                outline: none;
     1517                min-height: 0;
     1518                margin-bottom: 0;
    14811519        }
    14821520
    … …  
    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;

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

    r48323 r48340  
    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 );
Note: See TracChangeset for help on using the changeset viewer.