WordPress.org
Get WordPress

Make WordPress Core

Changeset 48340


Ignore:
Timestamp:
07/06/2020 06:01:55 PM (4 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.