Skip to content

Commit 170cc4a

Browse files
poligilad-autopoligilad-auto
committed
Administration: Add box reordering toggle to Screen Options.
1 parent 0a9838d commit 170cc4a

12 files changed

Lines changed: 313 additions & 7 deletions

File tree

‎src/js/_enqueues/admin/common.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1859,6 +1859,7 @@ $( function() {
18591859
var width = navigator.userAgent.indexOf('AppleWebKit/') > -1 ? $window.width() : window.innerWidth;
18601860

18611861
if (
1862+
$body.hasClass( 'meta-box-reordering-disabled' ) ||
18621863
( width <= 782 ) ||
18631864
( 1 >= $sortables.find( '.ui-sortable-handle:visible' ).length && jQuery( '.columns-prefs-1 input' ).prop( 'checked' ) )
18641865
) {

‎src/js/_enqueues/admin/postbox.js‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,10 @@
104104
postboxWithinSortablesIndex = postboxesWithinSortables.index( postbox ),
105105
firstOrLastPositionMessage;
106106

107+
if ( ! postboxes.metaBoxReorderingEnabled ) {
108+
return;
109+
}
110+
107111
if ( 'dashboard_browser_nag' === postboxId ) {
108112
return;
109113
}
@@ -344,6 +348,13 @@
344348
postboxes.save_order( page );
345349
}
346350
});
351+
352+
$( '.meta-box-reordering-toggle' ).on( 'click.postboxes', function() {
353+
var enabled = $( this ).prop( 'checked' );
354+
355+
postboxes.setMetaBoxReordering( enabled );
356+
postboxes.save_meta_box_reordering_state( enabled );
357+
} );
347358
},
348359

349360
/**
@@ -419,6 +430,8 @@
419430
}
420431
});
421432

433+
this.setMetaBoxReordering( this.isMetaBoxReorderingEnabled() );
434+
422435
if ( isMobile ) {
423436
$(document.body).on('orientationchange.postboxes', function(){ postboxes._pb_change(); });
424437
this._pb_change();
@@ -437,6 +450,68 @@
437450
});
438451
},
439452

453+
/**
454+
* Checks whether meta box reordering is enabled.
455+
*
456+
* @since 7.1.0
457+
*
458+
* @return {boolean} Whether meta box reordering is enabled.
459+
*/
460+
isMetaBoxReorderingEnabled: function() {
461+
var $toggle = $( '#meta-box-reordering' );
462+
463+
if ( $toggle.length ) {
464+
return $toggle.prop( 'checked' );
465+
}
466+
467+
return ! $( document.body ).hasClass( 'meta-box-reordering-disabled' );
468+
},
469+
470+
/**
471+
* Enables or disables the meta box reordering UI.
472+
*
473+
* @since 7.1.0
474+
*
475+
* @param {boolean} enabled Whether reordering should be enabled.
476+
* @return {void}
477+
*/
478+
setMetaBoxReordering: function( enabled ) {
479+
var $body = $( document.body ),
480+
$orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
481+
482+
this.metaBoxReorderingEnabled = !! enabled;
483+
484+
$body
485+
.toggleClass( 'meta-box-reordering-enabled', this.metaBoxReorderingEnabled )
486+
.toggleClass( 'meta-box-reordering-disabled', ! this.metaBoxReorderingEnabled );
487+
488+
if ( this.metaBoxReorderingEnabled ) {
489+
$orderButtons
490+
.prop( 'disabled', false )
491+
.removeAttr( 'tabindex aria-hidden' );
492+
this.updateOrderButtonsProperties();
493+
} else {
494+
$orderButtons
495+
.prop( 'disabled', true )
496+
.attr( {
497+
'aria-hidden': 'true',
498+
tabindex: '-1'
499+
} );
500+
}
501+
502+
if ( window.wpResponsive && window.wpResponsive.maybeDisableSortables ) {
503+
window.wpResponsive.maybeDisableSortables();
504+
return;
505+
}
506+
507+
try {
508+
$( '.meta-box-sortables' )
509+
.sortable( this.metaBoxReorderingEnabled ? 'enable' : 'disable' )
510+
.find( '.ui-sortable-handle' )
511+
.toggleClass( 'is-non-sortable', ! this.metaBoxReorderingEnabled );
512+
} catch ( e ) {}
513+
},
514+
440515
/**
441516
* Saves the state of the postboxes to the server.
442517
*
@@ -476,6 +551,30 @@
476551
);
477552
},
478553

554+
/**
555+
* Saves the meta box reordering setting to the server.
556+
*
557+
* @since 7.1.0
558+
*
559+
* @memberof postboxes
560+
*
561+
* @param {boolean} enabled Whether meta box reordering is enabled.
562+
* @return {void}
563+
*/
564+
save_meta_box_reordering_state : function( enabled ) {
565+
$.post(
566+
ajaxurl,
567+
{
568+
action: 'meta-box-reordering',
569+
enabled: enabled ? 1 : 0,
570+
screenoptionnonce: $( '#screenoptionnonce' ).val()
571+
},
572+
function() {
573+
wp.a11y.speak( __( 'Screen Options updated.' ) );
574+
}
575+
);
576+
},
577+
479578
/**
480579
* Saves the order of the postboxes to the server.
481580
*

‎src/wp-admin/admin-ajax.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
'add-user',
8080
'closed-postboxes',
8181
'hidden-columns',
82+
'meta-box-reordering',
8283
'update-welcome-panel',
8384
'menu-get-metabox',
8485
'wp-link-ajax',

‎src/wp-admin/admin-header.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,8 @@
214214
$admin_body_class .= ' block-editor-page wp-embed-responsive';
215215
}
216216

217+
$admin_body_class .= wp_is_meta_box_reordering_enabled() ? ' meta-box-reordering-enabled' : ' meta-box-reordering-disabled';
218+
217219
$admin_body_class .= ' wp-theme-' . sanitize_html_class( get_template() );
218220
if ( is_child_theme() ) {
219221
$admin_body_class .= ' wp-child-theme-' . sanitize_html_class( get_stylesheet() );

‎src/wp-admin/css/common.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1947,6 +1947,18 @@ p.auto-update-status {
19471947
line-height: 2.35;
19481948
}
19491949

1950+
.metabox-prefs > p {
1951+
margin: 0 0 8px;
1952+
}
1953+
1954+
.additional-settings-prefs {
1955+
margin-top: 14px;
1956+
}
1957+
1958+
.additional-settings-prefs legend {
1959+
padding-bottom: 2px;
1960+
}
1961+
19501962
#number-of-columns {
19511963
display: inline-block;
19521964
vertical-align: middle;
@@ -2244,6 +2256,11 @@ html.wp-toolbar {
22442256
width: 1.62rem;
22452257
}
22462258

2259+
.js.meta-box-reordering-disabled .postbox .handle-order-higher,
2260+
.js.meta-box-reordering-disabled .postbox .handle-order-lower {
2261+
display: none;
2262+
}
2263+
22472264
/* Post box order buttons in the block editor meta boxes area. */
22482265
.edit-post-meta-boxes-area .postbox .handle-order-higher,
22492266
.edit-post-meta-boxes-area .postbox .handle-order-lower {

‎src/wp-admin/css/dashboard.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1385,6 +1385,10 @@ a.rsswidget {
13851385
}
13861386
}
13871387

1388+
.js.meta-box-reordering-disabled #dashboard-widgets .postbox-container .empty-container {
1389+
display: none;
1390+
}
1391+
13881392
@media screen and (max-width: 870px) {
13891393
/* @deprecated 5.9.0 -- Lists removed from welcome panel. */
13901394
.welcome-panel .welcome-panel-column li {

‎src/wp-admin/includes/ajax-actions.php‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1856,6 +1856,25 @@ function wp_ajax_hidden_columns() {
18561856
wp_die( 1 );
18571857
}
18581858

1859+
/**
1860+
* Handles the meta box reordering setting via Ajax.
1861+
*
1862+
* @since 7.1.0
1863+
*/
1864+
function wp_ajax_meta_box_reordering() {
1865+
check_ajax_referer( 'screen-options-nonce', 'screenoptionnonce' );
1866+
1867+
$user = wp_get_current_user();
1868+
if ( ! $user ) {
1869+
wp_die( -1 );
1870+
}
1871+
1872+
$enabled = isset( $_POST['enabled'] ) && '1' === (string) $_POST['enabled'];
1873+
update_user_meta( $user->ID, 'meta_box_reordering', $enabled ? 'enabled' : 'disabled' );
1874+
1875+
wp_die( 1 );
1876+
}
1877+
18591878
/**
18601879
* Handles updating whether to display the welcome panel via AJAX.
18611880
*

‎src/wp-admin/includes/class-wp-screen.php‎

Lines changed: 66 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1006,11 +1006,23 @@ public function show_screen_options() {
10061006

10071007
$this->_screen_settings = '';
10081008

1009+
$additional_settings = '';
1010+
1011+
if ( $this->show_meta_box_reordering_options() ) {
1012+
$additional_settings .= $this->get_meta_box_reordering_option();
1013+
}
1014+
10091015
if ( 'post' === $this->base ) {
1010-
$expand = '<fieldset class="editor-expand hidden"><legend>' . __( 'Additional settings' ) . '</legend><label for="editor-expand-toggle">';
1011-
$expand .= '<input type="checkbox" id="editor-expand-toggle"' . checked( get_user_setting( 'editor_expand', 'on' ), 'on', false ) . ' />';
1012-
$expand .= __( 'Enable full-height editor and distraction-free functionality.' ) . '</label></fieldset>';
1013-
$this->_screen_settings = $expand;
1016+
$additional_settings .= '<label class="editor-expand hidden" for="editor-expand-toggle">';
1017+
$additional_settings .= '<input type="checkbox" id="editor-expand-toggle"' . checked( get_user_setting( 'editor_expand', 'on' ), 'on', false ) . ' /> ';
1018+
$additional_settings .= __( 'Enable full-height editor and distraction-free functionality.' ) . '</label>';
1019+
}
1020+
1021+
if ( $additional_settings ) {
1022+
$this->_screen_settings = '<fieldset class="metabox-prefs additional-settings-prefs">';
1023+
$this->_screen_settings .= '<legend>' . __( 'Additional settings' ) . '</legend>';
1024+
$this->_screen_settings .= $additional_settings;
1025+
$this->_screen_settings .= '</fieldset>';
10141026
}
10151027

10161028
/**
@@ -1023,7 +1035,7 @@ public function show_screen_options() {
10231035
*/
10241036
$this->_screen_settings = apply_filters( 'screen_settings', $this->_screen_settings, $this );
10251037

1026-
if ( $this->_screen_settings || $this->_options ) {
1038+
if ( $this->_screen_settings || $this->_options || $this->show_meta_box_reordering_options() ) {
10271039
$show_screen = true;
10281040
}
10291041

@@ -1120,8 +1132,8 @@ public function render_meta_boxes_preferences() {
11201132
<fieldset class="metabox-prefs">
11211133
<legend><?php _e( 'Screen elements' ); ?></legend>
11221134
<p>
1123-
<?php _e( 'Some screen elements can be shown or hidden by using the checkboxes.' ); ?>
1124-
<?php _e( 'Expand or collapse the elements by clicking on their headings, and arrange them by dragging their headings or by clicking on the up and down arrows.' ); ?>
1135+
<?php _e( 'Use the checkboxes to show or hide screen elements.' ); ?>
1136+
<?php _e( 'Expand or collapse screen elements by clicking their headings.' ); ?>
11251137
</p>
11261138
<div class="metabox-prefs-container">
11271139
<?php
@@ -1148,6 +1160,53 @@ public function render_meta_boxes_preferences() {
11481160
<?php
11491161
}
11501162

1163+
/**
1164+
* Renders the option to enable or disable meta box reordering.
1165+
*
1166+
* @since 7.1.0
1167+
*/
1168+
public function render_meta_box_reordering_options() {
1169+
if ( ! $this->show_meta_box_reordering_options() ) {
1170+
return;
1171+
}
1172+
1173+
?>
1174+
<fieldset class="metabox-prefs additional-settings-prefs">
1175+
<legend><?php _e( 'Additional settings' ); ?></legend>
1176+
<?php echo $this->get_meta_box_reordering_option(); ?>
1177+
</fieldset>
1178+
<?php
1179+
}
1180+
1181+
/**
1182+
* Gets the option to enable or disable meta box reordering.
1183+
*
1184+
* @since 7.1.0
1185+
*
1186+
* @return string Meta box reordering option markup.
1187+
*/
1188+
private function get_meta_box_reordering_option() {
1189+
return '<label for="meta-box-reordering">'
1190+
. '<input class="meta-box-reordering-toggle" name="meta-box-reordering" type="checkbox" id="meta-box-reordering" value="enabled" ' . checked( wp_is_meta_box_reordering_enabled(), true, false ) . ' /> '
1191+
. __( 'Enable box reordering' )
1192+
. '</label>';
1193+
}
1194+
1195+
/**
1196+
* Determines whether to show the meta box reordering option.
1197+
*
1198+
* @since 7.1.0
1199+
*
1200+
* @global array $wp_meta_boxes Global meta box state.
1201+
*
1202+
* @return bool Whether to show the option.
1203+
*/
1204+
private function show_meta_box_reordering_options() {
1205+
global $wp_meta_boxes;
1206+
1207+
return ! empty( $wp_meta_boxes[ $this->id ] );
1208+
}
1209+
11511210
/**
11521211
* Renders the list table columns preferences.
11531212
*

‎src/wp-admin/includes/screen.php‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,19 @@ function get_hidden_meta_boxes( $screen ) {
194194
return apply_filters( 'hidden_meta_boxes', $hidden, $screen, $use_defaults );
195195
}
196196

197+
/**
198+
* Determines whether meta box reordering is enabled.
199+
*
200+
* @since 7.1.0
201+
*
202+
* @return bool Whether meta box reordering is enabled.
203+
*/
204+
function wp_is_meta_box_reordering_enabled() {
205+
$setting = get_user_option( 'meta_box_reordering' );
206+
207+
return false === $setting ? true : 'disabled' !== $setting;
208+
}
209+
197210
/**
198211
* Register and configure an admin screen option
199212
*

‎tests/phpunit/includes/testcase-ajax.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ abstract class WP_Ajax_UnitTestCase extends WP_UnitTestCase {
6666
'add-user',
6767
'closed-postboxes',
6868
'hidden-columns',
69+
'meta-box-reordering',
6970
'update-welcome-panel',
7071
'menu-get-metabox',
7172
'wp-link-ajax',

0 commit comments

Comments
 (0)