Changeset 37221

Timestamp:

04/16/2016 04:42:48 PM (9 years ago)

Author:

afercia

Message:

Plugin Install: show the upload form in place rather than sending users to the devoted upload plugin page.

Props Ipstenu, ericlewis, michaelarestad.

Fixes #35429.

Location:

trunk/src/wp-admin

Files:

• css/themes.css (modified) (2 diffs)
• includes/admin-filters.php (modified) (1 diff)
• includes/class-wp-upgrader-skins.php (modified) (1 diff)
• includes/plugin-install.php (modified) (1 diff)
• js/plugin-install.js (modified) (2 diffs)
• js/theme.js (modified) (1 diff)
• plugin-install.php (modified) (1 diff)
• plugins.php (modified) (1 diff)
• theme-install.php (modified) (1 diff)

trunk/src/wp-admin/css/themes.css

@@ -1057 +1057 @@
     cursor: pointer;
 }
-.theme-install-php a.browse-themes,
-.theme-install-php.show-upload-theme a.upload {
+
+.upload-view-toggle .browse,
+.upload-view-toggle.upload-tab .upload {
     display: none;
 }
-.theme-install-php.show-upload-theme a.browse-themes {
+
+.upload-view-toggle.upload-tab .browse {
     display: inline;
 }
+
 .upload-theme,
 .upload-plugin {
@@ -1077 +1080 @@
     top: 10px;
 }
-body.show-upload-theme .upload-theme,
-.upload-plugin {
-    display: block;
-}
+
+.show-upload-view .upload-theme,
+.show-upload-view .upload-plugin,
+.upload-tab .upload-plugin {
+    display: block;
+}
+
 .upload-theme .wp-upload-form,
 .upload-plugin .wp-upload-form {

trunk/src/wp-admin/includes/admin-filters.php

@@ -65 +65 @@
 // Plugin Install hooks.
 add_action( 'install_plugins_featured',               'install_dashboard' );
-add_action( 'install_plugins_upload',                 'install_plugins_upload' );
 add_action( 'install_plugins_search',                 'display_plugins_table' );
 add_action( 'install_plugins_popular',                'display_plugins_table' );

trunk/src/wp-admin/includes/class-wp-upgrader-skins.php

@@ -580 +580 @@
         } elseif ( $this->type == 'web' ) {
             $install_actions['plugins_page'] = '<a href="' . self_admin_url( 'plugin-install.php' ) . '" target="_parent">' . __( 'Return to Plugin Installer' ) . '</a>';
+        } elseif ( 'upload' == $this->type && 'plugins' == $from ) {
+            $install_actions['plugins_page'] = '<a href="' . self_admin_url( 'plugin-install.php' ) . '">' . __( 'Return to Plugin Installer' ) . '</a>';
         } else {
             $install_actions['plugins_page'] = '<a href="' . self_admin_url( 'plugins.php' ) . '" target="_parent">' . __( 'Return to Plugins page' ) . '</a>';

trunk/src/wp-admin/includes/plugin-install.php

@@ -211 +211 @@
 function install_dashboard() {
     ?>
-    <p><?php printf( __( 'Plugins extend and expand the functionality of WordPress. You may automatically install plugins from the <a href="%1$s">WordPress Plugin Directory</a> or upload a plugin in .zip format via <a href="%2$s">this page</a>.' ), 'https://wordpress.org/plugins/', self_admin_url( 'plugin-install.php?tab=upload' ) ); ?></p>
+    <p><?php printf( __( 'Plugins extend and expand the functionality of WordPress. You may automatically install plugins from the <a href="%1$s">WordPress Plugin Directory</a> or upload a plugin in .zip format by clicking the button at the top of this page.' ), 'https://wordpress.org/plugins/' ); ?></p>
 
     <?php display_plugins_table(); ?>

trunk/src/wp-admin/js/plugin-install.js

@@ -1 +1 @@
 /* global plugininstallL10n, tb_click, tb_remove */
 
-/* Plugin Browser Thickbox related JS*/
+/**
+ * Functionality for the plugin install screens.
+ */
 var tb_position;
 jQuery( document ).ready( function( $ ) {
@@ -175 +177 @@
         $( '#section-' + tab ).show();
     });
+
+    /*
+     * When a user presses the "Upload Plugin" button, show the upload form in place
+     * rather than sending them to the devoted upload plugin page.
+     * @todo consider to abstract this in a generic, reusable, utility, see theme.js
+     */
+    var uploadViewToggle = $( '.upload-view-toggle' ),
+        $body = $( document.body );
+
+    uploadViewToggle
+        .attr({
+            role: 'button',
+            'aria-expanded': 'false'
+        })
+        .on( 'click', function( event ) {
+            event.preventDefault();
+            $body.toggleClass( 'show-upload-view' );
+            uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
+        });
 });

trunk/src/wp-admin/js/theme.js

@@ -1605 +1605 @@
     searchContainer: $( '.wp-filter .search-form' ),
 
+    /*
+     * When a user presses the "Upload Theme" button, show the upload form in place.
+     * @todo consider to abstract this in a generic, reusable, utility, see plugin-install.js
+     */
     uploader: function() {
-        $( 'a.upload' ).on( 'click', function( event ) {
-            event.preventDefault();
-            $( 'body' ).addClass( 'show-upload-theme' );
-            themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } );
-        });
-        $( 'a.browse-themes' ).on( 'click', function( event ) {
-            event.preventDefault();
-            $( 'body' ).removeClass( 'show-upload-theme' );
-            themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
-        });
+        var uploadViewToggle = $( '.upload-view-toggle' ),
+            $body = $( document.body );
+
+        uploadViewToggle
+            .attr({
+                role: 'button',
+                'aria-expanded': 'false'
+            })
+            .on( 'click', function( event ) {
+                event.preventDefault();
+                $body.toggleClass( 'show-upload-view' );
+                uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
+            });
     },
 

trunk/src/wp-admin/plugin-install.php

@@ -107 +107 @@
         if ( $tab === 'upload' ) {
             $href = self_admin_url( 'plugin-install.php' );
-            $text = _x( 'Browse', 'plugins' );
+            $upload_tab_class = ' upload-tab';
         } else {
             $href = self_admin_url( 'plugin-install.php?tab=upload' );
-            $text = __( 'Upload Plugin' );
+            $upload_tab_class = '';
         }
-        echo ' <a href="' . $href . '" class="upload page-title-action">' . $text . '</a>';
+
+        printf( ' <a href="%s" class="upload-view-toggle page-title-action%s"><span class="upload">%s</span><span class="browse">%s</span></a>',
+            $href,
+            $upload_tab_class,
+            __( 'Upload Plugin' ),
+            __( 'Browse Plugins' )
+        );
     }
     ?>
 </h1>
+
+<div class="upload-plugin-wrap<?php echo $upload_tab_class; ?>">
+<?php
+/*
+ * Output the upload plugin form on every plugin install screen, so it can be
+ * displayed via JavaScript rather then opening up the devoted upload plugin page.
+ */
+install_plugins_upload(); ?>
+</div>
 
 <?php

trunk/src/wp-admin/plugins.php

@@ -373 +373 @@
     '<p>' . __('Plugins extend and expand the functionality of WordPress. Once a plugin is installed, you may activate it or deactivate it here.') . '</p>' .
     '<p>' . sprintf(
-        /* translators: 1: Plugin Browser/Installer URL, 2: WordPress Plugin Directory URL 3: local plugin directory */
-        __( 'You can find additional plugins for your site by using the <a href="%1$s">Plugin Browser/Installer</a> functionality or by browsing the <a href="%2$s" target="_blank">WordPress Plugin Directory</a> directly and installing new plugins manually. To manually install a plugin you generally just need to upload the plugin file into your %3$s directory. Once a plugin has been installed, you can activate it here.' ),
-        'plugin-install.php',
-        'https://wordpress.org/plugins/',
-        '<code>/wp-content/plugins</code>'
+        /* translators: %s: WordPress Plugin Directory URL */
+        __( 'If you would like to see more plugins to choose from, click on the &#8220;Add New&#8221; button and you will be able to browse or search for additional plugins from the <a href="%s" target="_blank">WordPress.org Plugin Directory</a>. Plugins in the WordPress.org Plugin Directory are designed and developed by third parties, and are compatible with the license WordPress uses. Oh, and they&#8217;re free!' ),
+        'https://wordpress.org/plugins/'
     ) . '</p>'
 ) );

trunk/src/wp-admin/theme-install.php

@@ -128 +128 @@
     $tabs = apply_filters( 'install_themes_tabs', array( 'upload' => __( 'Upload Theme' ) ) );
     if ( ! empty( $tabs['upload'] ) && current_user_can( 'upload_themes' ) ) {
-        echo ' <a href="#" class="upload page-title-action">' . __( 'Upload Theme' ) . '</a>';
-        echo ' <a href="#" class="browse-themes page-title-action">' . _x( 'Browse', 'themes' ) . '</a>';
+        echo ' <a href="#" class="upload-view-toggle page-title-action">' . __( 'Upload Theme' ) . '</a>';
     }
     ?></h1>