WordPress.org

Make WordPress Core

Changeset 41774


Ignore:
Timestamp:
10/05/17 04:24:52 (2 months ago)
Author:
helen
Message:

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.

Location:
trunk/src/wp-admin
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r41721 r41774  
    31483148} 
    31493149 
     3150#file-editor-warning .file-editor-warning-content { 
     3151    margin: 25px; 
     3152} 
     3153 
    31503154/* @todo: can we use a common class for these? */ 
    31513155.nav-menus-php .item-edit:before, 
  • trunk/src/wp-admin/js/theme-plugin-editor.js

    r41721 r41774  
    4747        component.textarea = component.form.find( '#newcontent' ); 
    4848        component.textarea.on( 'change', component.onChange ); 
     49        component.warning = $( '.file-editor-warning' ); 
     50 
     51        if ( component.warning.length > 0 ) { 
     52            $( 'body' ).addClass( 'modal-open' ); 
     53            component.warning.find( '.file-editor-warning-dismiss' ).focus(); 
     54            component.warning.on( 'click', '.file-editor-warning-dismiss', component.dismissWarning ); 
     55        }; 
     56 
    4957 
    5058        if ( false !== component.codeEditor ) { 
     
    6573            return undefined; 
    6674        } ); 
     75    }; 
     76 
     77    /** 
     78     * Dismiss the warning modal. 
     79     * 
     80     * @since 4.9.0 
     81     * @returns {void} 
     82     */ 
     83    component.dismissWarning = function() { 
     84 
     85        wp.ajax.post( 'dismiss-wp-pointer', { 
     86            pointer: component.themeOrPlugin + '_editor_notice' 
     87        }); 
     88 
     89        // hide modal 
     90        component.warning.remove(); 
     91        $( 'body' ).removeClass( 'modal-open' ); 
     92 
     93        // return focus - is this a trap? 
     94        component.instance.codemirror.focus(); 
    6795    }; 
    6896 
  • trunk/src/wp-admin/plugin-editor.php

    r41721 r41774  
    143143    wp_enqueue_script( 'wp-theme-plugin-editor' ); 
    144144    wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'jQuery( function( $ ) { wp.themePluginEditor.init( $( "#template" ), %s ); } )', wp_json_encode( $settings ) ) ); 
     145    wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'wp.themePluginEditor.themeOrPlugin = "plugin";' ) ); 
    145146 
    146147    require_once(ABSPATH . 'wp-admin/admin-header.php'); 
     
    281282</div> 
    282283<?php 
     284$dismissed_pointers = explode( ',', (string) get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) ); 
     285if ( ! in_array( 'plugin_editor_notice', $dismissed_pointers, true ) ) : 
     286?> 
     287<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js"> 
     288    <div class="notification-dialog-background"></div> 
     289    <div class="notification-dialog" role="dialog" aria-labelledby="file-editor-warning-title" tabindex="0"> 
     290        <div class="file-editor-warning-content"> 
     291            <h1 id="file-editor-warning-title"><?php _e( 'Heads up!' ); ?></h1> 
     292            <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> 
     293            <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> 
     294            <p><button type="button" class="file-editor-warning-dismiss button-primary"><?php _e( 'I understand' ); ?></button></p> 
     295        </div> 
     296    </div> 
     297</div> 
     298<?php 
     299endif; // editor warning notice 
    283300 
    284301include(ABSPATH . "wp-admin/admin-footer.php"); 
  • trunk/src/wp-admin/theme-editor.php

    r41721 r41774  
    128128    wp_enqueue_script( 'wp-theme-plugin-editor' ); 
    129129    wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'jQuery( function( $ ) { wp.themePluginEditor.init( $( "#template" ), %s ); } )', wp_json_encode( $settings ) ) ); 
     130    wp_add_inline_script( 'wp-theme-plugin-editor', 'wp.themePluginEditor.themeOrPlugin = "theme";' ); 
    130131 
    131132    require_once( ABSPATH . 'wp-admin/admin-header.php' ); 
     
    310311</div> 
    311312<?php 
     313$dismissed_pointers = explode( ',', (string) get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) ); 
     314if ( ! in_array( 'theme_editor_notice', $dismissed_pointers, true ) ) : 
     315?> 
     316<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js"> 
     317    <div class="notification-dialog-background"></div> 
     318    <div class="notification-dialog" role="dialog" aria-labelledby="file-editor-warning-title" tabindex="0"> 
     319        <div class="file-editor-warning-content"> 
     320            <h1 id="file-editor-warning-title"><?php _e( 'Heads up!' ); ?></h1> 
     321            <p> 
     322                <?php 
     323                echo sprintf( 
     324                    /* translators: %s is a link to Custom CSS section in the Customizer. */ 
     325                    __( '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>.' ), 
     326                    esc_url( add_query_arg( 'autofocus[section]', 'custom_css', admin_url( 'customize.php' ) ) ) 
     327                ); 
     328                ?> 
     329            </p> 
     330            <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> 
     331            <p><button type="button" class="file-editor-warning-dismiss button-primary"><?php _e( 'I understand' ); ?></button></p> 
     332        </div> 
     333    </div> 
     334</div> 
     335<?php 
     336endif; // editor warning notice 
    312337 
    313338include(ABSPATH . 'wp-admin/admin-footer.php' ); 
Note: See TracChangeset for help on using the changeset viewer.