WordPress.org
Get WordPress

Make WordPress Core

Changeset 38075


Ignore:
Timestamp:
07/17/2016 03:31:29 PM (10 years ago)
Author:
ocean90
Message:

Import: Enhance accessibility on the Import screen.

  • Remove title attributes.
  • Show "Install Now" and "Details" links if the importer isn't installed yet.
  • Show a "Run Importer" link if the importer is installed. It also handles activation if the plugin isn't activated.
  • Add aria-label attributes to each link.
  • Unify the importer descriptions to make them independent from the plugin state. The API was changed in ​[meta3690].
  • Adjust JavaScript callbacks for ajaxified importer installs.

Props afercia, swissspidy, ocean90.
See #24766.
Fixes #35191.

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r38033 r38075  
    22762276}
    22772277
    2278 .importers td {
    2279         padding-right: 14px;
    2280 }
    2281 
    22822278.importers {
    22832279        font-size: 16px;
    22842280        width: auto;
     2281}
     2282
     2283.importers td {
     2284        padding-right: 14px;
     2285        line-height: 1.5em;
     2286}
     2287
     2288.importers .import-system {
     2289        max-width: 250px;
     2290}
     2291
     2292.importers td.desc {
     2293        max-width: 500px;
     2294}
     2295
     2296.importer-title,
     2297.importer-desc,
     2298.importer-action {
     2299        display: block;
     2300}
     2301
     2302.importer-title {
     2303        color: #000;
     2304        font-size: 14px;
     2305        font-weight: 400;
     2306        margin-bottom: .2em;
     2307}
     2308
     2309.importer-action {
     2310        line-height: 20px; /* Same as with .updating-message */
     2311        color: #ddd;
     2312        margin-bottom: 1em;
     2313}
     2314
     2315.not-installed-main-site .importer-action {
     2316        color: #555;
    22852317}
    22862318

  • trunk/src/wp-admin/import.php

    r37998 r38075  
    3131);
    3232
    33 if ( current_user_can( 'install_plugins' ) )
     33if ( current_user_can( 'install_plugins' ) ) {
     34        // List of popular importer plugins from the WordPress.org API.
    3435        $popular_importers = wp_get_popular_importers();
    35 else
    36         $popular_importers = array();
     36} else {
     37        $popular_importers = array();
     38}
    3739
    3840// Detect and redirect invalid importers like 'movabletype', which is registered as 'mt'
    … …  
    6769
    6870<?php
    69 
     71// Registered (already installed) importers. They're stored in the global $wp_importers.
    7072$importers = get_importers();
    7173
    … …  
    7678        if ( isset( $importers[ $pop_data['importer-id'] ] ) )
    7779                continue;
     80
     81        // Fill the array of registered (already installed) importers with data of the popular importers from the WordPress.org API.
    7882        $importers[ $pop_data['importer-id'] ] = array( $pop_data['name'], $pop_data['description'], 'install' => $pop_data['plugin-slug'] );
    7983}
    … …  
    8690<table class="widefat importers striped">
    8791
    88 <?php
    89         foreach ($importers as $importer_id => $data) {
    90                 $action = '';
     92        <?php
     93        foreach ( $importers as $importer_id => $data ) {
     94                $plugin_slug = $action = '';
     95                $is_plugin_installed = false;
     96
    9197                if ( isset( $data['install'] ) ) {
    9298                        $plugin_slug = $data['install'];
     99
    93100                        if ( file_exists( WP_PLUGIN_DIR . '/' . $plugin_slug ) ) {
    94                                 // Looks like Importer is installed, But not active
     101                                // Looks like an importer is installed, but not active.
    95102                                $plugins = get_plugins( '/' . $plugin_slug );
    96                                 if ( !empty($plugins) ) {
    97                                         $keys = array_keys($plugins);
     103                                if ( ! empty( $plugins ) ) {
     104                                        $keys = array_keys( $plugins );
    98105                                        $plugin_file = $plugin_slug . '/' . $keys[0];
    99                                         $action = '<a href="' . esc_url(wp_nonce_url(admin_url('plugins.php?action=activate&plugin=' . $plugin_file . '&from=import'), 'activate-plugin_' . $plugin_file)) .
    100                                                                                         '"title="' . esc_attr__('Activate importer') . '"">' . $data[0] . '</a>';
     106                                        $url = wp_nonce_url( add_query_arg( array(
     107                                                'action' => 'activate',
     108                                                'plugin' => $plugin_file,
     109                                                'from'   => 'import',
     110                                        ), admin_url( 'plugins.php' ) ), 'activate-plugin_' . $plugin_file );
     111                                        $action = sprintf(
     112                                                '<a href="%s" aria-label="%s">%s</a>',
     113                                                esc_url( $url ),
     114                                                /* translators: %s: Importer name */
     115                                                esc_attr( sprintf( __( 'Run %s' ), $data[0] ) ),
     116                                                __( 'Run Importer' )
     117                                        );
     118
     119                                        $is_plugin_installed = true;
    101120                                }
    102121                        }
    103                         if ( empty($action) ) {
     122
     123                        if ( empty( $action ) ) {
    104124                                if ( is_main_site() ) {
    105                                         $action = '<a href="' . esc_url( network_admin_url( 'plugin-install.php?tab=plugin-information&plugin=' . $plugin_slug .
    106                                                                                 '&from=import&TB_iframe=true&width=600&height=550' ) ) . '" class="thickbox open-plugin-details-modal" title="' .
    107                                                                                 esc_attr__('Install importer') . '">' . $data[0] . '</a>';
     125                                        $url = wp_nonce_url( add_query_arg( array(
     126                                                'action' => 'install-plugin',
     127                                                'plugin' => $plugin_slug,
     128                                                'from'   => 'import',
     129                                        ), self_admin_url( 'update.php' ) ), 'install-plugin_' . $plugin_slug );
     130                                        $action = sprintf(
     131                                                '<a href="%1$s" class="install-now" data-slug="%2$s" data-name="%3$s" aria-label="%4$s">%5$s</a>',
     132                                                esc_url( $url ),
     133                                                esc_attr( $plugin_slug ),
     134                                                esc_attr( $data[0] ),
     135                                                /* translators: %s: Importer name */
     136                                                esc_attr( sprintf( __( 'Install %s' ), $data[0] ) ),
     137                                                __( 'Install Now' )
     138                                        );
    108139                                } else {
    109                                         $action = $data[0];
    110                                         $data[1] = sprintf( __( 'This importer is not installed. Please install importers from <a href="%s">the main site</a>.' ), get_admin_url( $current_site->blog_id, 'import.php' ) );
     140                                        $action = sprintf(
     141                                                /* translators: URL to wp-admin/import.php */
     142                                                __( 'This importer is not installed. Please install importers from <a href="%s">the main site</a>.' ),
     143                                                get_admin_url( get_current_network_id(), 'import.php' )
     144                                        );
    111145                                }
    112146                        }
    113147                } else {
    114                         $action = "<a href='" . esc_url( "admin.php?import=$importer_id" ) . "' title='" . esc_attr( wptexturize( strip_tags( $data[1] ) ) ) ."'>{$data[0]}</a>";
     148                        $url = add_query_arg( array(
     149                                'import' => $importer_id,
     150                        ), self_admin_url( 'admin.php' ) );
     151                        $action = sprintf(
     152                                '<a href="%1$s" aria-label="%2$s">%3$s</a>',
     153                                esc_url( $url ),
     154                                /* translators: %s: Importer name */
     155                                esc_attr( sprintf( __( 'Run %s' ), $data[0] ) ),
     156                                __( 'Run Importer' )
     157                        );
     158
     159                        $is_plugin_installed = true;
    115160                }
    116161
     162                if ( ! $is_plugin_installed && is_main_site() ) {
     163                        $url = add_query_arg( array(
     164                                'tab'       => 'plugin-information',
     165                                'plugin'    => $plugin_slug,
     166                                'from'      => 'import',
     167                                'TB_iframe' => 'true',
     168                                'width'     => 600,
     169                                'height'    => 550,
     170                        ), network_admin_url( 'plugin-install.php' ) );
     171                        $action .= sprintf(
     172                                ' | <a href="%1$s" class="thickbox open-plugin-details-modal" aria-label="%2$s">%3$s</a>',
     173                                esc_url( $url ),
     174                                /* translators: %s: Importer name */
     175                                esc_attr( sprintf( __( 'More information about %s' ), $data[0] ) ),
     176                                __( 'Details' )
     177                        );
     178                }
     179
    117180                echo "
    118                         <tr>
    119                                 <td class='import-system row-title'>$action</td>
    120                                 <td class='desc'>{$data[1]}</td>
     181                        <tr class='importer-item'>
     182                                <td class='import-system'>
     183                                        <span class='importer-title'>{$data[0]}</span>
     184                                        <span class='importer-action'>{$action}</span>
     185                                </td>
     186                                <td class='desc'>
     187                                        <span class='importer-desc'>{$data[1]}</span>
     188                                </td>
    121189                        </tr>";
    122190        }
    123 ?>
    124 
     191        ?>
    125192</table>
    126193<?php

  • trunk/src/wp-admin/includes/import.php

    r34566 r38075  
    127127
    128128        $locale = get_locale();
    129         $popular_importers = get_site_transient( 'popular_importers_' . $locale );
     129        $cache_key = 'popular_importers_' . md5( $locale . $wp_version );
     130        $popular_importers = get_site_transient( $cache_key );
    130131
    131132        if ( ! $popular_importers ) {
    132                 $url = add_query_arg( 'locale', get_locale(), 'http://api.wordpress.org/core/importers/1.1/' );
     133                $url = add_query_arg( array(
     134                        'locale'  => get_locale(),
     135                        'version' => $wp_version,
     136                ), 'http://api.wordpress.org/core/importers/1.1/' );
    133137                $options = array( 'user-agent' => 'WordPress/' . $wp_version . '; ' . home_url() );
    134138                $response = wp_remote_get( $url, $options );
    135139                $popular_importers = json_decode( wp_remote_retrieve_body( $response ), true );
    136140
    137                 if ( is_array( $popular_importers ) )
    138                         set_site_transient( 'popular_importers_' . $locale, $popular_importers, 2 * DAY_IN_SECONDS );
    139                 else
     141                if ( is_array( $popular_importers ) ) {
     142                        set_site_transient( $cache_key, $popular_importers, 2 * DAY_IN_SECONDS );
     143                } else {
    140144                        $popular_importers = false;
     145                }
    141146        }
    142147
    … …  
    158163                'blogger' => array(
    159164                        'name' => __( 'Blogger' ),
    160                         'description' => __( 'Install the Blogger importer to import posts, comments, and users from a Blogger blog.' ),
     165                        'description' => __( 'Import posts, comments, and users from a Blogger blog.' ),
    161166                        'plugin-slug' => 'blogger-importer',
    162167                        'importer-id' => 'blogger',
    … …  
    164169                'wpcat2tag' => array(
    165170                        'name' => __( 'Categories and Tags Converter' ),
    166                         'description' => __( 'Install the category/tag converter to convert existing categories to tags or tags to categories, selectively.' ),
     171                        'description' => __( 'Convert existing categories to tags or tags to categories, selectively.' ),
    167172                        'plugin-slug' => 'wpcat2tag-importer',
    168173                        'importer-id' => 'wp-cat2tag',
    … …  
    170175                'livejournal' => array(
    171176                        'name' => __( 'LiveJournal' ),
    172                         'description' => __( 'Install the LiveJournal importer to import posts from LiveJournal using their API.' ),
     177                        'description' => __( 'Import posts from LiveJournal using their API.' ),
    173178                        'plugin-slug' => 'livejournal-importer',
    174179                        'importer-id' => 'livejournal',
    … …  
    176181                'movabletype' => array(
    177182                        'name' => __( 'Movable Type and TypePad' ),
    178                         'description' => __( 'Install the Movable Type importer to import posts and comments from a Movable Type or TypePad blog.' ),
     183                        'description' => __( 'Import posts and comments from a Movable Type or TypePad blog.' ),
    179184                        'plugin-slug' => 'movabletype-importer',
    180185                        'importer-id' => 'mt',
    … …  
    182187                'opml' => array(
    183188                        'name' => __( 'Blogroll' ),
    184                         'description' => __( 'Install the blogroll importer to import links in OPML format.' ),
     189                        'description' => __( 'Import links in OPML format.' ),
    185190                        'plugin-slug' => 'opml-importer',
    186191                        'importer-id' => 'opml',
    … …  
    188193                'rss' => array(
    189194                        'name' => __( 'RSS' ),
    190                         'description' => __( 'Install the RSS importer to import posts from an RSS feed.' ),
     195                        'description' => __( 'Import posts from an RSS feed.' ),
    191196                        'plugin-slug' => 'rss-importer',
    192197                        'importer-id' => 'rss',
    … …  
    194199                'tumblr' => array(
    195200                        'name' => __( 'Tumblr' ),
    196                         'description' => __( 'Install the Tumblr importer to import posts &amp; media from Tumblr using their API.' ),
     201                        'description' => __( 'Import posts &amp; media from Tumblr using their API.' ),
    197202                        'plugin-slug' => 'tumblr-importer',
    198203                        'importer-id' => 'tumblr',
    … …  
    200205                'wordpress' => array(
    201206                        'name' => 'WordPress',
    202                         'description' => __( 'Install the WordPress importer to import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.' ),
     207                        'description' => __( 'Import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.' ),
    203208                        'plugin-slug' => 'wordpress-importer',
    204209                        'importer-id' => 'wordpress',

  • trunk/src/wp-admin/js/updates.js

    r38057 r38075  
    504504
    505505                if ( 'import' === pagenow ) {
    506                         $message = $( 'a[href*="' + args.slug + '"]' );
    507                 } else {
    508                         $message.text( wp.updates.l10n.installing );
    509                 }
     506                        $message = $( '[data-slug="' + args.slug + '"]' );
     507                }
     508
     509                $message.text( wp.updates.l10n.installing );
    510510
    511511                $message
    … …  
    626626                } );
    627627
    628                 $( 'a[href*="' + response.slug + '"]' )
    629                         .removeClass( 'thickbox open-plugin-details-modal updating-message' )
    630                         .off( 'click' )
    631                         .attr( 'href', response.activateUrl + '&from=import' )
    632                         .attr( 'title', wp.updates.l10n.activateImporter );
     628                $( '[data-slug="' + response.slug + '"]' )
     629                        .removeClass( 'install-now updating-message' )
     630                        .addClass( 'activate-now' )
     631                        .attr({
     632                                'href': response.activateUrl + '&from=import',
     633                                'aria-label': wp.updates.l10n.activateImporterLabel.replace( '%s', response.pluginName )
     634                        })
     635                        .text( wp.updates.l10n.activateImporter );
    633636
    634637                wp.a11y.speak( wp.updates.l10n.installedMsg, 'polite' );
    … …  
    650653         */
    651654        wp.updates.installImporterError = function( response ) {
    652                 var errorMessage = wp.updates.l10n.installFailed.replace( '%s', response.errorMessage );
     655                var errorMessage = wp.updates.l10n.installFailed.replace( '%s', response.errorMessage ),
     656                        $installLink = $( '[data-slug="' + response.slug + '"]' ),
     657                        pluginName = $installLink.data( 'name' );
    653658
    654659                if ( ! wp.updates.isValidResponse( response, 'install' ) ) {
    … …  
    666671                } );
    667672
    668                 $( 'a[href*="' + response.slug + '"]' ).removeClass( 'updating-message' );
     673                $installLink
     674                        .removeClass( 'updating-message' )
     675                        .text( wp.updates.l10n.installNow )
     676                        .attr( 'aria-label', wp.updates.l10n.installNowLabel.replace( '%s', pluginName ) );
    669677
    670678                wp.a11y.speak( errorMessage, 'assertive' );
    … …  
    17671775
    17681776                /**
     1777                 * Click handler for importer plugins installs in the Import screen.
     1778                 *
     1779                 * @since 4.6.0
     1780                 *
     1781                 * @param {Event} event Event interface.
     1782                 */
     1783                $document.on( 'click', '.importer-item .install-now', function( event ) {
     1784                        var $button = $( event.target ),
     1785                                pluginName = $( this ).data( 'name' );
     1786
     1787                        event.preventDefault();
     1788
     1789                        if ( $button.hasClass( 'updating-message' ) ) {
     1790                                return;
     1791                        }
     1792
     1793                        if ( wp.updates.shouldRequestFilesystemCredentials && ! wp.updates.ajaxLocked ) {
     1794                                wp.updates.requestFilesystemCredentials( event );
     1795
     1796                                $document.on( 'credential-modal-cancel', function() {
     1797
     1798                                        $button
     1799                                                .removeClass( 'updating-message' )
     1800                                                .text( wp.updates.l10n.installNow )
     1801                                                .attr( 'aria-label', wp.updates.l10n.installNowLabel.replace( '%s', pluginName ) );
     1802
     1803                                        wp.a11y.speak( wp.updates.l10n.updateCancel, 'polite' );
     1804                                } );
     1805                        }
     1806
     1807                        wp.updates.installPlugin( {
     1808                                slug:    $button.data( 'slug' ),
     1809                                success: wp.updates.installImporterSuccess,
     1810                                error:   wp.updates.installImporterError
     1811                        } );
     1812                } );
     1813
     1814                /**
    17691815                 * Click handler for plugin deletions.
    17701816                 *

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

    r38070 r38075  
    608608                                'updateNow'                  => __( 'Update Now' ),
    609609                                'updateFailedShort'          => __( 'Update Failed!' ),
    610                                 /* translators: Error string for a failed update */
     610                                /* translators: %s: Error string for a failed update */
    611611                                'updateFailed'               => __( 'Update Failed: %s' ),
    612                                 /* translators: Plugin name and version */
     612                                /* translators: %s: Plugin name and version */
    613613                                'updatingLabel'              => __( 'Updating %s...' ), // No ellipsis.
    614                                 /* translators: Plugin name and version */
     614                                /* translators: %s: Plugin name and version */
    615615                                'updatedLabel'               => __( '%s updated!' ),
    616                                 /* translators: Plugin name and version */
     616                                /* translators: %s: Plugin name and version */
    617617                                'updateFailedLabel'          => __( '%s update failed' ),
    618618                                /* translators: JavaScript accessible string */
    … …  
    624624                                'beforeunload'               => __( 'Updates may not complete if you navigate away from this page.' ),
    625625                                'installNow'                 => __( 'Install Now' ),
     626                                /* translators: %s: Plugin name */
     627                                'installNowLabel'            => __( 'Install %s' ),
    626628                                'installing'                 => __( 'Installing...' ),
    627629                                'installed'                  => __( 'Installed!' ),
    628630                                'installFailedShort'         => __( 'Install Failed!' ),
    629                                 /* translators: Error string for a failed installation */
     631                                /* translators: %s: Error string for a failed installation */
    630632                                'installFailed'              => __( 'Installation failed: %s' ),
    631                                 /* translators: Plugin name and version */
     633                                /* translators: %s: Plugin name and version */
    632634                                'pluginInstallingLabel'      => _x( 'Installing %s...', 'plugin' ), // no ellipsis
    633                                 /* translators: Theme name and version */
     635                                /* translators: %s: Theme name and version */
    634636                                'themeInstallingLabel'       => _x( 'Installing %s...', 'theme' ), // no ellipsis
    635                                 /* translators: Plugin name and version */
     637                                /* translators: %s: Plugin name and version */
    636638                                'pluginInstalledLabel'       => _x( '%s installed!', 'plugin' ),
    637                                 /* translators: Theme name and version */
     639                                /* translators: %s: Theme name and version */
    638640                                'themeInstalledLabel'        => _x( '%s installed!', 'theme' ),
    639                                 /* translators: Plugin name and version */
     641                                /* translators: %s: Plugin name and version */
    640642                                'pluginInstallFailedLabel'   => _x( '%s installation failed', 'plugin' ),
    641                                 /* translators: Theme name and version */
     643                                /* translators: %s: Theme name and version */
    642644                                'themeInstallFailedLabel'    => _x( '%s installation failed', 'theme' ),
    643645                                'installingMsg'              => __( 'Installing... please wait.' ),
    644646                                'installedMsg'               => __( 'Installation completed successfully.' ),
    645                                 /* translators: Activation URL */
    646                                 'importerInstalledMsg'       => __( 'Importer installed successfully. <a href="%s">Activate plugin &#38; run importer</a>' ),
     647                                /* translators: %s: Activation URL */
     648                                'importerInstalledMsg'       => __( 'Importer installed successfully. <a href="%s">Run importer</a>' ),
    647649                                /* translators: %s: Theme name */
    648650                                'aysDelete'                  => __( 'Are you sure you want to delete %s?' ),
    … …  
    662664                                /* translators: %s: Theme name */
    663665                                'activateThemeLabel'         => is_network_admin() ? _x( 'Network Activate %s', 'theme' ) : _x( 'Activate %s', 'theme' ),
    664                                 'activateImporter'           => __( 'Activate importer' ),
     666                                'activateImporter'           => __( 'Run Importer' ),
     667                                /* translators: %s: Importer name */
     668                                'activateImporterLabel'      => __( 'Run %s' ),
    665669                                'unknownError'               => __( 'An unknown error occurred' ),
    666670                                'pluginsFound'               => __( 'Number of plugins found: %d' ),

  • trunk/tests/qunit/fixtures/updates.js

    r38057 r38075  
    3131                'installingMsg': 'Installing... please wait.',
    3232                'installedMsg': 'Installation completed successfully.',
    33                 'importerInstalledMsg': 'Importer installed successfully. <a href="%s">Activate plugin &#38; run importer</a>',
     33                'importerInstalledMsg': 'Importer installed successfully. <a href="%s">Run importer</a>',
    3434                'aysDelete': 'Are you sure you want to delete %s?',
    3535                'aysDeleteUninstall': 'Are you sure you want to delete %s and its data?',
    … …  
    4444                'activatePluginLabel': 'Activate %s',
    4545                'activateThemeLabel':  'Activate %s',
    46                 'activateImporter': 'Activate importer',
     46                'activateImporter': 'Run Importer',
    4747                'unknownError': 'An unknown error occurred',
    4848                'pluginsFound': 'Number of plugins found: %d',
Note: See TracChangeset for help on using the changeset viewer.