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 #50699. Built from https://develop.svn.wordpress.org/trunk@49179 git-svn-id: http://core.svn.wordpress.org/trunk@48941 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz
parent
c5f1d21020
commit
59c45c41e4
|
|
@ -1986,7 +1986,7 @@ html.wp-toolbar {
|
|||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.metabox-holder .postbox-container .meta-box-sortables {
|
||||
.postbox-container .meta-box-sortables {
|
||||
/* The jQuery UI Sortables need some initial height to work properly. */
|
||||
min-height: 1px;
|
||||
position: relative;
|
||||
|
|
@ -2015,10 +2015,14 @@ html.wp-toolbar {
|
|||
height: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#wpbody-content .metabox-holder .postbox-container .empty-container:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.js .widget .widget-top,
|
||||
.js .postbox .hndle {
|
||||
.js.screen-options-open .postbox .hndle {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1985,7 +1985,7 @@ html.wp-toolbar {
|
|||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.metabox-holder .postbox-container .meta-box-sortables {
|
||||
.postbox-container .meta-box-sortables {
|
||||
/* The jQuery UI Sortables need some initial height to work properly. */
|
||||
min-height: 1px;
|
||||
position: relative;
|
||||
|
|
@ -2014,10 +2014,14 @@ html.wp-toolbar {
|
|||
height: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#wpbody-content .metabox-holder .postbox-container .empty-container:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.js .widget .widget-top,
|
||||
.js .postbox .hndle {
|
||||
.js.screen-options-open .postbox .hndle {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -50,24 +50,20 @@
|
|||
|
||||
#dashboard-widgets .meta-box-sortables {
|
||||
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;
|
||||
}
|
||||
|
||||
#dashboard-widgets .postbox-container .empty-container {
|
||||
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 {
|
||||
/* The following four selectors also apply on the Edit Post screen. */
|
||||
.screen-options-open .meta-box-sortables {
|
||||
outline: 3px dashed #606a73;
|
||||
/* Prevent margin on the child from collapsing with margin on the parent. */
|
||||
display: flow-root;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
#dashboard-widgets .postbox-container .empty-container:after {
|
||||
.screen-options-open .postbox-container .empty-container {
|
||||
outline-color: #b4b9be;
|
||||
}
|
||||
|
||||
.postbox-container .empty-container:after {
|
||||
content: attr(data-emptystring);
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
|
|
@ -83,6 +79,9 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.screen-options-open .postbox-container .empty-container:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* @todo: this was originally in this section, but likely belongs elsewhere */
|
||||
#the-comment-list td.comment p.comment-author {
|
||||
|
|
@ -1119,7 +1118,7 @@ a.rsswidget {
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
|
||||
.screen-options-open #dashboard-widgets .meta-box-sortables {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
|
|
@ -1175,10 +1174,11 @@ a.rsswidget {
|
|||
.columns-prefs .columns-prefs-4 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
#dashboard-widgets .postbox-container .empty-container:after {
|
||||
display: block;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
/* three columns on the dash */
|
||||
|
|
@ -1206,19 +1206,20 @@ a.rsswidget {
|
|||
#dashboard-widgets #postbox-container-4 .empty-container:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
#dashboard-widgets .postbox-container .empty-container:after {
|
||||
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) {
|
||||
#dashboard-widgets .postbox-container .empty-container:after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
@media screen and (max-width: 870px) {
|
||||
.welcome-panel .welcome-panel-column,
|
||||
.welcome-panel .welcome-panel-column:first-child {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -49,24 +49,20 @@
|
|||
|
||||
#dashboard-widgets .meta-box-sortables {
|
||||
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;
|
||||
}
|
||||
|
||||
#dashboard-widgets .postbox-container .empty-container {
|
||||
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 {
|
||||
/* The following four selectors also apply on the Edit Post screen. */
|
||||
.screen-options-open .meta-box-sortables {
|
||||
outline: 3px dashed #606a73;
|
||||
/* Prevent margin on the child from collapsing with margin on the parent. */
|
||||
display: flow-root;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
#dashboard-widgets .postbox-container .empty-container:after {
|
||||
.screen-options-open .postbox-container .empty-container {
|
||||
outline-color: #b4b9be;
|
||||
}
|
||||
|
||||
.postbox-container .empty-container:after {
|
||||
content: attr(data-emptystring);
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
|
|
@ -82,6 +78,9 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.screen-options-open .postbox-container .empty-container:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* @todo: this was originally in this section, but likely belongs elsewhere */
|
||||
#the-comment-list td.comment p.comment-author {
|
||||
|
|
@ -1118,7 +1117,7 @@ a.rsswidget {
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
|
||||
.screen-options-open #dashboard-widgets .meta-box-sortables {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
|
|
@ -1174,10 +1173,11 @@ a.rsswidget {
|
|||
.columns-prefs .columns-prefs-4 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
#dashboard-widgets .postbox-container .empty-container:after {
|
||||
display: block;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
/* three columns on the dash */
|
||||
|
|
@ -1205,19 +1205,20 @@ a.rsswidget {
|
|||
#dashboard-widgets #postbox-container-4 .empty-container:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
#dashboard-widgets .postbox-container .empty-container:after {
|
||||
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) {
|
||||
#dashboard-widgets .postbox-container .empty-container:after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
@media screen and (max-width: 870px) {
|
||||
.welcome-panel .welcome-panel-column,
|
||||
.welcome-panel .welcome-panel-column:first-child {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -149,21 +149,20 @@ body.post-new-php .submitbox .submitdelete {
|
|||
|
||||
/* Post Screen */
|
||||
|
||||
/* 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;
|
||||
.screen-options-open .metabox-holder .postbox-container .meta-box-sortables {
|
||||
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 {
|
||||
position: relative;
|
||||
min-width: 255px;
|
||||
|
|
@ -1508,7 +1507,7 @@ table.links-table {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
|
||||
.screen-options-open.post-type-attachment #post-body .meta-box-sortables {
|
||||
outline: none;
|
||||
min-height: 0;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -1548,10 +1547,10 @@ table.links-table {
|
|||
}
|
||||
|
||||
/* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */
|
||||
.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 {
|
||||
.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 {
|
||||
height: auto;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -148,21 +148,20 @@ body.post-new-php .submitbox .submitdelete {
|
|||
|
||||
/* Post Screen */
|
||||
|
||||
/* 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;
|
||||
.screen-options-open .metabox-holder .postbox-container .meta-box-sortables {
|
||||
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 {
|
||||
position: relative;
|
||||
min-width: 255px;
|
||||
|
|
@ -1507,7 +1506,7 @@ table.links-table {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
|
||||
.screen-options-open.post-type-attachment #post-body .meta-box-sortables {
|
||||
outline: none;
|
||||
min-height: 0;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -1547,10 +1546,10 @@ table.links-table {
|
|||
}
|
||||
|
||||
/* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */
|
||||
.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 {
|
||||
.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 {
|
||||
height: auto;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1113,9 +1113,14 @@ final class WP_Screen {
|
|||
}
|
||||
?>
|
||||
<fieldset class="metabox-prefs">
|
||||
<legend><?php _e( 'Boxes' ); ?></legend>
|
||||
<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>
|
||||
<?php
|
||||
meta_box_prefs( $this );
|
||||
|
||||
meta_box_prefs( $this );
|
||||
|
||||
if ( 'dashboard' === $this->id && has_action( 'welcome_panel' ) && current_user_can( 'edit_theme_options' ) ) {
|
||||
if ( isset( $_GET['welcome'] ) ) {
|
||||
|
|
|
|||
|
|
@ -1335,7 +1335,7 @@ function do_meta_boxes( $screen, $context, $object ) {
|
|||
|
||||
echo '<div class="handle-actions hide-if-no-js">';
|
||||
|
||||
echo '<button type="button" class="handle-order-higher" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
|
||||
echo '<button type="button" class="handle-order-higher postbox-arrange-arrow hidden" aria-disabled="true" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
|
||||
echo '<span class="screen-reader-text">' . __( 'Move up' ) . '</span>';
|
||||
echo '<span class="order-higher-indicator" aria-hidden="true"></span>';
|
||||
echo '</button>';
|
||||
|
|
@ -1345,7 +1345,7 @@ function do_meta_boxes( $screen, $context, $object ) {
|
|||
$widget_title
|
||||
) . '</span>';
|
||||
|
||||
echo '<button type="button" class="handle-order-lower" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
|
||||
echo '<button type="button" class="handle-order-lower postbox-arrange-arrow hidden" aria-disabled="true" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
|
||||
echo '<span class="screen-reader-text">' . __( 'Move down' ) . '</span>';
|
||||
echo '<span class="order-lower-indicator" aria-hidden="true"></span>';
|
||||
echo '</button>';
|
||||
|
|
|
|||
|
|
@ -180,10 +180,8 @@ jQuery(document).ready( function($) {
|
|||
|
||||
autoResizeTextarea();
|
||||
};
|
||||
window.quickPressLoad();
|
||||
|
||||
// Enable the dragging functionality of the widgets.
|
||||
$( '.meta-box-sortables' ).sortable( 'option', 'containment', '#wpwrap' );
|
||||
window.quickPressLoad();
|
||||
|
||||
/**
|
||||
* Adjust the height of the textarea based on the content.
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -9,8 +9,9 @@
|
|||
|
||||
/* global ajaxurl, postboxes */
|
||||
|
||||
(function($) {
|
||||
( function( $ ) {
|
||||
var $document = $( document ),
|
||||
$body = $( 'body' ),
|
||||
__ = wp.i18n.__;
|
||||
|
||||
/**
|
||||
|
|
@ -63,7 +64,7 @@
|
|||
}
|
||||
|
||||
if ( postboxes.page !== 'press-this' ) {
|
||||
postboxes.save_state( postboxes.page );
|
||||
postboxes.save_state();
|
||||
}
|
||||
|
||||
if ( id ) {
|
||||
|
|
@ -118,8 +119,8 @@
|
|||
return;
|
||||
}
|
||||
|
||||
// Move a postbox up.
|
||||
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 ( 0 === postboxWithinSortablesIndex ) {
|
||||
postboxes.handleOrderBetweenSortables( 'previous', button, postbox );
|
||||
|
|
@ -129,11 +130,9 @@
|
|||
postbox.prevAll( '.postbox:visible' ).eq( 0 ).before( postbox );
|
||||
button.focus();
|
||||
postboxes.updateOrderButtonsProperties();
|
||||
postboxes.save_order( postboxes.page );
|
||||
}
|
||||
|
||||
// Move a postbox down.
|
||||
if ( button.hasClass( 'handle-order-lower' ) ) {
|
||||
postboxes.save_order();
|
||||
} else if ( button.hasClass( 'handle-order-lower' ) ) {
|
||||
// Move a postbox down.
|
||||
// If the box is last within a sortable area, move it to the next sortable area.
|
||||
if ( postboxWithinSortablesIndex + 1 === postboxesWithinSortablesCount ) {
|
||||
postboxes.handleOrderBetweenSortables( 'next', button, postbox );
|
||||
|
|
@ -143,9 +142,8 @@
|
|||
postbox.nextAll( '.postbox:visible' ).eq( 0 ).after( postbox );
|
||||
button.focus();
|
||||
postboxes.updateOrderButtonsProperties();
|
||||
postboxes.save_order( postboxes.page );
|
||||
postboxes.save_order();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -191,8 +189,23 @@
|
|||
|
||||
postboxes._mark_area();
|
||||
button.focus();
|
||||
postboxes.updateOrderButtonsProperties();
|
||||
postboxes.save_order( postboxes.page );
|
||||
postboxes.save_order();
|
||||
},
|
||||
|
||||
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();
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -203,39 +216,37 @@
|
|||
* @return {void}
|
||||
*/
|
||||
updateOrderButtonsProperties: function() {
|
||||
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' );
|
||||
var elements = $( '.postbox:visible' ),
|
||||
containers = $( '.meta-box-sortables:visible' )
|
||||
.not( '.unused-container' )
|
||||
.filter( function( i, container ) {
|
||||
if ( i > 0 && container.clientHeight === 0 ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Enable all buttons as a reset first.
|
||||
moveUpButtons
|
||||
.attr( 'aria-disabled', 'false' )
|
||||
.removeClass( 'hidden' );
|
||||
moveDownButtons
|
||||
.attr( 'aria-disabled', 'false' )
|
||||
.removeClass( 'hidden' );
|
||||
return true;
|
||||
} );
|
||||
|
||||
// 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' );
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Set an aria-disabled=true attribute on the first visible "move" buttons.
|
||||
if ( firstSortablesId === firstPostboxSortablesId ) {
|
||||
$( firstPostbox ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
|
||||
// Reset.
|
||||
if ( $body.hasClass( 'screen-options-open' ) ) {
|
||||
$( '.postbox-arrange-arrow' ).removeClass( 'hidden' ).attr( 'aria-disabled', 'false' );
|
||||
}
|
||||
|
||||
// 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' );
|
||||
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' );
|
||||
}
|
||||
|
||||
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' );
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -252,9 +263,9 @@
|
|||
* @param {Function} args.pbhide A callback that is called when a postbox closes.
|
||||
* @return {void}
|
||||
*/
|
||||
add_postbox_toggles : function (page, args) {
|
||||
add_postbox_toggles: function ( page, args ) {
|
||||
var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
|
||||
$orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
|
||||
$orderButtons = $( '.postbox .postbox-arrange-arrow' );
|
||||
|
||||
this.page = page;
|
||||
this.init( page, args );
|
||||
|
|
@ -267,8 +278,8 @@
|
|||
/**
|
||||
* @since 2.7.0
|
||||
*/
|
||||
$('.postbox .hndle a').click( function(e) {
|
||||
e.stopPropagation();
|
||||
$( '.postbox .hndle a' ).on( 'click', function( event ) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -283,10 +294,11 @@
|
|||
*
|
||||
* @return {void}
|
||||
*/
|
||||
$( '.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');
|
||||
$( '.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' );
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -302,24 +314,26 @@
|
|||
*
|
||||
* @return {void}
|
||||
*/
|
||||
$('.hide-postbox-tog').bind('click.postboxes', function() {
|
||||
var $el = $(this),
|
||||
$( '.hide-postbox-tog' ).on( 'click.postboxes', function() {
|
||||
var $el = $( this ),
|
||||
boxId = $el.val(),
|
||||
$postbox = $( '#' + boxId );
|
||||
|
||||
if ( $el.prop( 'checked' ) ) {
|
||||
$postbox.show();
|
||||
|
||||
if ( $.isFunction( postboxes.pbshow ) ) {
|
||||
postboxes.pbshow( boxId );
|
||||
}
|
||||
} else {
|
||||
$postbox.hide();
|
||||
|
||||
if ( $.isFunction( postboxes.pbhide ) ) {
|
||||
postboxes.pbhide( boxId );
|
||||
}
|
||||
}
|
||||
|
||||
postboxes.save_state( page );
|
||||
postboxes.save_state();
|
||||
postboxes._mark_area();
|
||||
|
||||
/**
|
||||
|
|
@ -336,46 +350,44 @@
|
|||
*
|
||||
* @return {void}
|
||||
*/
|
||||
$('.columns-prefs input[type="radio"]').bind('click.postboxes', function(){
|
||||
var n = parseInt($(this).val(), 10);
|
||||
$( '.columns-prefs input[type="radio"]' ).on( 'click.postboxes', function() {
|
||||
var number = parseInt( $( this ).val(), 10 );
|
||||
|
||||
if ( n ) {
|
||||
postboxes._pb_edit(n);
|
||||
postboxes.save_order( page );
|
||||
if ( number ) {
|
||||
postboxes._pb_edit( number );
|
||||
postboxes.save_order();
|
||||
}
|
||||
});
|
||||
|
||||
// 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()
|
||||
} );
|
||||
},
|
||||
|
||||
/**
|
||||
* 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' );
|
||||
initializeSortable: function() {
|
||||
var hasScreenOptions = $document.find( '#screen-options-wrap' ).length > 0;
|
||||
|
||||
$.extend( this, args || {} );
|
||||
$('.meta-box-sortables').sortable({
|
||||
$( '.meta-box-sortables' ).sortable( {
|
||||
placeholder: 'sortable-placeholder',
|
||||
connectWith: '.meta-box-sortables',
|
||||
items: '.postbox',
|
||||
handle: '.hndle',
|
||||
cursor: 'move',
|
||||
delay: ( isMobile ? 200 : 0 ),
|
||||
delay: ( $body.hasClass( 'mobile' ) ? 200 : 0 ),
|
||||
distance: 2,
|
||||
tolerance: 'pointer',
|
||||
opacity: 0.65,
|
||||
forcePlaceholderSize: true,
|
||||
containment: '#wpwrap',
|
||||
|
||||
helper: function( event, element ) {
|
||||
/* `helper: 'clone'` is equivalent to `return element.clone();`
|
||||
* Cloning a checked radio and then inserting that clone next to the original
|
||||
|
|
@ -386,55 +398,86 @@
|
|||
*/
|
||||
return element.clone()
|
||||
.find( ':input' )
|
||||
.attr( 'name', function( i, currentName ) {
|
||||
return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
|
||||
} )
|
||||
.attr( 'name', function( i, currentName ) {
|
||||
return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
|
||||
} )
|
||||
.end();
|
||||
},
|
||||
opacity: 0.65,
|
||||
start: function() {
|
||||
$( 'body' ).addClass( 'is-dragging-metaboxes' );
|
||||
// Pretend the Screen Options tab exists.
|
||||
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.
|
||||
$( '.meta-box-sortables' ).sortable( 'refreshPositions' );
|
||||
},
|
||||
stop: function() {
|
||||
var $el = $( this );
|
||||
|
||||
$( 'body' ).removeClass( 'is-dragging-metaboxes' );
|
||||
if ( ! hasScreenOptions ) {
|
||||
$body.removeClass( 'screen-options-open' );
|
||||
}
|
||||
|
||||
if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
|
||||
$el.sortable('cancel');
|
||||
$el.sortable( 'cancel' );
|
||||
return;
|
||||
}
|
||||
|
||||
postboxes.updateOrderButtonsProperties();
|
||||
postboxes.save_order(page);
|
||||
},
|
||||
receive: function(e,ui) {
|
||||
if ( 'dashboard_browser_nag' == ui.item[0].id )
|
||||
$(ui.sender).sortable('cancel');
|
||||
|
||||
postboxes._mark_area();
|
||||
postboxes.save_order();
|
||||
},
|
||||
receive: function( event, ui ) {
|
||||
if ( 'dashboard_browser_nag' == ui.item[0].id ) {
|
||||
$( ui.sender ).sortable( 'cancel' );
|
||||
}
|
||||
|
||||
$document.trigger( 'postbox-moved', ui.item );
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
if ( isMobile ) {
|
||||
$(document.body).bind('orientationchange.postboxes', function(){ postboxes._pb_change(); });
|
||||
/**
|
||||
* 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(); } );
|
||||
this._pb_change();
|
||||
}
|
||||
|
||||
this._mark_area();
|
||||
|
||||
// Update the "move" buttons properties.
|
||||
// Set the "arrange" (up/down) buttons properties on page load...
|
||||
this.updateOrderButtonsProperties();
|
||||
$document.on( 'postbox-toggled', this.updateOrderButtonsProperties );
|
||||
|
||||
// ...and keep updating it when postboxes are added or removed by using the checkboxes in Screen Options.
|
||||
$document.on( 'postbox-toggled', this._mark_area );
|
||||
|
||||
// Set the handle buttons `aria-expanded` attribute initial value on page load.
|
||||
$handleButtons.each( function () {
|
||||
$( '.postbox .handlediv' ).each( function () {
|
||||
var $el = $( this );
|
||||
$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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -450,23 +493,23 @@
|
|||
* @param {string} page The page we are currently on.
|
||||
* @return {void}
|
||||
*/
|
||||
save_state : function(page) {
|
||||
save_state : function() {
|
||||
var closed, hidden;
|
||||
|
||||
// Return on the nav-menus.php screen, see #35112.
|
||||
if ( 'nav-menus' === page ) {
|
||||
if ( 'nav-menus' === postboxes.page ) {
|
||||
return;
|
||||
}
|
||||
|
||||
closed = $( '.postbox' ).filter( '.closed' ).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',
|
||||
closed: closed,
|
||||
hidden: hidden,
|
||||
closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
|
||||
page: page
|
||||
closedpostboxesnonce: $( '#closedpostboxesnonce' ).val(),
|
||||
page: postboxes.page
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -479,20 +522,17 @@
|
|||
*
|
||||
* @memberof postboxes
|
||||
*
|
||||
* @param {string} page The page we are currently on.
|
||||
* @return {void}
|
||||
*/
|
||||
save_order : function(page) {
|
||||
var postVars, page_columns = $('.columns-prefs input:checked').val() || 0;
|
||||
|
||||
postVars = {
|
||||
save_order : function() {
|
||||
var postVars = {
|
||||
action: 'meta-box-order',
|
||||
_ajax_nonce: $('#meta-box-order-nonce').val(),
|
||||
page_columns: page_columns,
|
||||
page: page
|
||||
_ajax_nonce: $( '#meta-box-order-nonce' ).val(),
|
||||
page_columns: $( '.columns-prefs input:checked' ).val() || 0,
|
||||
page: postboxes.page
|
||||
};
|
||||
|
||||
$('.meta-box-sortables').each( function() {
|
||||
$( '.meta-box-sortables' ).each( function() {
|
||||
postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
|
||||
} );
|
||||
|
||||
|
|
@ -522,48 +562,49 @@
|
|||
* @return {void}
|
||||
*/
|
||||
_mark_area : function() {
|
||||
var visible = $( 'div.postbox:visible' ).length,
|
||||
visibleSortables = $( '#dashboard-widgets .meta-box-sortables:visible, #post-body .meta-box-sortables:visible' ),
|
||||
areAllVisibleSortablesEmpty = true;
|
||||
var elements = $( '.postbox:visible' ),
|
||||
containers = $( '.meta-box-sortables:visible' );
|
||||
|
||||
visibleSortables.each( function() {
|
||||
var t = $(this);
|
||||
containers.each( function( index, element ) {
|
||||
var container = $( element );
|
||||
|
||||
if ( visible == 1 || t.children( '.postbox:visible' ).length ) {
|
||||
t.removeClass('empty-container');
|
||||
areAllVisibleSortablesEmpty = false;
|
||||
}
|
||||
else {
|
||||
t.addClass('empty-container');
|
||||
if ( container.children( '.postbox:visible' ).length ) {
|
||||
container
|
||||
.removeClass( 'empty-container unused-container' )
|
||||
.removeAttr( 'data-emptystring' );
|
||||
} else {
|
||||
container.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' );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
postboxes.updateEmptySortablesText( visibleSortables, areAllVisibleSortablesEmpty );
|
||||
},
|
||||
|
||||
/**
|
||||
* 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;
|
||||
// Refresh up/down arrows attributes.
|
||||
if ( $body.hasClass( 'screen-options-open' ) ) {
|
||||
postboxes.updateOrderButtonsProperties();
|
||||
}
|
||||
|
||||
visibleSortables.each( function() {
|
||||
if ( $( this ).hasClass( 'empty-container' ) ) {
|
||||
$( this ).attr( 'data-emptyString', emptySortableText );
|
||||
}
|
||||
} );
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -579,11 +620,11 @@
|
|||
* @param {number} n The amount of columns to divide the post edit page in.
|
||||
* @return {void}
|
||||
*/
|
||||
_pb_edit : function(n) {
|
||||
var el = $('.metabox-holder').get(0);
|
||||
_pb_edit : function( n ) {
|
||||
var el = $( '.metabox-holder' ).get( 0 );
|
||||
|
||||
if ( el ) {
|
||||
el.className = el.className.replace(/columns-\d+/, 'columns-' + n);
|
||||
el.className = el.className.replace( /columns-\d+/, 'columns-' + n );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -614,16 +655,16 @@
|
|||
switch ( window.orientation ) {
|
||||
case 90:
|
||||
case -90:
|
||||
if ( !check.length || !check.is(':checked') )
|
||||
this._pb_edit(2);
|
||||
if ( ! check.length || ! check.is( ':checked' ) ) {
|
||||
this._pb_edit( 2 );
|
||||
}
|
||||
break;
|
||||
case 0:
|
||||
case 180:
|
||||
if ( $( '#poststuff' ).length ) {
|
||||
this._pb_edit(1);
|
||||
} else {
|
||||
if ( !check.length || !check.is(':checked') )
|
||||
this._pb_edit(2);
|
||||
this._pb_edit( 1 );
|
||||
} else if ( ! check.length || ! check.is( ':checked' ) ) {
|
||||
this._pb_edit( 2 );
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
|
@ -651,4 +692,4 @@
|
|||
pbhide : false
|
||||
};
|
||||
|
||||
}(jQuery));
|
||||
}( jQuery ));
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -13,7 +13,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.6-alpha-49178';
|
||||
$wp_version = '5.6-alpha-49179';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue