vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-12 04:40:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix and improve arranging of postboxes/metaboxes:

Browse Source 
- 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@49179 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz
2020-10-17 09:58:34 +00:00
parent 14e3433b85
commit 6a2ef2d5b2
7 changed files with 248 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/css/common.css
+6 -2
View File
@@ -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;
}
src/wp-admin/css/dashboard.css
+18 -17
View File
@@ -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 {
src/wp-admin/css/edit.css
+16 -17
View File
@@ -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;
}
src/wp-admin/includes/class-wp-screen.php
+7 -2
View File
@@ -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'] ) ) {
src/wp-admin/includes/template.php
+2 -2
View File
@@ -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>';