<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[49179] trunk/src: Fix and improve arranging of postboxes/metaboxes:</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/49179">49179</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/49179","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>azaozz</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2020-10-17 09:58:34 +0000 (Sat, 17 Oct 2020)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Fix and improve arranging of postboxes/metaboxes:
- Enable arranging only when the Screen Options tab is open.
- Prevent accidental/unintended dragging. Seen it happen mostly on laptops when using the mousepad/trackpad.
- Improve discoverability and usefulness by always showing the "drop zones" outline when postboxes are draggable/arrangeable.
- Add some (brief) explanation to the Screen Options tab helping the user understand what options are available and how to change them. This is especially helpful for screen reader users to give an idea how to use the screen options and what to expect.
- Fix/enhance some of the code in `postbox.js` and make it coding standards compliant.
See <a href="https://core.trac.wordpress.org/ticket/50699">#50699</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcjs_enqueuesadminpostboxjs">trunk/src/js/_enqueues/admin/postbox.js</a></li>
<li><a href="#trunksrcjs_enqueueswpdashboardjs">trunk/src/js/_enqueues/wp/dashboard.js</a></li>
<li><a href="#trunksrcwpadmincsscommoncss">trunk/src/wp-admin/css/common.css</a></li>
<li><a href="#trunksrcwpadmincssdashboardcss">trunk/src/wp-admin/css/dashboard.css</a></li>
<li><a href="#trunksrcwpadmincsseditcss">trunk/src/wp-admin/css/edit.css</a></li>
<li><a href="#trunksrcwpadminincludesclasswpscreenphp">trunk/src/wp-admin/includes/class-wp-screen.php</a></li>
<li><a href="#trunksrcwpadminincludestemplatephp">trunk/src/wp-admin/includes/template.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcjs_enqueuesadminpostboxjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/_enqueues/admin/postbox.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/_enqueues/admin/postbox.js 2020-10-17 01:11:58 UTC (rev 49178)
+++ trunk/src/js/_enqueues/admin/postbox.js 2020-10-17 09:58:34 UTC (rev 49179)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -9,8 +9,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* global ajaxurl, postboxes */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-(function($) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+( function( $ ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> var $document = $( document ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $body = $( 'body' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> __ = wp.i18n.__;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -63,7 +64,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( postboxes.page !== 'press-this' ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- postboxes.save_state( postboxes.page );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ postboxes.save_state();
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( id ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -118,8 +119,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Move a postbox up.
</del><span class="cx" style="display: block; padding: 0 10px"> if ( button.hasClass( 'handle-order-higher' ) ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Move a postbox up.
</ins><span class="cx" style="display: block; padding: 0 10px"> // If the box is first within a sortable area, move it to the previous sortable area.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( 0 === postboxWithinSortablesIndex ) {
</span><span class="cx" style="display: block; padding: 0 10px"> postboxes.handleOrderBetweenSortables( 'previous', button, postbox );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -129,11 +130,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> postbox.prevAll( '.postbox:visible' ).eq( 0 ).before( postbox );
</span><span class="cx" style="display: block; padding: 0 10px"> button.focus();
</span><span class="cx" style="display: block; padding: 0 10px"> postboxes.updateOrderButtonsProperties();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- postboxes.save_order( postboxes.page );
- }
-
- // Move a postbox down.
- if ( button.hasClass( 'handle-order-lower' ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ postboxes.save_order();
+ } else if ( button.hasClass( 'handle-order-lower' ) ) {
+ // Move a postbox down.
</ins><span class="cx" style="display: block; padding: 0 10px"> // If the box is last within a sortable area, move it to the next sortable area.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( postboxWithinSortablesIndex + 1 === postboxesWithinSortablesCount ) {
</span><span class="cx" style="display: block; padding: 0 10px"> postboxes.handleOrderBetweenSortables( 'next', button, postbox );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -143,9 +142,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> postbox.nextAll( '.postbox:visible' ).eq( 0 ).after( postbox );
</span><span class="cx" style="display: block; padding: 0 10px"> button.focus();
</span><span class="cx" style="display: block; padding: 0 10px"> postboxes.updateOrderButtonsProperties();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- postboxes.save_order( postboxes.page );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ postboxes.save_order();
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -191,10 +189,25 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> postboxes._mark_area();
</span><span class="cx" style="display: block; padding: 0 10px"> button.focus();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- postboxes.updateOrderButtonsProperties();
- postboxes.save_order( postboxes.page );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ postboxes.save_order();
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ showArrangeArrows: function() {
+ $( '.postbox-arrange-arrow' )
+ .attr( 'aria-disabled', 'false' )
+ .removeClass( 'hidden' );
+
+ postboxes._mark_area();
+ },
+
+ hideArrangeArrows: function() {
+ $( '.postbox-arrange-arrow' )
+ .attr( 'aria-disabled', 'true' )
+ .addClass( 'hidden' );
+
+ postboxes._mark_area();
+ },
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Update the move buttons properties depending on the postbox position.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -203,40 +216,38 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @return {void}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> updateOrderButtonsProperties: function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var firstSortablesId = $( '.meta-box-sortables:visible:first' ).attr( 'id' ),
- lastSortablesId = $( '.meta-box-sortables:visible:last' ).attr( 'id' ),
- firstPostbox = $( '.postbox:visible:first' ),
- lastPostbox = $( '.postbox:visible:last' ),
- firstPostboxId = firstPostbox.attr( 'id' ),
- lastPostboxId = lastPostbox.attr( 'id' ),
- firstPostboxSortablesId = firstPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
- lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
- moveUpButtons = $( '.handle-order-higher' ),
- moveDownButtons = $( '.handle-order-lower' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var elements = $( '.postbox:visible' ),
+ containers = $( '.meta-box-sortables:visible' )
+ .not( '.unused-container' )
+ .filter( function( i, container ) {
+ if ( i > 0 && container.clientHeight === 0 ) {
+ return false;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Enable all buttons as a reset first.
- moveUpButtons
- .attr( 'aria-disabled', 'false' )
- .removeClass( 'hidden' );
- moveDownButtons
- .attr( 'aria-disabled', 'false' )
- .removeClass( 'hidden' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return true;
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // When there's only one "sortables" area (e.g. in the block editor) and only one visible postbox, hide the buttons.
- if ( firstSortablesId === lastSortablesId && firstPostboxId === lastPostboxId ) {
- moveUpButtons.addClass( 'hidden' );
- moveDownButtons.addClass( 'hidden' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // When there's only one "sortables" area (e.g. in the block editor)
+ // and only one visible postbox, hide the buttons.
+ if ( containers.length === 1 && elements.length === 1 ) {
+ $( '.postbox-arrange-arrow' ).addClass( 'hidden' ).attr( 'aria-disabled', 'true' );
+ return;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Set an aria-disabled=true attribute on the first visible "move" buttons.
- if ( firstSortablesId === firstPostboxSortablesId ) {
- $( firstPostbox ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Reset.
+ if ( $body.hasClass( 'screen-options-open' ) ) {
+ $( '.postbox-arrange-arrow' ).removeClass( 'hidden' ).attr( 'aria-disabled', 'false' );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Set an aria-disabled=true attribute on the last visible "move" buttons.
- if ( lastSortablesId === lastPostboxSortablesId ) {
- $( '.postbox:visible .handle-order-lower' ).last().attr( 'aria-disabled', 'true' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( elements.first().parent()[0] === containers.first()[0] ) {
+ // Set an aria-disabled=true attribute on the first visible "move higher" buttons.
+ elements.first().find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ if ( elements.last().parent()[0] === containers.last()[0] ) {
+ // Set an aria-disabled=true attribute on the last visible "move lower" buttons.
+ elements.last().find( '.handle-order-lower' ).attr( 'aria-disabled', 'true' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -252,9 +263,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Function} args.pbhide A callback that is called when a postbox closes.
</span><span class="cx" style="display: block; padding: 0 10px"> * @return {void}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- add_postbox_toggles : function (page, args) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ add_postbox_toggles: function ( page, args ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $orderButtons = $( '.postbox .postbox-arrange-arrow' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> this.page = page;
</span><span class="cx" style="display: block; padding: 0 10px"> this.init( page, args );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -267,8 +278,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 2.7.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $('.postbox .hndle a').click( function(e) {
- e.stopPropagation();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '.postbox .hndle a' ).on( 'click', function( event ) {
+ event.stopPropagation();
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -283,10 +294,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @return {void}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( '.postbox a.dismiss' ).on( 'click.postboxes', function( e ) {
- var hide_id = $(this).parents('.postbox').attr('id') + '-hide';
- e.preventDefault();
- $( '#' + hide_id ).prop('checked', false).triggerHandler('click');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '.postbox a.dismiss' ).on( 'click.postboxes', function( event ) {
+ var hide_id = $( this ).parents( '.postbox' ).attr( 'id' ) + '-hide';
+
+ event.preventDefault();
+ $( '#' + hide_id ).prop( 'checked', false ).triggerHandler( 'click' );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -302,24 +314,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @return {void}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $('.hide-postbox-tog').bind('click.postboxes', function() {
- var $el = $(this),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '.hide-postbox-tog' ).on( 'click.postboxes', function() {
+ var $el = $( this ),
</ins><span class="cx" style="display: block; padding: 0 10px"> boxId = $el.val(),
</span><span class="cx" style="display: block; padding: 0 10px"> $postbox = $( '#' + boxId );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $el.prop( 'checked' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $postbox.show();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( $.isFunction( postboxes.pbshow ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> postboxes.pbshow( boxId );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> $postbox.hide();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( $.isFunction( postboxes.pbhide ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> postboxes.pbhide( boxId );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- postboxes.save_state( page );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ postboxes.save_state();
</ins><span class="cx" style="display: block; padding: 0 10px"> postboxes._mark_area();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -336,46 +350,44 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @return {void}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $('.columns-prefs input[type="radio"]').bind('click.postboxes', function(){
- var n = parseInt($(this).val(), 10);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '.columns-prefs input[type="radio"]' ).on( 'click.postboxes', function() {
+ var number = parseInt( $( this ).val(), 10 );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( n ) {
- postboxes._pb_edit(n);
- postboxes.save_order( page );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( number ) {
+ postboxes._pb_edit( number );
+ postboxes.save_order();
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Enable dragging/arranging of postboxes and show drop placeholders when Screen Options tab is open.
+ // If there is no Screen Options tab on the screen, dragging/arranging is enabled on page load.
+ $document.on( 'screen:options:open', function() {
+ $body.addClass( 'screen-options-open' );
+ postboxes.initializeSortable();
+ postboxes.showArrangeArrows();
+ } ).on( 'screen:options:close', function() {
+ $body.removeClass( 'screen-options-open' );
+ $( '.meta-box-sortables' ).sortable( 'destroy' );
+ postboxes.hideArrangeArrows()
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /**
- * Initializes all the postboxes, mainly their sortable behaviour.
- *
- * @since 2.7.0
- *
- * @memberof postboxes
- *
- * @param {string} page The page we are currently on.
- * @param {Object} [args={}] The arguments for the postbox initializer.
- * @param {Function} args.pbshow A callback that is called when a postbox opens.
- * @param {Function} args.pbhide A callback that is called when a postbox
- * closes.
- *
- * @return {void}
- */
- init : function(page, args) {
- var isMobile = $( document.body ).hasClass( 'mobile' ),
- $handleButtons = $( '.postbox .handlediv' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ initializeSortable: function() {
+ var hasScreenOptions = $document.find( '#screen-options-wrap' ).length > 0;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $.extend( this, args || {} );
- $('.meta-box-sortables').sortable({
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '.meta-box-sortables' ).sortable( {
</ins><span class="cx" style="display: block; padding: 0 10px"> placeholder: 'sortable-placeholder',
</span><span class="cx" style="display: block; padding: 0 10px"> connectWith: '.meta-box-sortables',
</span><span class="cx" style="display: block; padding: 0 10px"> items: '.postbox',
</span><span class="cx" style="display: block; padding: 0 10px"> handle: '.hndle',
</span><span class="cx" style="display: block; padding: 0 10px"> cursor: 'move',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- delay: ( isMobile ? 200 : 0 ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ delay: ( $body.hasClass( 'mobile' ) ? 200 : 0 ),
</ins><span class="cx" style="display: block; padding: 0 10px"> distance: 2,
</span><span class="cx" style="display: block; padding: 0 10px"> tolerance: 'pointer',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ opacity: 0.65,
</ins><span class="cx" style="display: block; padding: 0 10px"> forcePlaceholderSize: true,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ containment: '#wpwrap',
+
</ins><span class="cx" style="display: block; padding: 0 10px"> helper: function( event, element ) {
</span><span class="cx" style="display: block; padding: 0 10px"> /* `helper: 'clone'` is equivalent to `return element.clone();`
</span><span class="cx" style="display: block; padding: 0 10px"> * Cloning a checked radio and then inserting that clone next to the original
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -386,14 +398,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> return element.clone()
</span><span class="cx" style="display: block; padding: 0 10px"> .find( ':input' )
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .attr( 'name', function( i, currentName ) {
- return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
- } )
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .attr( 'name', function( i, currentName ) {
+ return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
+ } )
</ins><span class="cx" style="display: block; padding: 0 10px"> .end();
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- opacity: 0.65,
</del><span class="cx" style="display: block; padding: 0 10px"> start: function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( 'body' ).addClass( 'is-dragging-metaboxes' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Pretend the Screen Options tab exists.
+ if ( ! hasScreenOptions ) {
+ $body.addClass( 'screen-options-open' );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Refresh the cached positions of all the sortable items so that the min-height set while dragging works.
</span><span class="cx" style="display: block; padding: 0 10px"> $( '.meta-box-sortables' ).sortable( 'refreshPositions' );
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -400,41 +415,69 @@
</span><span class="cx" style="display: block; padding: 0 10px"> stop: function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var $el = $( this );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( 'body' ).removeClass( 'is-dragging-metaboxes' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! hasScreenOptions ) {
+ $body.removeClass( 'screen-options-open' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $el.sortable('cancel');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $el.sortable( 'cancel' );
</ins><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- postboxes.updateOrderButtonsProperties();
- postboxes.save_order(page);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ postboxes._mark_area();
+ postboxes.save_order();
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- receive: function(e,ui) {
- if ( 'dashboard_browser_nag' == ui.item[0].id )
- $(ui.sender).sortable('cancel');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ receive: function( event, ui ) {
+ if ( 'dashboard_browser_nag' == ui.item[0].id ) {
+ $( ui.sender ).sortable( 'cancel' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- postboxes._mark_area();
</del><span class="cx" style="display: block; padding: 0 10px"> $document.trigger( 'postbox-moved', ui.item );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ },
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( isMobile ) {
- $(document.body).bind('orientationchange.postboxes', function(){ postboxes._pb_change(); });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Initializes the postboxes, mainly their sortable behaviour.
+ *
+ * @since 2.7.0
+ *
+ * @memberof postboxes
+ *
+ * @param {string} page The page we are currently on. Not used, here for back-compat.
+ * @param {Object} [args={}] The arguments for the postbox initializer.
+ * @param {Function} args.pbshow A callback that is called when a postbox opens.
+ * @param {Function} args.pbhide A callback that is called when a postbox
+ * closes.
+ *
+ * @return {void}
+ */
+ init: function( page, args ) {
+ $.extend( this, args || {} );
+
+ if ( $body.hasClass( 'mobile' ) ) {
+ $body.on( 'orientationchange.postboxes', function() { postboxes._pb_change(); } );
</ins><span class="cx" style="display: block; padding: 0 10px"> this._pb_change();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- this._mark_area();
-
- // Update the "move" buttons properties.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Set the "arrange" (up/down) buttons properties on page load...
</ins><span class="cx" style="display: block; padding: 0 10px"> this.updateOrderButtonsProperties();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $document.on( 'postbox-toggled', this.updateOrderButtonsProperties );
</del><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // ...and keep updating it when postboxes are added or removed by using the checkboxes in Screen Options.
+ $document.on( 'postbox-toggled', this._mark_area );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Set the handle buttons `aria-expanded` attribute initial value on page load.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $handleButtons.each( function () {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '.postbox .handlediv' ).each( function () {
</ins><span class="cx" style="display: block; padding: 0 10px"> var $el = $( this );
</span><span class="cx" style="display: block; padding: 0 10px"> $el.attr( 'aria-expanded', ! $el.closest( '.postbox' ).hasClass( 'closed' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Init sortables now if there is no Screen Options tab.
+ // Otherwise init when Screen Options are open.
+ if ( ! $document.find( '#screen-options-wrap' ).length ) {
+ this.initializeSortable();
+ this.showArrangeArrows();
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -450,11 +493,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {string} page The page we are currently on.
</span><span class="cx" style="display: block; padding: 0 10px"> * @return {void}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- save_state : function(page) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ save_state : function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> var closed, hidden;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Return on the nav-menus.php screen, see #35112.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( 'nav-menus' === page ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'nav-menus' === postboxes.page ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -461,12 +504,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> closed = $( '.postbox' ).filter( '.closed' ).map( function() { return this.id; } ).get().join( ',' );
</span><span class="cx" style="display: block; padding: 0 10px"> hidden = $( '.postbox' ).filter( ':hidden' ).map( function() { return this.id; } ).get().join( ',' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $.post(ajaxurl, {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $.post( ajaxurl, {
</ins><span class="cx" style="display: block; padding: 0 10px"> action: 'closed-postboxes',
</span><span class="cx" style="display: block; padding: 0 10px"> closed: closed,
</span><span class="cx" style="display: block; padding: 0 10px"> hidden: hidden,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
- page: page
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ closedpostboxesnonce: $( '#closedpostboxesnonce' ).val(),
+ page: postboxes.page
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -479,20 +522,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @memberof postboxes
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {string} page The page we are currently on.
</del><span class="cx" style="display: block; padding: 0 10px"> * @return {void}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- save_order : function(page) {
- var postVars, page_columns = $('.columns-prefs input:checked').val() || 0;
-
- postVars = {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ save_order : function() {
+ var postVars = {
</ins><span class="cx" style="display: block; padding: 0 10px"> action: 'meta-box-order',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- _ajax_nonce: $('#meta-box-order-nonce').val(),
- page_columns: page_columns,
- page: page
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _ajax_nonce: $( '#meta-box-order-nonce' ).val(),
+ page_columns: $( '.columns-prefs input:checked' ).val() || 0,
+ page: postboxes.page
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $('.meta-box-sortables').each( function() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '.meta-box-sortables' ).each( function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -522,48 +562,49 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @return {void}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> _mark_area : function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var visible = $( 'div.postbox:visible' ).length,
- visibleSortables = $( '#dashboard-widgets .meta-box-sortables:visible, #post-body .meta-box-sortables:visible' ),
- areAllVisibleSortablesEmpty = true;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var elements = $( '.postbox:visible' ),
+ containers = $( '.meta-box-sortables:visible' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- visibleSortables.each( function() {
- var t = $(this);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ containers.each( function( index, element ) {
+ var container = $( element );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( visible == 1 || t.children( '.postbox:visible' ).length ) {
- t.removeClass('empty-container');
- areAllVisibleSortablesEmpty = false;
- }
- else {
- t.addClass('empty-container');
- }
- });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( container.children( '.postbox:visible' ).length ) {
+ container
+ .removeClass( 'empty-container unused-container' )
+ .removeAttr( 'data-emptystring' );
+ } else {
+ container.addClass( 'empty-container' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- postboxes.updateEmptySortablesText( visibleSortables, areAllVisibleSortablesEmpty );
- },
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( elements.length < 1 ) {
+ // Edge case: all postboxes are disabled.
+ // Mark the first container as empty, the rest as unused.
+ if ( index === 0 ) {
+ container.attr( 'data-emptystring', __( 'Enable screen elements from the Screen Options menu' ) );
+ } else {
+ container.addClass( 'unused-container' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /**
- * Updates the text for the empty sortable areas on the Dashboard.
- *
- * @since 5.5.0
- *
- * @param {Object} visibleSortables The jQuery object representing the visible sortable areas.
- * @param {boolean} areAllVisibleSortablesEmpty Whether all the visible sortable areas are "empty".
- *
- * @return {void}
- */
- updateEmptySortablesText: function( visibleSortables, areAllVisibleSortablesEmpty ) {
- var isDashboard = $( '#dashboard-widgets' ).length,
- emptySortableText = areAllVisibleSortablesEmpty ? __( 'Add boxes from the Screen Options menu' ) : __( 'Drag boxes here' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Break the loop.
+ return false;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! isDashboard ) {
- return;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ container.attr( 'data-emptystring', __( 'Drag screen elements here' ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- visibleSortables.each( function() {
- if ( $( this ).hasClass( 'empty-container' ) ) {
- $( this ).attr( 'data-emptyString', emptySortableText );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( elements.length <= index ) {
+ // If there are not enough elements (postboxes) to add to all containers,
+ // (and this container is empty, as tested above)
+ // mark it as "unused".
+ container.addClass( 'unused-container' );
+ } else {
+ container.removeClass( 'unused-container' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ });
+
+ // Refresh up/down arrows attributes.
+ if ( $body.hasClass( 'screen-options-open' ) ) {
+ postboxes.updateOrderButtonsProperties();
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -579,11 +620,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {number} n The amount of columns to divide the post edit page in.
</span><span class="cx" style="display: block; padding: 0 10px"> * @return {void}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- _pb_edit : function(n) {
- var el = $('.metabox-holder').get(0);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _pb_edit : function( n ) {
+ var el = $( '.metabox-holder' ).get( 0 );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( el ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- el.className = el.className.replace(/columns-\d+/, 'columns-' + n);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ el.className = el.className.replace( /columns-\d+/, 'columns-' + n );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -614,16 +655,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> switch ( window.orientation ) {
</span><span class="cx" style="display: block; padding: 0 10px"> case 90:
</span><span class="cx" style="display: block; padding: 0 10px"> case -90:
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( !check.length || !check.is(':checked') )
- this._pb_edit(2);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! check.length || ! check.is( ':checked' ) ) {
+ this._pb_edit( 2 );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> break;
</span><span class="cx" style="display: block; padding: 0 10px"> case 0:
</span><span class="cx" style="display: block; padding: 0 10px"> case 180:
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $( '#poststuff' ).length ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- this._pb_edit(1);
- } else {
- if ( !check.length || !check.is(':checked') )
- this._pb_edit(2);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ this._pb_edit( 1 );
+ } else if ( ! check.length || ! check.is( ':checked' ) ) {
+ this._pb_edit( 2 );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> break;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -651,4 +692,4 @@
</span><span class="cx" style="display: block; padding: 0 10px"> pbhide : false
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-}(jQuery));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+}( jQuery ));
</ins></span></pre></div>
<a id="trunksrcjs_enqueueswpdashboardjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/_enqueues/wp/dashboard.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/_enqueues/wp/dashboard.js 2020-10-17 01:11:58 UTC (rev 49178)
+++ trunk/src/js/_enqueues/wp/dashboard.js 2020-10-17 09:58:34 UTC (rev 49179)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -180,11 +180,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> autoResizeTextarea();
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> window.quickPressLoad();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Enable the dragging functionality of the widgets.
- $( '.meta-box-sortables' ).sortable( 'option', 'containment', '#wpwrap' );
-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Adjust the height of the textarea based on the content.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span></span></pre></div>
<a id="trunksrcwpadmincsscommoncss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/common.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/common.css 2020-10-17 01:11:58 UTC (rev 49178)
+++ trunk/src/wp-admin/css/common.css 2020-10-17 09:58:34 UTC (rev 49179)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1985,7 +1985,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding-top: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.metabox-holder .postbox-container .meta-box-sortables {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.postbox-container .meta-box-sortables {
</ins><span class="cx" style="display: block; padding: 0 10px"> /* The jQuery UI Sortables need some initial height to work properly. */
</span><span class="cx" style="display: block; padding: 0 10px"> min-height: 1px;
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2014,10 +2014,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> min-height: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ #wpbody-content .metabox-holder .postbox-container .empty-container:after {
+ display: none;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .js .widget .widget-top,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.js .postbox .hndle {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.js.screen-options-open .postbox .hndle {
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: move;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpadmincssdashboardcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/dashboard.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/dashboard.css 2020-10-17 01:11:58 UTC (rev 49178)
+++ trunk/src/wp-admin/css/dashboard.css 2020-10-17 09:58:34 UTC (rev 49179)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -49,24 +49,20 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> #dashboard-widgets .meta-box-sortables {
</span><span class="cx" style="display: block; padding: 0 10px"> display: flow-root; /* avoid margin collapsing between parent and first/last child elements */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Required min-height to make the jQuery UI Sortable drop zone work. */
- min-height: 100px;
</del><span class="cx" style="display: block; padding: 0 10px"> margin: 0 8px 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#dashboard-widgets .postbox-container .empty-container {
- outline: 3px dashed #b4b9be;
- height: 250px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* The following four selectors also apply on the Edit Post screen. */
+.screen-options-open .meta-box-sortables {
+ outline: 3px dashed #606a73;
+ min-height: 250px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* Only highlight drop zones when dragging and only in the 2 columns layout. */
-.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
- outline: 3px dashed #606a73;
- /* Prevent margin on the child from collapsing with margin on the parent. */
- display: flow-root;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.screen-options-open .postbox-container .empty-container {
+ outline-color: #b4b9be;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#dashboard-widgets .postbox-container .empty-container:after {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.postbox-container .empty-container:after {
</ins><span class="cx" style="display: block; padding: 0 10px"> content: attr(data-emptystring);
</span><span class="cx" style="display: block; padding: 0 10px"> margin: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -82,6 +78,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.screen-options-open .postbox-container .empty-container:after {
+ display: block;
+}
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* @todo: this was originally in this section, but likely belongs elsewhere */
</span><span class="cx" style="display: block; padding: 0 10px"> #the-comment-list td.comment p.comment-author {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1118,7 +1117,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> min-height: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .screen-options-open #dashboard-widgets .meta-box-sortables {
</ins><span class="cx" style="display: block; padding: 0 10px"> min-height: 100px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1174,10 +1173,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .columns-prefs .columns-prefs-4 {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*
</ins><span class="cx" style="display: block; padding: 0 10px"> #dashboard-widgets .postbox-container .empty-container:after {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+*/
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* three columns on the dash */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1205,19 +1205,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #dashboard-widgets #postbox-container-4 .empty-container:after {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*
</ins><span class="cx" style="display: block; padding: 0 10px"> #dashboard-widgets .postbox-container .empty-container:after {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+*/
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* Always show the "Drag boxes here" CSS generated content on large screens. */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* Always show the "Drag boxes here" CSS generated content on large screens.
</ins><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 1801px) {
</span><span class="cx" style="display: block; padding: 0 10px"> #dashboard-widgets .postbox-container .empty-container:after {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+*/
</ins><span class="cx" style="display: block; padding: 0 10px"> @media screen and (max-width: 870px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-column,
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-column:first-child {
</span></span></pre></div>
<a id="trunksrcwpadmincsseditcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/edit.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/edit.css 2020-10-17 01:11:58 UTC (rev 49178)
+++ trunk/src/wp-admin/css/edit.css 2020-10-17 09:58:34 UTC (rev 49179)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -148,21 +148,20 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Post Screen */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* Only highlight drop zones when dragging and only in the 2 columns layout. */
-.is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables {
- outline: 3px dashed #606a73;
- /* Prevent margin on the child from collapsing with margin on the parent. */
- display: flow-root;
- /*
- * This min-height is meant to limit jumpiness while dragging. It's equivalent
- * to the minimum height of the sortable-placeholder which is given by the height
- * of a collapsed post box (36px + 1px top and bottom borders) + the placeholder
- * bottom margin (20px) + 2 additional pixels to compensate browsers rounding.
- */
- min-height: 60px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.screen-options-open .metabox-holder .postbox-container .meta-box-sortables {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.screen-options-open #postbox-container-2 #advanced-sortables.empty-container {
+ height: 0;
+ min-height: 0;
+ outline: none;
+}
+
+.screen-options-open #postbox-container-2 #advanced-sortables.empty-container:after {
+ display: none;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .postbox {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> min-width: 255px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1507,7 +1506,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> width: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .screen-options-open.post-type-attachment #post-body .meta-box-sortables {
</ins><span class="cx" style="display: block; padding: 0 10px"> outline: none;
</span><span class="cx" style="display: block; padding: 0 10px"> min-height: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1547,10 +1546,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .is-dragging-metaboxes #poststuff #postbox-container-1 .empty-container,
- .is-dragging-metaboxes #poststuff #postbox-container-1 #side-sortables:empty,
- .is-dragging-metaboxes #poststuff #post-body.columns-2 #side-sortables,
- .is-dragging-metaboxes #poststuff #post-body.columns-2 .meta-box-sortables {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .screen-options-open #poststuff #postbox-container-1 .empty-container,
+ .screen-options-open #poststuff #postbox-container-1 #side-sortables:empty,
+ .screen-options-open #poststuff #post-body.columns-2 #side-sortables,
+ .screen-options-open #poststuff #post-body.columns-2 .meta-box-sortables {
</ins><span class="cx" style="display: block; padding: 0 10px"> height: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> min-height: 60px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadminincludesclasswpscreenphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/class-wp-screen.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/class-wp-screen.php 2020-10-17 01:11:58 UTC (rev 49178)
+++ trunk/src/wp-admin/includes/class-wp-screen.php 2020-10-17 09:58:34 UTC (rev 49179)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1113,10 +1113,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <fieldset class="metabox-prefs">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <legend><?php _e( 'Boxes' ); ?></legend>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <legend><?php _e( 'Screen elements' ); ?></legend>
+ <p>
+ <?php _e( 'Some screen elements can be shown or hidden by using the checkboxes.' ); ?>
+ <?php _e( 'They can be expanded and collapsed by clickling on their headings, and arranged by dragging their headings or by clicking on the up and down arrows.' ); ?>
+ </p>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- meta_box_prefs( $this );
</del><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ meta_box_prefs( $this );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( 'dashboard' === $this->id && has_action( 'welcome_panel' ) && current_user_can( 'edit_theme_options' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( isset( $_GET['welcome'] ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $welcome_checked = empty( $_GET['welcome'] ) ? 0 : 1;
</span></span></pre></div>
<a id="trunksrcwpadminincludestemplatephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/template.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/template.php 2020-10-17 01:11:58 UTC (rev 49178)
+++ trunk/src/wp-admin/includes/template.php 2020-10-17 09:58:34 UTC (rev 49179)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1335,7 +1335,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> echo '<div class="handle-actions hide-if-no-js">';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- echo '<button type="button" class="handle-order-higher" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ echo '<button type="button" class="handle-order-higher postbox-arrange-arrow hidden" aria-disabled="true" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
</ins><span class="cx" style="display: block; padding: 0 10px"> echo '<span class="screen-reader-text">' . __( 'Move up' ) . '</span>';
</span><span class="cx" style="display: block; padding: 0 10px"> echo '<span class="order-higher-indicator" aria-hidden="true"></span>';
</span><span class="cx" style="display: block; padding: 0 10px"> echo '</button>';
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1345,7 +1345,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $widget_title
</span><span class="cx" style="display: block; padding: 0 10px"> ) . '</span>';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- echo '<button type="button" class="handle-order-lower" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ echo '<button type="button" class="handle-order-lower postbox-arrange-arrow hidden" aria-disabled="true" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
</ins><span class="cx" style="display: block; padding: 0 10px"> echo '<span class="screen-reader-text">' . __( 'Move down' ) . '</span>';
</span><span class="cx" style="display: block; padding: 0 10px"> echo '<span class="order-lower-indicator" aria-hidden="true"></span>';
</span><span class="cx" style="display: block; padding: 0 10px"> echo '</button>';
</span></span></pre>
</div>
</div>
</body>
</html>