From fcf8dfd376bd5c15ea313aa14f896257664a4f8e Mon Sep 17 00:00:00 2001
From: Helen Hou-Sandi <helen@git.wordpress.org>
Date: Thu, 5 Oct 2017 04:24:52 +0000
Subject: [PATCH] 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 #31779.


git-svn-id: https://develop.svn.wordpress.org/trunk@41774 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css            |  4 ++++
 src/wp-admin/js/theme-plugin-editor.js | 28 ++++++++++++++++++++++++++
 src/wp-admin/plugin-editor.php         | 17 ++++++++++++++++
 src/wp-admin/theme-editor.php          | 25 +++++++++++++++++++++++
 4 files changed, 74 insertions(+)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index d91e8a1368..2d64bca75e 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -3147,6 +3147,10 @@ img {
 	line-height: 180%;
 }
 
+#file-editor-warning .file-editor-warning-content {
+	margin: 25px;
+}
+
 /* @todo: can we use a common class for these? */
 .nav-menus-php .item-edit:before,
 .widget-top .widget-action .toggle-indicator:before,
diff --git a/src/wp-admin/js/theme-plugin-editor.js b/src/wp-admin/js/theme-plugin-editor.js
index 3bb0788a6b..24c969fe55 100644
--- a/src/wp-admin/js/theme-plugin-editor.js
+++ b/src/wp-admin/js/theme-plugin-editor.js
@@ -46,6 +46,14 @@ wp.themePluginEditor = (function( $ ) {
 		component.form.on( 'submit', component.submit );
 		component.textarea = component.form.find( '#newcontent' );
 		component.textarea.on( 'change', component.onChange );
+		component.warning = $( '.file-editor-warning' );
+
+		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 );
+		};
+
 
 		if ( false !== component.codeEditor ) {
 			/*
@@ -66,6 +74,26 @@ wp.themePluginEditor = (function( $ ) {
 		} );
 	};
 
+	/**
+	 * 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();
+	};
+
 	/**
 	 * Callback for when a change happens.
 	 *
diff --git a/src/wp-admin/plugin-editor.php b/src/wp-admin/plugin-editor.php
index 636e1cf739..807cd5e09d 100644
--- a/src/wp-admin/plugin-editor.php
+++ b/src/wp-admin/plugin-editor.php
@@ -142,6 +142,7 @@ if ( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
 	);
 	wp_enqueue_script( 'wp-theme-plugin-editor' );
 	wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'jQuery( function( $ ) { wp.themePluginEditor.init( $( "#template" ), %s ); } )', wp_json_encode( $settings ) ) );
+	wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'wp.themePluginEditor.themeOrPlugin = "plugin";' ) );
 
 	require_once(ABSPATH . 'wp-admin/admin-header.php');
 
@@ -280,5 +281,21 @@ if ( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
 <br class="clear" />
 </div>
 <?php
+$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&#8217;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
 
 include(ABSPATH . "wp-admin/admin-footer.php");
diff --git a/src/wp-admin/theme-editor.php b/src/wp-admin/theme-editor.php
index b49013ffd8..ebac61b538 100644
--- a/src/wp-admin/theme-editor.php
+++ b/src/wp-admin/theme-editor.php
@@ -127,6 +127,7 @@ if ( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
 	);
 	wp_enqueue_script( 'wp-theme-plugin-editor' );
 	wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'jQuery( function( $ ) { wp.themePluginEditor.init( $( "#template" ), %s ); } )', wp_json_encode( $settings ) ) );
+	wp_add_inline_script( 'wp-theme-plugin-editor', 'wp.themePluginEditor.themeOrPlugin = "theme";' );
 
 	require_once( ABSPATH . 'wp-admin/admin-header.php' );
 
@@ -309,5 +310,29 @@ endif; // $error
 <br class="clear" />
 </div>
 <?php
+$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&#8217;t! Editing this code directly is dangerous, and can leave you unable to log back in to WordPress and undo changes. There&#8217;s no need to change your CSS here &mdash; you can edit and live preview CSS changes in WordPress&#8217;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&#8217;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
 
 include(ABSPATH . 'wp-admin/admin-footer.php' );