<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[35161] trunk/src/wp-admin: Screen options: Improve the "Apply" button</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/35161">35161</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/35161","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>helen</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2015-10-14 18:57:16 +0000 (Wed, 14 Oct 2015)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Screen options: Improve the "Apply" button
Previously the button was output as a part of the per-page option rendering, inline with that input. While this was appropriate for core's usage, the `screen_settings` filter has allowed plugins to place additional items at the bottom of the panel, which a number take advantage of. This leads to confusing situations where plugins that don't save settings via Ajax either have to add their own button or piggyback onto the existing button, which doesn't make any sense in the flow of additional options. It also hinders core from adding any other options that need to be submitted.
Also, when the screen options panel is open, a submit button there is the primary action at that moment. The "Apply" button also does a full page load, which a primary button indicates better.
fixes <a href="https://core.trac.wordpress.org/ticket/34295">#34295</a>. see <a href="https://core.trac.wordpress.org/ticket/22222">#22222</a>, <a href="https://core.trac.wordpress.org/ticket/23738">#23738</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscommoncss">trunk/src/wp-admin/css/common.css</a></li>
<li><a href="#trunksrcwpadminincludesclasswpscreenphp">trunk/src/wp-admin/includes/class-wp-screen.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscommoncss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/common.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/common.css 2015-10-14 17:43:42 UTC (rev 35160)
+++ trunk/src/wp-admin/css/common.css 2015-10-14 18:57:16 UTC (rev 35161)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1629,6 +1629,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.metabox-prefs .submit {
+ margin-top: 1em;
+ padding: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /*------------------------------------------------------------------------------
</span><span class="cx" style="display: block; padding: 0 10px"> 6.2 - Help Menu
</span><span class="cx" style="display: block; padding: 0 10px"> ------------------------------------------------------------------------------*/
</span></span></pre></div>
<a id="trunksrcwpadminincludesclasswpscreenphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/class-wp-screen.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/class-wp-screen.php 2015-10-14 17:43:42 UTC (rev 35160)
+++ trunk/src/wp-admin/includes/class-wp-screen.php 2015-10-14 18:57:16 UTC (rev 35161)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -993,6 +993,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->render_per_page_options();
</span><span class="cx" style="display: block; padding: 0 10px"> echo $this->_screen_settings;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Filter whether to show the Screen Options submit button.
+ *
+ * @since 4.4.0
+ *
+ * @param bool $show_button Whether to show Screen Options submit button.
+ * Default false.
+ * @param WP_Screen $this Current WP_Screen instance.
+ */
+ $show_button = apply_filters( 'screen_options_show_submit', false, $this );
+
+ if ( $show_button ) {
+ submit_button( __( 'Apply' ), 'primary', 'screen-options-apply', true );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> echo $form_end . $wrapper_end;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1155,6 +1170,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $per_page = apply_filters( 'edit_posts_per_page', $per_page, $this->post_type );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // This needs a submit button
+ add_filter( 'screen_options_show_submit', '__return_true' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <fieldset class="screen-options">
</span><span class="cx" style="display: block; padding: 0 10px"> <legend><?php _e( 'Pagination' ); ?></legend>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1163,10 +1181,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <input type="number" step="1" min="1" max="999" class="screen-per-page" name="wp_screen_options[value]"
</span><span class="cx" style="display: block; padding: 0 10px"> id="<?php echo esc_attr( $option ); ?>" maxlength="3"
</span><span class="cx" style="display: block; padding: 0 10px"> value="<?php echo esc_attr( $per_page ); ?>" />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?php endif;
-
- echo get_submit_button( __( 'Apply' ), 'button', 'screen-options-apply', false ); ?>
- <input type="hidden" name="wp_screen_options[option]" value="<?php echo esc_attr( $option ); ?>" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php endif; ?>
+ <input type="hidden" name="wp_screen_options[option]" value="<?php echo esc_attr( $option ); ?>" />
</ins><span class="cx" style="display: block; padding: 0 10px"> </fieldset>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre>
</div>
</div>
</body>
</html>