<!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>[41774] trunk/src/wp-admin: File Editors: Introduce an interstitial warning upon first visit.</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/41774">41774</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/41774","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>2017-10-05 04:24:52 +0000 (Thu, 05 Oct 2017)</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'>File Editors: Introduce an interstitial warning upon first visit.
This is an effort to provide a speed bump before heading into something potentially destructive and some education for users on better alternatives, even as we make the file editors safer to use. Each user, including existing users, will be shown a one-time dismissible modal warning on their first visit to each of the theme and plugin file editors.
Copy tweaks to come.
props michelleweber, Ipstenu, melchoyce, adamsilverstein, westonruter, toddnestor, aryamaaru, ZaneMatthew, cliffseal, helen.
fixes <a href="https://core.trac.wordpress.org/ticket/31779">#31779</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscommoncss">trunk/src/wp-admin/css/common.css</a></li>
<li><a href="#trunksrcwpadminjsthemeplugineditorjs">trunk/src/wp-admin/js/theme-plugin-editor.js</a></li>
<li><a href="#trunksrcwpadminplugineditorphp">trunk/src/wp-admin/plugin-editor.php</a></li>
<li><a href="#trunksrcwpadminthemeeditorphp">trunk/src/wp-admin/theme-editor.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 2017-10-05 04:22:09 UTC (rev 41773)
+++ trunk/src/wp-admin/css/common.css 2017-10-05 04:24:52 UTC (rev 41774)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3147,6 +3147,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 180%;
</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">+#file-editor-warning .file-editor-warning-content {
+ margin: 25px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* @todo: can we use a common class for these? */
</span><span class="cx" style="display: block; padding: 0 10px"> .nav-menus-php .item-edit:before,
</span><span class="cx" style="display: block; padding: 0 10px"> .widget-top .widget-action .toggle-indicator:before,
</span></span></pre></div>
<a id="trunksrcwpadminjsthemeplugineditorjs"></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/js/theme-plugin-editor.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/theme-plugin-editor.js 2017-10-05 04:22:09 UTC (rev 41773)
+++ trunk/src/wp-admin/js/theme-plugin-editor.js 2017-10-05 04:24:52 UTC (rev 41774)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -46,7 +46,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> component.form.on( 'submit', component.submit );
</span><span class="cx" style="display: block; padding: 0 10px"> component.textarea = component.form.find( '#newcontent' );
</span><span class="cx" style="display: block; padding: 0 10px"> component.textarea.on( 'change', component.onChange );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ component.warning = $( '.file-editor-warning' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( component.warning.length > 0 ) {
+ $( 'body' ).addClass( 'modal-open' );
+ component.warning.find( '.file-editor-warning-dismiss' ).focus();
+ component.warning.on( 'click', '.file-editor-warning-dismiss', component.dismissWarning );
+ };
+
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( false !== component.codeEditor ) {
</span><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px"> * Defer adding notices until after DOM ready as workaround for WP Admin injecting
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -67,6 +75,26 @@
</span><span class="cx" style="display: block; padding: 0 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">+ * Dismiss the warning modal.
+ *
+ * @since 4.9.0
+ * @returns {void}
+ */
+ component.dismissWarning = function() {
+
+ wp.ajax.post( 'dismiss-wp-pointer', {
+ pointer: component.themeOrPlugin + '_editor_notice'
+ });
+
+ // hide modal
+ component.warning.remove();
+ $( 'body' ).removeClass( 'modal-open' );
+
+ // return focus - is this a trap?
+ component.instance.codemirror.focus();
+ };
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Callback for when a change happens.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.9.0
</span></span></pre></div>
<a id="trunksrcwpadminplugineditorphp"></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/plugin-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/plugin-editor.php 2017-10-05 04:22:09 UTC (rev 41773)
+++ trunk/src/wp-admin/plugin-editor.php 2017-10-05 04:24:52 UTC (rev 41774)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -142,6 +142,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> wp_enqueue_script( 'wp-theme-plugin-editor' );
</span><span class="cx" style="display: block; padding: 0 10px"> wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'jQuery( function( $ ) { wp.themePluginEditor.init( $( "#template" ), %s ); } )', wp_json_encode( $settings ) ) );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'wp.themePluginEditor.themeOrPlugin = "plugin";' ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> require_once(ABSPATH . 'wp-admin/admin-header.php');
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -280,5 +281,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <br class="clear" />
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$dismissed_pointers = explode( ',', (string) get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) );
+if ( ! in_array( 'plugin_editor_notice', $dismissed_pointers, true ) ) :
+?>
+<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js">
+ <div class="notification-dialog-background"></div>
+ <div class="notification-dialog" role="dialog" aria-labelledby="file-editor-warning-title" tabindex="0">
+ <div class="file-editor-warning-content">
+ <h1 id="file-editor-warning-title"><?php _e( 'Heads up!' ); ?></h1>
+ <p><?php _e( 'You appear to be making direct edits to your plugin in the WordPress dashboard. We recommend that you don’t! Editing plugins directly may introduce incompatibilities that break your theme or other plugins, and can leave you unable to log back in to WordPress and undo changes.' ); ?></p>
+ <p><?php _e( 'If you absolutely have to edit this plugin, create a copy with a new name and hang on to the original version, so you can re-enable a functional version if something goes wrong.' ); ?></p>
+ <p><button type="button" class="file-editor-warning-dismiss button-primary"><?php _e( 'I understand' ); ?></button></p>
+ </div>
+ </div>
+</div>
+<?php
+endif; // editor warning notice
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> include(ABSPATH . "wp-admin/admin-footer.php");
</span></span></pre></div>
<a id="trunksrcwpadminthemeeditorphp"></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/theme-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/theme-editor.php 2017-10-05 04:22:09 UTC (rev 41773)
+++ trunk/src/wp-admin/theme-editor.php 2017-10-05 04:24:52 UTC (rev 41774)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -127,6 +127,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> wp_enqueue_script( 'wp-theme-plugin-editor' );
</span><span class="cx" style="display: block; padding: 0 10px"> wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'jQuery( function( $ ) { wp.themePluginEditor.init( $( "#template" ), %s ); } )', wp_json_encode( $settings ) ) );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp_add_inline_script( 'wp-theme-plugin-editor', 'wp.themePluginEditor.themeOrPlugin = "theme";' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . 'wp-admin/admin-header.php' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -309,5 +310,29 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <br class="clear" />
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$dismissed_pointers = explode( ',', (string) get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) );
+if ( ! in_array( 'theme_editor_notice', $dismissed_pointers, true ) ) :
+?>
+<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js">
+ <div class="notification-dialog-background"></div>
+ <div class="notification-dialog" role="dialog" aria-labelledby="file-editor-warning-title" tabindex="0">
+ <div class="file-editor-warning-content">
+ <h1 id="file-editor-warning-title"><?php _e( 'Heads up!' ); ?></h1>
+ <p>
+ <?php
+ echo sprintf(
+ /* translators: %s is a link to Custom CSS section in the Customizer. */
+ __( 'You appear to be making direct edits to your theme in the WordPress Dashboard. We recommend that you don’t! Editing this code directly is dangerous, and can leave you unable to log back in to WordPress and undo changes. There’s no need to change your CSS here — you can edit and live preview CSS changes in WordPress’s <a href="%s">built in CSS editor</a>.' ),
+ esc_url( add_query_arg( 'autofocus[section]', 'custom_css', admin_url( 'customize.php' ) ) )
+ );
+ ?>
+ </p>
+ <p><?php _e( 'If you decide to go ahead with direct edits anyway, make sure to back up all your site’s files before making changes so you can restore a functional version if something goes wrong.' ); ?></p>
+ <p><button type="button" class="file-editor-warning-dismiss button-primary"><?php _e( 'I understand' ); ?></button></p>
+ </div>
+ </div>
+</div>
+<?php
+endif; // editor warning notice
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> include(ABSPATH . 'wp-admin/admin-footer.php' );
</span></span></pre>
</div>
</div>
</body>
</html>