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.

Built from https://develop.svn.wordpress.org/trunk@41774


git-svn-id: http://core.svn.wordpress.org/trunk@41608 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2017-10-05 04:25:48 +00:00
parent 7f7dffafbb
commit b698881469
9 changed files with 82 additions and 4 deletions

View File

@ -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,

File diff suppressed because one or more lines are too long

View File

@ -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,

File diff suppressed because one or more lines are too long

View File

@ -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.
*

View File

@ -1 +1 @@
window.wp||(window.wp={}),wp.themePluginEditor=function(a){"use strict";var b={l10n:{lintError:{singular:"",plural:""},saveAlert:""},codeEditor:{},instance:null,noticeElements:{},dirty:!1,lintErrors:[]};return b.init=function(c,d){b.form=c,d&&a.extend(b,d),b.noticeTemplate=wp.template("wp-file-editor-notice"),b.noticesContainer=b.form.find(".editor-notices"),b.submitButton=b.form.find(":input[name=submit]"),b.spinner=b.form.find(".submit .spinner"),b.form.on("submit",b.submit),b.textarea=b.form.find("#newcontent"),b.textarea.on("change",b.onChange),!1!==b.codeEditor&&_.defer(function(){b.initCodeEditor()}),a(window).on("beforeunload",function(){if(b.dirty)return b.l10n.saveAlert})},b.onChange=function(){b.dirty=!0,b.removeNotice("file_saved")},b.submit=function(c){var d,e={};if(c.preventDefault(),a.each(b.form.serializeArray(),function(){e[this.name]=this.value}),b.instance&&(e.newcontent=b.instance.codemirror.getValue()),!b.isSaving){if(b.lintErrors.length)return void b.instance.codemirror.setCursor(b.lintErrors[0].from.line);b.isSaving=!0,b.textarea.prop("readonly",!0),b.instance&&b.instance.codemirror.setOption("readOnly",!0),b.spinner.addClass("is-active"),d=wp.ajax.post("edit-theme-plugin-file",e),b.lastSaveNoticeCode&&b.removeNotice(b.lastSaveNoticeCode),d.done(function(a){b.lastSaveNoticeCode="file_saved",b.addNotice({code:b.lastSaveNoticeCode,type:"success",message:a.message,dismissible:!0}),b.dirty=!1}),d.fail(function(c){var d=a.extend({code:"save_error"},c,{type:"error",dismissible:!0});b.lastSaveNoticeCode=d.code,b.addNotice(d)}),d.always(function(){b.spinner.removeClass("is-active"),b.isSaving=!1,b.textarea.prop("readonly",!1),b.instance&&b.instance.codemirror.setOption("readOnly",!1)})}},b.addNotice=function(c){var d;if(!c.code)throw new Error("Missing code.");return b.removeNotice(c.code),d=a(b.noticeTemplate(c)),d.hide(),d.find(".notice-dismiss").on("click",function(){b.removeNotice(c.code),c.onDismiss&&c.onDismiss(c)}),wp.a11y.speak(c.message),b.noticesContainer.append(d),d.slideDown("fast"),b.noticeElements[c.code]=d,d},b.removeNotice=function(c){return!!b.noticeElements[c]&&(b.noticeElements[c].slideUp("fast",function(){a(this).remove()}),delete b.noticeElements[c],!0)},b.initCodeEditor=function(){var c,d;c=a.extend({},b.codeEditor),c.onTabPrevious=function(){a("#templateside").find(":tabbable").last().focus()},c.onTabNext=function(){a("#template").find(":tabbable:not(.CodeMirror-code)").first().focus()},c.onChangeLintingErrors=function(a){b.lintErrors=a,0===a.length&&b.submitButton.toggleClass("disabled",!1)},c.onUpdateErrorNotice=function(a){var d,e;b.submitButton.toggleClass("disabled",a.length>0),0!==a.length?(d=1===a.length?b.l10n.lintError.singular.replace("%d","1"):b.l10n.lintError.plural.replace("%d",String(a.length)),e=b.addNotice({code:"lint_errors",type:"error",message:d,dismissible:!1}),e.find("input[type=checkbox]").on("click",function(){c.onChangeLintingErrors([]),b.removeNotice("lint_errors")})):b.removeNotice("lint_errors")},d=wp.codeEditor.initialize(a("#newcontent"),c),d.codemirror.on("change",b.onChange),a(d.codemirror.display.lineDiv).attr({role:"textbox","aria-multiline":"true","aria-labelledby":"theme-plugin-editor-label","aria-describedby":"editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4"}),a("#theme-plugin-editor-label").on("click",function(){d.codemirror.focus()}),b.instance=d},b}(jQuery);
window.wp||(window.wp={}),wp.themePluginEditor=function(a){"use strict";var b={l10n:{lintError:{singular:"",plural:""},saveAlert:""},codeEditor:{},instance:null,noticeElements:{},dirty:!1,lintErrors:[]};return b.init=function(c,d){b.form=c,d&&a.extend(b,d),b.noticeTemplate=wp.template("wp-file-editor-notice"),b.noticesContainer=b.form.find(".editor-notices"),b.submitButton=b.form.find(":input[name=submit]"),b.spinner=b.form.find(".submit .spinner"),b.form.on("submit",b.submit),b.textarea=b.form.find("#newcontent"),b.textarea.on("change",b.onChange),b.warning=a(".file-editor-warning"),b.warning.length>0&&(a("body").addClass("modal-open"),b.warning.find(".file-editor-warning-dismiss").focus(),b.warning.on("click",".file-editor-warning-dismiss",b.dismissWarning)),!1!==b.codeEditor&&_.defer(function(){b.initCodeEditor()}),a(window).on("beforeunload",function(){if(b.dirty)return b.l10n.saveAlert})},b.dismissWarning=function(){wp.ajax.post("dismiss-wp-pointer",{pointer:b.themeOrPlugin+"_editor_notice"}),b.warning.remove(),a("body").removeClass("modal-open"),b.instance.codemirror.focus()},b.onChange=function(){b.dirty=!0,b.removeNotice("file_saved")},b.submit=function(c){var d,e={};if(c.preventDefault(),a.each(b.form.serializeArray(),function(){e[this.name]=this.value}),b.instance&&(e.newcontent=b.instance.codemirror.getValue()),!b.isSaving){if(b.lintErrors.length)return void b.instance.codemirror.setCursor(b.lintErrors[0].from.line);b.isSaving=!0,b.textarea.prop("readonly",!0),b.instance&&b.instance.codemirror.setOption("readOnly",!0),b.spinner.addClass("is-active"),d=wp.ajax.post("edit-theme-plugin-file",e),b.lastSaveNoticeCode&&b.removeNotice(b.lastSaveNoticeCode),d.done(function(a){b.lastSaveNoticeCode="file_saved",b.addNotice({code:b.lastSaveNoticeCode,type:"success",message:a.message,dismissible:!0}),b.dirty=!1}),d.fail(function(c){var d=a.extend({code:"save_error"},c,{type:"error",dismissible:!0});b.lastSaveNoticeCode=d.code,b.addNotice(d)}),d.always(function(){b.spinner.removeClass("is-active"),b.isSaving=!1,b.textarea.prop("readonly",!1),b.instance&&b.instance.codemirror.setOption("readOnly",!1)})}},b.addNotice=function(c){var d;if(!c.code)throw new Error("Missing code.");return b.removeNotice(c.code),d=a(b.noticeTemplate(c)),d.hide(),d.find(".notice-dismiss").on("click",function(){b.removeNotice(c.code),c.onDismiss&&c.onDismiss(c)}),wp.a11y.speak(c.message),b.noticesContainer.append(d),d.slideDown("fast"),b.noticeElements[c.code]=d,d},b.removeNotice=function(c){return!!b.noticeElements[c]&&(b.noticeElements[c].slideUp("fast",function(){a(this).remove()}),delete b.noticeElements[c],!0)},b.initCodeEditor=function(){var c,d;c=a.extend({},b.codeEditor),c.onTabPrevious=function(){a("#templateside").find(":tabbable").last().focus()},c.onTabNext=function(){a("#template").find(":tabbable:not(.CodeMirror-code)").first().focus()},c.onChangeLintingErrors=function(a){b.lintErrors=a,0===a.length&&b.submitButton.toggleClass("disabled",!1)},c.onUpdateErrorNotice=function(a){var d,e;b.submitButton.toggleClass("disabled",a.length>0),0!==a.length?(d=1===a.length?b.l10n.lintError.singular.replace("%d","1"):b.l10n.lintError.plural.replace("%d",String(a.length)),e=b.addNotice({code:"lint_errors",type:"error",message:d,dismissible:!1}),e.find("input[type=checkbox]").on("click",function(){c.onChangeLintingErrors([]),b.removeNotice("lint_errors")})):b.removeNotice("lint_errors")},d=wp.codeEditor.initialize(a("#newcontent"),c),d.codemirror.on("change",b.onChange),a(d.codemirror.display.lineDiv).attr({role:"textbox","aria-multiline":"true","aria-labelledby":"theme-plugin-editor-label","aria-describedby":"editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4"}),a("#theme-plugin-editor-label").on("click",function(){d.codemirror.focus()}),b.instance=d},b}(jQuery);

View File

@ -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");

View File

@ -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' );

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.9-alpha-41773';
$wp_version = '4.9-alpha-41774';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.