Revert the improvenents to arranging of postboxes/metaboxes, [49179]. The current patch fixes about half a dozen problems, but seems more general improvements are needed to how Screen Options work.

See #50699.
Built from https://develop.svn.wordpress.org/trunk@49325


git-svn-id: http://core.svn.wordpress.org/trunk@49086 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2020-10-27 10:47:12 +00:00
parent 3c554f366d
commit 7c32cbf990
18 changed files with 242 additions and 289 deletions

View File

@ -1987,7 +1987,7 @@ html.wp-toolbar {
padding-top: 10px; padding-top: 10px;
} }
.postbox-container .meta-box-sortables { .metabox-holder .postbox-container .meta-box-sortables {
/* The jQuery UI Sortables need some initial height to work properly. */ /* The jQuery UI Sortables need some initial height to work properly. */
min-height: 1px; min-height: 1px;
position: relative; position: relative;
@ -2016,14 +2016,10 @@ html.wp-toolbar {
height: 0; height: 0;
min-height: 0; min-height: 0;
} }
#wpbody-content .metabox-holder .postbox-container .empty-container:after {
display: none;
}
} }
.js .widget .widget-top, .js .widget .widget-top,
.js.screen-options-open .postbox .hndle { .js .postbox .hndle {
cursor: move; cursor: move;
} }

File diff suppressed because one or more lines are too long

View File

@ -1986,7 +1986,7 @@ html.wp-toolbar {
padding-top: 10px; padding-top: 10px;
} }
.postbox-container .meta-box-sortables { .metabox-holder .postbox-container .meta-box-sortables {
/* The jQuery UI Sortables need some initial height to work properly. */ /* The jQuery UI Sortables need some initial height to work properly. */
min-height: 1px; min-height: 1px;
position: relative; position: relative;
@ -2015,14 +2015,10 @@ html.wp-toolbar {
height: 0; height: 0;
min-height: 0; min-height: 0;
} }
#wpbody-content .metabox-holder .postbox-container .empty-container:after {
display: none;
}
} }
.js .widget .widget-top, .js .widget .widget-top,
.js.screen-options-open .postbox .hndle { .js .postbox .hndle {
cursor: move; cursor: move;
} }

File diff suppressed because one or more lines are too long

View File

@ -50,20 +50,24 @@
#dashboard-widgets .meta-box-sortables { #dashboard-widgets .meta-box-sortables {
display: flow-root; /* avoid margin collapsing between parent and first/last child elements */ display: flow-root; /* avoid margin collapsing between parent and first/last child elements */
/* Required min-height to make the jQuery UI Sortable drop zone work. */
min-height: 100px;
margin: 0 8px 20px; margin: 0 8px 20px;
} }
/* The following four selectors also apply on the Edit Post screen. */ #dashboard-widgets .postbox-container .empty-container {
.screen-options-open .meta-box-sortables { outline: 3px dashed #b4b9be;
height: 250px;
}
/* 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; outline: 3px dashed #606a73;
min-height: 250px; /* Prevent margin on the child from collapsing with margin on the parent. */
display: flow-root;
} }
.screen-options-open .postbox-container .empty-container { #dashboard-widgets .postbox-container .empty-container:after {
outline-color: #b4b9be;
}
.postbox-container .empty-container:after {
content: attr(data-emptystring); content: attr(data-emptystring);
margin: auto; margin: auto;
position: absolute; position: absolute;
@ -79,9 +83,6 @@
display: none; display: none;
} }
.screen-options-open .postbox-container .empty-container:after {
display: block;
}
/* @todo: this was originally in this section, but likely belongs elsewhere */ /* @todo: this was originally in this section, but likely belongs elsewhere */
#the-comment-list td.comment p.comment-author { #the-comment-list td.comment p.comment-author {
@ -1118,7 +1119,7 @@ a.rsswidget {
min-height: 0; min-height: 0;
} }
.screen-options-open #dashboard-widgets .meta-box-sortables { .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
min-height: 100px; min-height: 100px;
} }
@ -1174,11 +1175,10 @@ a.rsswidget {
.columns-prefs .columns-prefs-4 { .columns-prefs .columns-prefs-4 {
display: none; display: none;
} }
/*
#dashboard-widgets .postbox-container .empty-container:after { #dashboard-widgets .postbox-container .empty-container:after {
display: block; display: block;
} }
*/
} }
/* three columns on the dash */ /* three columns on the dash */
@ -1206,20 +1206,19 @@ a.rsswidget {
#dashboard-widgets #postbox-container-4 .empty-container:after { #dashboard-widgets #postbox-container-4 .empty-container:after {
display: none; display: none;
} }
/*
#dashboard-widgets .postbox-container .empty-container:after { #dashboard-widgets .postbox-container .empty-container:after {
display: block; display: block;
} }
*/
} }
/* Always show the "Drag boxes here" CSS generated content on large screens. /* Always show the "Drag boxes here" CSS generated content on large screens. */
@media only screen and (min-width: 1801px) { @media only screen and (min-width: 1801px) {
#dashboard-widgets .postbox-container .empty-container:after { #dashboard-widgets .postbox-container .empty-container:after {
display: block; display: block;
} }
} }
*/
@media screen and (max-width: 870px) { @media screen and (max-width: 870px) {
.welcome-panel .welcome-panel-column, .welcome-panel .welcome-panel-column,
.welcome-panel .welcome-panel-column:first-child { .welcome-panel .welcome-panel-column:first-child {

File diff suppressed because one or more lines are too long

View File

@ -49,20 +49,24 @@
#dashboard-widgets .meta-box-sortables { #dashboard-widgets .meta-box-sortables {
display: flow-root; /* avoid margin collapsing between parent and first/last child elements */ display: flow-root; /* avoid margin collapsing between parent and first/last child elements */
/* Required min-height to make the jQuery UI Sortable drop zone work. */
min-height: 100px;
margin: 0 8px 20px; margin: 0 8px 20px;
} }
/* The following four selectors also apply on the Edit Post screen. */ #dashboard-widgets .postbox-container .empty-container {
.screen-options-open .meta-box-sortables { outline: 3px dashed #b4b9be;
height: 250px;
}
/* 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; outline: 3px dashed #606a73;
min-height: 250px; /* Prevent margin on the child from collapsing with margin on the parent. */
display: flow-root;
} }
.screen-options-open .postbox-container .empty-container { #dashboard-widgets .postbox-container .empty-container:after {
outline-color: #b4b9be;
}
.postbox-container .empty-container:after {
content: attr(data-emptystring); content: attr(data-emptystring);
margin: auto; margin: auto;
position: absolute; position: absolute;
@ -78,9 +82,6 @@
display: none; display: none;
} }
.screen-options-open .postbox-container .empty-container:after {
display: block;
}
/* @todo: this was originally in this section, but likely belongs elsewhere */ /* @todo: this was originally in this section, but likely belongs elsewhere */
#the-comment-list td.comment p.comment-author { #the-comment-list td.comment p.comment-author {
@ -1117,7 +1118,7 @@ a.rsswidget {
min-height: 0; min-height: 0;
} }
.screen-options-open #dashboard-widgets .meta-box-sortables { .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
min-height: 100px; min-height: 100px;
} }
@ -1173,11 +1174,10 @@ a.rsswidget {
.columns-prefs .columns-prefs-4 { .columns-prefs .columns-prefs-4 {
display: none; display: none;
} }
/*
#dashboard-widgets .postbox-container .empty-container:after { #dashboard-widgets .postbox-container .empty-container:after {
display: block; display: block;
} }
*/
} }
/* three columns on the dash */ /* three columns on the dash */
@ -1205,20 +1205,19 @@ a.rsswidget {
#dashboard-widgets #postbox-container-4 .empty-container:after { #dashboard-widgets #postbox-container-4 .empty-container:after {
display: none; display: none;
} }
/*
#dashboard-widgets .postbox-container .empty-container:after { #dashboard-widgets .postbox-container .empty-container:after {
display: block; display: block;
} }
*/
} }
/* Always show the "Drag boxes here" CSS generated content on large screens. /* Always show the "Drag boxes here" CSS generated content on large screens. */
@media only screen and (min-width: 1801px) { @media only screen and (min-width: 1801px) {
#dashboard-widgets .postbox-container .empty-container:after { #dashboard-widgets .postbox-container .empty-container:after {
display: block; display: block;
} }
} }
*/
@media screen and (max-width: 870px) { @media screen and (max-width: 870px) {
.welcome-panel .welcome-panel-column, .welcome-panel .welcome-panel-column,
.welcome-panel .welcome-panel-column:first-child { .welcome-panel .welcome-panel-column:first-child {

File diff suppressed because one or more lines are too long

View File

@ -149,20 +149,21 @@ body.post-new-php .submitbox .submitdelete {
/* Post Screen */ /* Post Screen */
.screen-options-open .metabox-holder .postbox-container .meta-box-sortables { /* 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;
margin-bottom: 20px; margin-bottom: 20px;
} }
.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;
}
.postbox { .postbox {
position: relative; position: relative;
min-width: 255px; min-width: 255px;
@ -1523,7 +1524,7 @@ table.links-table {
width: auto; width: auto;
} }
.screen-options-open.post-type-attachment #post-body .meta-box-sortables { .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
outline: none; outline: none;
min-height: 0; min-height: 0;
margin-bottom: 0; margin-bottom: 0;
@ -1563,10 +1564,10 @@ table.links-table {
} }
/* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */ /* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */
.screen-options-open #poststuff #postbox-container-1 .empty-container, .is-dragging-metaboxes #poststuff #postbox-container-1 .empty-container,
.screen-options-open #poststuff #postbox-container-1 #side-sortables:empty, .is-dragging-metaboxes #poststuff #postbox-container-1 #side-sortables:empty,
.screen-options-open #poststuff #post-body.columns-2 #side-sortables, .is-dragging-metaboxes #poststuff #post-body.columns-2 #side-sortables,
.screen-options-open #poststuff #post-body.columns-2 .meta-box-sortables { .is-dragging-metaboxes #poststuff #post-body.columns-2 .meta-box-sortables {
height: auto; height: auto;
min-height: 60px; min-height: 60px;
} }

File diff suppressed because one or more lines are too long

View File

@ -148,20 +148,21 @@ body.post-new-php .submitbox .submitdelete {
/* Post Screen */ /* Post Screen */
.screen-options-open .metabox-holder .postbox-container .meta-box-sortables { /* 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;
margin-bottom: 20px; margin-bottom: 20px;
} }
.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;
}
.postbox { .postbox {
position: relative; position: relative;
min-width: 255px; min-width: 255px;
@ -1522,7 +1523,7 @@ table.links-table {
width: auto; width: auto;
} }
.screen-options-open.post-type-attachment #post-body .meta-box-sortables { .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
outline: none; outline: none;
min-height: 0; min-height: 0;
margin-bottom: 0; margin-bottom: 0;
@ -1562,10 +1563,10 @@ table.links-table {
} }
/* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */ /* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */
.screen-options-open #poststuff #postbox-container-1 .empty-container, .is-dragging-metaboxes #poststuff #postbox-container-1 .empty-container,
.screen-options-open #poststuff #postbox-container-1 #side-sortables:empty, .is-dragging-metaboxes #poststuff #postbox-container-1 #side-sortables:empty,
.screen-options-open #poststuff #post-body.columns-2 #side-sortables, .is-dragging-metaboxes #poststuff #post-body.columns-2 #side-sortables,
.screen-options-open #poststuff #post-body.columns-2 .meta-box-sortables { .is-dragging-metaboxes #poststuff #post-body.columns-2 .meta-box-sortables {
height: auto; height: auto;
min-height: 60px; min-height: 60px;
} }

File diff suppressed because one or more lines are too long

View File

@ -1335,7 +1335,7 @@ function do_meta_boxes( $screen, $context, $object ) {
echo '<div class="handle-actions hide-if-no-js">'; echo '<div class="handle-actions hide-if-no-js">';
echo '<button type="button" class="handle-order-higher postbox-arrange-arrow hidden" aria-disabled="true" aria-describedby="' . $box['id'] . '-handle-order-higher-description">'; echo '<button type="button" class="handle-order-higher" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
echo '<span class="screen-reader-text">' . __( 'Move up' ) . '</span>'; echo '<span class="screen-reader-text">' . __( 'Move up' ) . '</span>';
echo '<span class="order-higher-indicator" aria-hidden="true"></span>'; echo '<span class="order-higher-indicator" aria-hidden="true"></span>';
echo '</button>'; echo '</button>';
@ -1345,7 +1345,7 @@ function do_meta_boxes( $screen, $context, $object ) {
$widget_title $widget_title
) . '</span>'; ) . '</span>';
echo '<button type="button" class="handle-order-lower postbox-arrange-arrow hidden" aria-disabled="true" aria-describedby="' . $box['id'] . '-handle-order-lower-description">'; echo '<button type="button" class="handle-order-lower" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
echo '<span class="screen-reader-text">' . __( 'Move down' ) . '</span>'; echo '<span class="screen-reader-text">' . __( 'Move down' ) . '</span>';
echo '<span class="order-lower-indicator" aria-hidden="true"></span>'; echo '<span class="order-lower-indicator" aria-hidden="true"></span>';
echo '</button>'; echo '</button>';

View File

@ -180,9 +180,11 @@ jQuery(document).ready( function($) {
autoResizeTextarea(); autoResizeTextarea();
}; };
window.quickPressLoad(); window.quickPressLoad();
// Enable the dragging functionality of the widgets.
$( '.meta-box-sortables' ).sortable( 'option', 'containment', '#wpwrap' );
/** /**
* Adjust the height of the textarea based on the content. * Adjust the height of the textarea based on the content.
* *

File diff suppressed because one or more lines are too long

View File

@ -9,9 +9,8 @@
/* global ajaxurl, postboxes */ /* global ajaxurl, postboxes */
( function( $ ) { (function($) {
var $document = $( document ), var $document = $( document ),
$body = $( 'body' ),
__ = wp.i18n.__; __ = wp.i18n.__;
/** /**
@ -64,7 +63,7 @@
} }
if ( postboxes.page !== 'press-this' ) { if ( postboxes.page !== 'press-this' ) {
postboxes.save_state(); postboxes.save_state( postboxes.page );
} }
if ( id ) { if ( id ) {
@ -119,8 +118,8 @@
return; return;
} }
// Move a postbox up.
if ( button.hasClass( 'handle-order-higher' ) ) { if ( button.hasClass( 'handle-order-higher' ) ) {
// Move a postbox up.
// If the box is first within a sortable area, move it to the previous sortable area. // If the box is first within a sortable area, move it to the previous sortable area.
if ( 0 === postboxWithinSortablesIndex ) { if ( 0 === postboxWithinSortablesIndex ) {
postboxes.handleOrderBetweenSortables( 'previous', button, postbox ); postboxes.handleOrderBetweenSortables( 'previous', button, postbox );
@ -130,9 +129,11 @@
postbox.prevAll( '.postbox:visible' ).eq( 0 ).before( postbox ); postbox.prevAll( '.postbox:visible' ).eq( 0 ).before( postbox );
button.focus(); button.focus();
postboxes.updateOrderButtonsProperties(); postboxes.updateOrderButtonsProperties();
postboxes.save_order(); postboxes.save_order( postboxes.page );
} else if ( button.hasClass( 'handle-order-lower' ) ) { }
// Move a postbox down.
// Move a postbox down.
if ( button.hasClass( 'handle-order-lower' ) ) {
// If the box is last within a sortable area, move it to the next sortable area. // If the box is last within a sortable area, move it to the next sortable area.
if ( postboxWithinSortablesIndex + 1 === postboxesWithinSortablesCount ) { if ( postboxWithinSortablesIndex + 1 === postboxesWithinSortablesCount ) {
postboxes.handleOrderBetweenSortables( 'next', button, postbox ); postboxes.handleOrderBetweenSortables( 'next', button, postbox );
@ -142,8 +143,9 @@
postbox.nextAll( '.postbox:visible' ).eq( 0 ).after( postbox ); postbox.nextAll( '.postbox:visible' ).eq( 0 ).after( postbox );
button.focus(); button.focus();
postboxes.updateOrderButtonsProperties(); postboxes.updateOrderButtonsProperties();
postboxes.save_order(); postboxes.save_order( postboxes.page );
} }
}, },
/** /**
@ -189,23 +191,8 @@
postboxes._mark_area(); postboxes._mark_area();
button.focus(); button.focus();
postboxes.save_order(); postboxes.updateOrderButtonsProperties();
}, postboxes.save_order( postboxes.page );
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();
}, },
/** /**
@ -216,37 +203,39 @@
* @return {void} * @return {void}
*/ */
updateOrderButtonsProperties: function() { updateOrderButtonsProperties: function() {
var elements = $( '.postbox:visible' ), var firstSortablesId = $( '.meta-box-sortables:visible:first' ).attr( 'id' ),
containers = $( '.meta-box-sortables:visible' ) lastSortablesId = $( '.meta-box-sortables:visible:last' ).attr( 'id' ),
.not( '.unused-container' ) firstPostbox = $( '.postbox:visible:first' ),
.filter( function( i, container ) { lastPostbox = $( '.postbox:visible:last' ),
if ( i > 0 && container.clientHeight === 0 ) { firstPostboxId = firstPostbox.attr( 'id' ),
return false; 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' );
return true; // Enable all buttons as a reset first.
} ); moveUpButtons
.attr( 'aria-disabled', 'false' )
.removeClass( 'hidden' );
moveDownButtons
.attr( 'aria-disabled', 'false' )
.removeClass( 'hidden' );
// When there's only one "sortables" area (e.g. in the block editor) // When there's only one "sortables" area (e.g. in the block editor) and only one visible postbox, hide the buttons.
// and only one visible postbox, hide the buttons. if ( firstSortablesId === lastSortablesId && firstPostboxId === lastPostboxId ) {
if ( containers.length === 1 && elements.length === 1 ) { moveUpButtons.addClass( 'hidden' );
$( '.postbox-arrange-arrow' ).addClass( 'hidden' ).attr( 'aria-disabled', 'true' ); moveDownButtons.addClass( 'hidden' );
return;
} }
// Reset. // Set an aria-disabled=true attribute on the first visible "move" buttons.
if ( $body.hasClass( 'screen-options-open' ) ) { if ( firstSortablesId === firstPostboxSortablesId ) {
$( '.postbox-arrange-arrow' ).removeClass( 'hidden' ).attr( 'aria-disabled', 'false' ); $( firstPostbox ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
} }
if ( elements.first().parent()[0] === containers.first()[0] ) { // Set an aria-disabled=true attribute on the last visible "move" buttons.
// Set an aria-disabled=true attribute on the first visible "move higher" buttons. if ( lastSortablesId === lastPostboxSortablesId ) {
elements.first().find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' ); $( '.postbox:visible .handle-order-lower' ).last().attr( 'aria-disabled', 'true' );
}
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' );
} }
}, },
@ -263,9 +252,9 @@
* @param {Function} args.pbhide A callback that is called when a postbox closes. * @param {Function} args.pbhide A callback that is called when a postbox closes.
* @return {void} * @return {void}
*/ */
add_postbox_toggles: function ( page, args ) { add_postbox_toggles : function (page, args) {
var $handles = $( '.postbox .hndle, .postbox .handlediv' ), var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
$orderButtons = $( '.postbox .postbox-arrange-arrow' ); $orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
this.page = page; this.page = page;
this.init( page, args ); this.init( page, args );
@ -278,8 +267,8 @@
/** /**
* @since 2.7.0 * @since 2.7.0
*/ */
$( '.postbox .hndle a' ).on( 'click', function( event ) { $('.postbox .hndle a').click( function(e) {
event.stopPropagation(); e.stopPropagation();
}); });
/** /**
@ -294,11 +283,10 @@
* *
* @return {void} * @return {void}
*/ */
$( '.postbox a.dismiss' ).on( 'click.postboxes', function( event ) { $( '.postbox a.dismiss' ).on( 'click.postboxes', function( e ) {
var hide_id = $( this ).parents( '.postbox' ).attr( 'id' ) + '-hide'; var hide_id = $(this).parents('.postbox').attr('id') + '-hide';
e.preventDefault();
event.preventDefault(); $( '#' + hide_id ).prop('checked', false).triggerHandler('click');
$( '#' + hide_id ).prop( 'checked', false ).triggerHandler( 'click' );
}); });
/** /**
@ -314,26 +302,24 @@
* *
* @return {void} * @return {void}
*/ */
$( '.hide-postbox-tog' ).on( 'click.postboxes', function() { $('.hide-postbox-tog').bind('click.postboxes', function() {
var $el = $( this ), var $el = $(this),
boxId = $el.val(), boxId = $el.val(),
$postbox = $( '#' + boxId ); $postbox = $( '#' + boxId );
if ( $el.prop( 'checked' ) ) { if ( $el.prop( 'checked' ) ) {
$postbox.show(); $postbox.show();
if ( $.isFunction( postboxes.pbshow ) ) { if ( $.isFunction( postboxes.pbshow ) ) {
postboxes.pbshow( boxId ); postboxes.pbshow( boxId );
} }
} else { } else {
$postbox.hide(); $postbox.hide();
if ( $.isFunction( postboxes.pbhide ) ) { if ( $.isFunction( postboxes.pbhide ) ) {
postboxes.pbhide( boxId ); postboxes.pbhide( boxId );
} }
} }
postboxes.save_state(); postboxes.save_state( page );
postboxes._mark_area(); postboxes._mark_area();
/** /**
@ -350,44 +336,46 @@
* *
* @return {void} * @return {void}
*/ */
$( '.columns-prefs input[type="radio"]' ).on( 'click.postboxes', function() { $('.columns-prefs input[type="radio"]').bind('click.postboxes', function(){
var number = parseInt( $( this ).val(), 10 ); var n = parseInt($(this).val(), 10);
if ( number ) { if ( n ) {
postboxes._pb_edit( number ); postboxes._pb_edit(n);
postboxes.save_order(); postboxes.save_order( page );
} }
}); });
// 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();
} );
}, },
initializeSortable: function() { /**
var hasScreenOptions = $document.find( '#screen-options-wrap' ).length > 0; * 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' );
$( '.meta-box-sortables' ).sortable( { $.extend( this, args || {} );
$('.meta-box-sortables').sortable({
placeholder: 'sortable-placeholder', placeholder: 'sortable-placeholder',
connectWith: '.meta-box-sortables', connectWith: '.meta-box-sortables',
items: '.postbox', items: '.postbox',
handle: '.hndle', handle: '.hndle',
cursor: 'move', cursor: 'move',
delay: ( $body.hasClass( 'mobile' ) ? 200 : 0 ), delay: ( isMobile ? 200 : 0 ),
distance: 2, distance: 2,
tolerance: 'pointer', tolerance: 'pointer',
opacity: 0.65,
forcePlaceholderSize: true, forcePlaceholderSize: true,
containment: '#wpwrap',
helper: function( event, element ) { helper: function( event, element ) {
/* `helper: 'clone'` is equivalent to `return element.clone();` /* `helper: 'clone'` is equivalent to `return element.clone();`
* Cloning a checked radio and then inserting that clone next to the original * Cloning a checked radio and then inserting that clone next to the original
@ -398,86 +386,55 @@
*/ */
return element.clone() return element.clone()
.find( ':input' ) .find( ':input' )
.attr( 'name', function( i, currentName ) { .attr( 'name', function( i, currentName ) {
return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName; return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
} ) } )
.end(); .end();
}, },
opacity: 0.65,
start: function() { start: function() {
// Pretend the Screen Options tab exists. $( 'body' ).addClass( 'is-dragging-metaboxes' );
if ( ! hasScreenOptions ) {
$body.addClass( 'screen-options-open' );
}
// Refresh the cached positions of all the sortable items so that the min-height set while dragging works. // Refresh the cached positions of all the sortable items so that the min-height set while dragging works.
$( '.meta-box-sortables' ).sortable( 'refreshPositions' ); $( '.meta-box-sortables' ).sortable( 'refreshPositions' );
}, },
stop: function() { stop: function() {
var $el = $( this ); var $el = $( this );
if ( ! hasScreenOptions ) { $( 'body' ).removeClass( 'is-dragging-metaboxes' );
$body.removeClass( 'screen-options-open' );
}
if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) { if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
$el.sortable( 'cancel' ); $el.sortable('cancel');
return; return;
} }
postboxes._mark_area(); postboxes.updateOrderButtonsProperties();
postboxes.save_order(); postboxes.save_order(page);
}, },
receive: function( event, ui ) { receive: function(e,ui) {
if ( 'dashboard_browser_nag' == ui.item[0].id ) { if ( 'dashboard_browser_nag' == ui.item[0].id )
$( ui.sender ).sortable( 'cancel' ); $(ui.sender).sortable('cancel');
}
postboxes._mark_area();
$document.trigger( 'postbox-moved', ui.item ); $document.trigger( 'postbox-moved', ui.item );
} }
}); });
},
/** if ( isMobile ) {
* Initializes the postboxes, mainly their sortable behaviour. $(document.body).bind('orientationchange.postboxes', function(){ postboxes._pb_change(); });
*
* @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(); } );
this._pb_change(); this._pb_change();
} }
// Set the "arrange" (up/down) buttons properties on page load... this._mark_area();
this.updateOrderButtonsProperties();
// ...and keep updating it when postboxes are added or removed by using the checkboxes in Screen Options. // Update the "move" buttons properties.
$document.on( 'postbox-toggled', this._mark_area ); this.updateOrderButtonsProperties();
$document.on( 'postbox-toggled', this.updateOrderButtonsProperties );
// Set the handle buttons `aria-expanded` attribute initial value on page load. // Set the handle buttons `aria-expanded` attribute initial value on page load.
$( '.postbox .handlediv' ).each( function () { $handleButtons.each( function () {
var $el = $( this ); var $el = $( this );
$el.attr( 'aria-expanded', ! $el.closest( '.postbox' ).hasClass( 'closed' ) ); $el.attr( 'aria-expanded', ! $el.closest( '.postbox' ).hasClass( 'closed' ) );
}); });
// 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();
}
}, },
/** /**
@ -493,23 +450,23 @@
* @param {string} page The page we are currently on. * @param {string} page The page we are currently on.
* @return {void} * @return {void}
*/ */
save_state : function() { save_state : function(page) {
var closed, hidden; var closed, hidden;
// Return on the nav-menus.php screen, see #35112. // Return on the nav-menus.php screen, see #35112.
if ( 'nav-menus' === postboxes.page ) { if ( 'nav-menus' === page ) {
return; return;
} }
closed = $( '.postbox' ).filter( '.closed' ).map( function() { return this.id; } ).get().join( ',' ); closed = $( '.postbox' ).filter( '.closed' ).map( function() { return this.id; } ).get().join( ',' );
hidden = $( '.postbox' ).filter( ':hidden' ).map( function() { return this.id; } ).get().join( ',' ); hidden = $( '.postbox' ).filter( ':hidden' ).map( function() { return this.id; } ).get().join( ',' );
$.post( ajaxurl, { $.post(ajaxurl, {
action: 'closed-postboxes', action: 'closed-postboxes',
closed: closed, closed: closed,
hidden: hidden, hidden: hidden,
closedpostboxesnonce: $( '#closedpostboxesnonce' ).val(), closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
page: postboxes.page page: page
}); });
}, },
@ -522,17 +479,20 @@
* *
* @memberof postboxes * @memberof postboxes
* *
* @param {string} page The page we are currently on.
* @return {void} * @return {void}
*/ */
save_order : function() { save_order : function(page) {
var postVars = { var postVars, page_columns = $('.columns-prefs input:checked').val() || 0;
postVars = {
action: 'meta-box-order', action: 'meta-box-order',
_ajax_nonce: $( '#meta-box-order-nonce' ).val(), _ajax_nonce: $('#meta-box-order-nonce').val(),
page_columns: $( '.columns-prefs input:checked' ).val() || 0, page_columns: page_columns,
page: postboxes.page page: page
}; };
$( '.meta-box-sortables' ).each( function() { $('.meta-box-sortables').each( function() {
postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' ); postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
} ); } );
@ -562,49 +522,48 @@
* @return {void} * @return {void}
*/ */
_mark_area : function() { _mark_area : function() {
var elements = $( '.postbox:visible' ), var visible = $( 'div.postbox:visible' ).length,
containers = $( '.meta-box-sortables:visible' ); visibleSortables = $( '#dashboard-widgets .meta-box-sortables:visible, #post-body .meta-box-sortables:visible' ),
areAllVisibleSortablesEmpty = true;
containers.each( function( index, element ) { visibleSortables.each( function() {
var container = $( element ); var t = $(this);
if ( container.children( '.postbox:visible' ).length ) { if ( visible == 1 || t.children( '.postbox:visible' ).length ) {
container t.removeClass('empty-container');
.removeClass( 'empty-container unused-container' ) areAllVisibleSortablesEmpty = false;
.removeAttr( 'data-emptystring' ); }
} else { else {
container.addClass( 'empty-container' ); t.addClass('empty-container');
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' );
}
// Break the loop.
return false;
}
container.attr( 'data-emptystring', __( 'Drag screen elements here' ) );
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' );
}
} }
}); });
// Refresh up/down arrows attributes. postboxes.updateEmptySortablesText( visibleSortables, areAllVisibleSortablesEmpty );
if ( $body.hasClass( 'screen-options-open' ) ) { },
postboxes.updateOrderButtonsProperties();
/**
* 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' );
if ( ! isDashboard ) {
return;
} }
visibleSortables.each( function() {
if ( $( this ).hasClass( 'empty-container' ) ) {
$( this ).attr( 'data-emptyString', emptySortableText );
}
} );
}, },
/** /**
@ -620,11 +579,11 @@
* @param {number} n The amount of columns to divide the post edit page in. * @param {number} n The amount of columns to divide the post edit page in.
* @return {void} * @return {void}
*/ */
_pb_edit : function( n ) { _pb_edit : function(n) {
var el = $( '.metabox-holder' ).get( 0 ); var el = $('.metabox-holder').get(0);
if ( el ) { if ( el ) {
el.className = el.className.replace( /columns-\d+/, 'columns-' + n ); el.className = el.className.replace(/columns-\d+/, 'columns-' + n);
} }
/** /**
@ -655,16 +614,16 @@
switch ( window.orientation ) { switch ( window.orientation ) {
case 90: case 90:
case -90: case -90:
if ( ! check.length || ! check.is( ':checked' ) ) { if ( !check.length || !check.is(':checked') )
this._pb_edit( 2 ); this._pb_edit(2);
}
break; break;
case 0: case 0:
case 180: case 180:
if ( $( '#poststuff' ).length ) { if ( $( '#poststuff' ).length ) {
this._pb_edit( 1 ); this._pb_edit(1);
} else if ( ! check.length || ! check.is( ':checked' ) ) { } else {
this._pb_edit( 2 ); if ( !check.length || !check.is(':checked') )
this._pb_edit(2);
} }
break; break;
} }
@ -692,4 +651,4 @@
pbhide : false pbhide : false
}; };
}( jQuery )); }(jQuery));

File diff suppressed because one or more lines are too long

View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.6-beta1-49324'; $wp_version = '5.6-beta1-49325';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.