WordPress.org
Get WordPress

Make WordPress Core

Ticket #42110: 42110.diff

File 42110.diff, 9.1 KB (added by afercia, 7 years ago)

  • src/wp-admin/js/theme-plugin-editor.js

     
    5151                component.warning = $( '.file-editor-warning' );
    5252
    5353                if ( component.warning.length > 0 ) {
    54                         $( 'body' ).addClass( 'modal-open' );
    55                         component.warning.find( '.file-editor-warning-go-back' ).focus();
    56                         component.warning.on( 'click', '.file-editor-warning-dismiss', component.dismissWarning );
     54                        component.showWarning();
    5755                }
    5856
    5957                if ( false !== component.codeEditor ) {
    … …  
    7876        };
    7977
    8078        /**
     79         * Set up and display the warning modal.
     80         *
     81         * @since 4.9.0
     82         * @returns {void}
     83         */
     84        component.showWarning = function() {
     85                // Get the text within the modal.
     86                var rawMessage = component.warning.find( '.file-editor-warning-message' ).text();
     87                // Hide all the #wpwrap content from assistive technologies.
     88                $( '#wpwrap' ).attr( 'aria-hidden', 'true' );
     89                // Detach the warning modal from its position and append it to the body.
     90                $( document.body )
     91                        .addClass( 'modal-open' )
     92                        .append( component.warning.detach() );
     93                // Reveal the modal and set focus on the go back button.
     94                component.warning
     95                        .removeClass( 'hidden' )
     96                        .find( '.file-editor-warning-go-back' ).focus();
     97                // Get the links and buttons within the modal.
     98                component.warningTabbables = component.warning.find( 'a, button' );
     99                // Attach event handlers.
     100                component.warningTabbables.on( 'keydown', component.constrainTabbing );
     101                component.warning.on( 'click', '.file-editor-warning-dismiss', component.dismissWarning );
     102                // Make screen readers announce the warning message after a short delay (necessary for some screen readers).
     103                setTimeout( function() {
     104                        wp.a11y.speak( wp.sanitize.stripTags( rawMessage.replace( /\s+/g, ' ' ) ), 'assertive' );
     105                }, 1000 );
     106        };
     107
     108        /**
     109         * Constrain tabbing within the warning modal.
     110         *
     111         * @since 4.9.0
     112         * @param {object} event jQuery event object.
     113         * @returns {void}
     114         */
     115        component.constrainTabbing = function( event ) {
     116                var firstTabbable, lastTabbable;
     117
     118                if ( 9 !== event.which ) {
     119                        return;
     120                }
     121
     122                firstTabbable = component.warningTabbables.first()[0];
     123                lastTabbable = component.warningTabbables.last()[0];
     124
     125                if ( lastTabbable === event.target && ! event.shiftKey ) {
     126                        firstTabbable.focus();
     127                        event.preventDefault();
     128                } else if ( firstTabbable === event.target && event.shiftKey ) {
     129                        lastTabbable.focus();
     130                        event.preventDefault();
     131                }
     132        };
     133
     134        /**
    81135         * Dismiss the warning modal.
    82136         *
    83137         * @since 4.9.0
    … …  
    91145
    92146                // Hide modal.
    93147                component.warning.remove();
     148                $( '#wpwrap' ).removeAttr( 'aria-hidden' );
    94149                $( 'body' ).removeClass( 'modal-open' );
    95 
    96                 // Return focus - is this a trap?
    97                 component.instance.codemirror.focus();
    98150        };
    99151
    100152        /**

  • src/wp-admin/plugin-editor.php

     
    292292                $return_url = admin_url( '/' );
    293293        }
    294294?>
    295 <div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js">
     295<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js hidden">
    296296        <div class="notification-dialog-background"></div>
    297         <div class="notification-dialog" role="dialog" aria-labelledby="file-editor-warning-title" tabindex="0">
     297        <div class="notification-dialog">
    298298                <div class="file-editor-warning-content">
    299                         <h1 id="file-editor-warning-title"><?php _e( 'Heads up!' ); ?></h1>
    300                         <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>
    301                         <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>
     299                        <div class="file-editor-warning-message">
     300                                <h1><?php _e( 'Heads up!' ); ?></h1>
     301                                <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>
     302                                <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>
     303                        </div>
    302304                        <p>
    303305                                <a class="button file-editor-warning-go-back" href="<?php echo esc_url( $return_url ); ?>"><?php _e( 'Go back' ); ?></a>
    304306                                <button type="button" class="file-editor-warning-dismiss button button-primary"><?php _e( 'I understand' ); ?></button>

  • src/wp-admin/theme-editor.php

     
    297297                $return_url = admin_url( '/' );
    298298        }
    299299?>
    300 <div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js">
     300<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js hidden">
    301301        <div class="notification-dialog-background"></div>
    302         <div class="notification-dialog" role="dialog" aria-labelledby="file-editor-warning-title" tabindex="0">
     302        <div class="notification-dialog">
    303303                <div class="file-editor-warning-content">
    304                         <h1 id="file-editor-warning-title"><?php _e( 'Heads up!' ); ?></h1>
     304                        <div class="file-editor-warning-message">
     305                                <h1><?php _e( 'Heads up!' ); ?></h1>
     306                                <p>
     307                                        <?php
     308                                        echo sprintf(
     309                                                /* translators: %s is a link to Custom CSS section in the Customizer. */
     310                                                __( '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>.' ),
     311                                                esc_url( add_query_arg( 'autofocus[section]', 'custom_css', admin_url( 'customize.php' ) ) )
     312                                        );
     313                                        ?>
     314                                </p>
     315                                <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>
     316                        </div>
    305317                        <p>
    306                                 <?php
    307                                 echo sprintf(
    308                                         /* translators: %s is a link to Custom CSS section in the Customizer. */
    309                                         __( '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>.' ),
    310                                         esc_url( add_query_arg( 'autofocus[section]', 'custom_css', admin_url( 'customize.php' ) ) )
    311                                 );
    312                                 ?>
    313                         </p>
    314                         <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>
    315                         <p>
    316318                                <a class="button file-editor-warning-go-back" href="<?php echo esc_url( $return_url ); ?>"><?php _e( 'Go back' ); ?></a>
    317319                                <button type="button" class="file-editor-warning-dismiss button button-primary"><?php _e( 'I understand' ); ?></button>
    318320                        </p>

  • src/wp-includes/script-loader.php

     
    469469        $scripts->add( 'htmlhint', '/wp-includes/js/codemirror/htmlhint.js', array(), '0.9.14-xwp' );
    470470        $scripts->add( 'htmlhint-kses', '/wp-includes/js/codemirror/htmlhint-kses.js', array( 'htmlhint' ) );
    471471        $scripts->add( 'code-editor', "/wp-admin/js/code-editor$suffix.js", array( 'jquery', 'wp-codemirror' ) );
    472         $scripts->add( 'wp-theme-plugin-editor', "/wp-admin/js/theme-plugin-editor$suffix.js", array( 'wp-util', 'jquery', 'jquery-ui-core', 'wp-a11y', 'underscore' ) );
     472        $scripts->add( 'wp-theme-plugin-editor', "/wp-admin/js/theme-plugin-editor$suffix.js", array( 'wp-util', 'wp-sanitize', 'jquery', 'jquery-ui-core', 'wp-a11y', 'underscore' ) );
    473473        did_action( 'init' ) && $scripts->add_inline_script( 'wp-theme-plugin-editor', sprintf( 'wp.themePluginEditor.l10n = %s;', wp_json_encode( array(
    474474                'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
    475475                'saveError' => __( 'Something went wrong. Your change may not have been saved. Please try again. There is also a chance that you may need to manually fix and upload the file over FTP.' ),