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

Props Ipstenu, ericlewis, michaelarestad.

Fixes #35429.
Built from https://develop.svn.wordpress.org/trunk@37221


git-svn-id: http://core.svn.wordpress.org/trunk@37187 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/themes-rtl.css

@@ -1056,13 +1056,16 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 .theme-install-php a.browse-themes {
 	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 {
 	-webkit-box-sizing: border-box;
@@ -1076,10 +1079,13 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 	position: relative;
 	top: 10px;
 }
-body.show-upload-theme .upload-theme,
-.upload-plugin {
+
+.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 {
 	background: #fafafa;

wp-admin/css/themes.css

@@ -1056,13 +1056,16 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 .theme-install-php a.browse-themes {
 	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 {
 	-webkit-box-sizing: border-box;
@@ -1076,10 +1079,13 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 	position: relative;
 	top: 10px;
 }
-body.show-upload-theme .upload-theme,
-.upload-plugin {
+
+.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 {
 	background: #fafafa;

wp-admin/includes/admin-filters.php

@@ -64,7 +64,6 @@ add_filter( 'whitelist_options', 'option_update_filter' );
 
 // 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' );
 add_action( 'install_plugins_recommended',            'display_plugins_table' );

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

@@ -579,6 +579,8 @@ class Plugin_Installer_Skin extends WP_Upgrader_Skin {
 			$install_actions['importers_page'] = '<a href="' . admin_url( 'import.php' ) . '" target="_parent">' . __( 'Return to Importers' ) . '</a>';
 		} 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>';
 		}

wp-admin/includes/plugin-install.php

@@ -210,7 +210,7 @@ function install_popular_tags( $args = array() ) {
  */
 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(); ?>
 

wp-admin/js/plugin-install.js

@@ -1,6 +1,8 @@
 /* global plugininstallL10n, tb_click, tb_remove */
 
-/* Plugin Browser Thickbox related JS*/
+/**
+ * Functionality for the plugin install screens.
+ */
 var tb_position;
 jQuery( document ).ready( function( $ ) {
 
@@ -174,4 +176,23 @@ jQuery( document ).ready( function( $ ) {
 		$( '#section-holder div.section' ).hide(); // Hide 'em all.
 		$( '#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' ) );
+		});
 });

wp-admin/js/plugin-install.min.js

@@ -1 +1 @@
-var tb_position;jQuery(document).ready(function(a){function b(){var b=e.find("#TB_iframeContent");g=b.contents().find("body"),c(),i.focus(),a("#plugin-information-tabs a",g).on("click",function(){c()}),g.on("keydown",function(a){27===a.which&&tb_remove()})}function c(){var b;h=a(":tabbable",g),i=e.find("#TB_closeWindowButton"),j=h.last(),b=i.add(j),b.off("keydown.wp-plugin-details"),b.on("keydown.wp-plugin-details",function(a){d(a)})}function d(a){9===a.which&&(j[0]!==a.target||a.shiftKey?i[0]===a.target&&a.shiftKey&&(a.preventDefault(),j.focus()):(a.preventDefault(),i.focus()))}var e,f,g,h,i,j;tb_position=function(){var b=a(window).width(),c=a(window).height()-(b>792?60:20),d=b>792?772:b-20;return e=a("#TB_window"),e.length&&(e.width(d).height(c),a("#TB_iframeContent").width(d).height(c),e.css({"margin-left":"-"+parseInt(d/2,10)+"px"}),"undefined"!=typeof document.body.style.maxWidth&&e.css({top:"30px","margin-top":"0"})),a("a.thickbox").each(function(){var b=a(this).attr("href");b&&(b=b.replace(/&width=[0-9]+/g,""),b=b.replace(/&height=[0-9]+/g,""),a(this).attr("href",b+"&width="+d+"&height="+c))})},a(window).resize(function(){tb_position()}),a("body").on("thickbox:iframe:loaded",e,function(){b()}).on("thickbox:removed",function(){f.focus()}),a(".thickbox.open-plugin-details-modal").on("click",function(b){var c=a(this).data("title")?plugininstallL10n.plugin_information+" "+a(this).data("title"):plugininstallL10n.plugin_modal_label;b.preventDefault(),b.stopPropagation(),f=a(this),tb_click.call(this),e.attr({role:"dialog","aria-label":plugininstallL10n.plugin_modal_label}),e.find("#TB_iframeContent").attr("title",c)}),a("#plugin-information-tabs a").click(function(b){var c=a(this).attr("name");b.preventDefault(),a("#plugin-information-tabs a.current").removeClass("current"),a(this).addClass("current"),"description"!==c&&a(window).width()<772?a("#plugin-information-content").find(".fyi").hide():a("#plugin-information-content").find(".fyi").show(),a("#section-holder div.section").hide(),a("#section-"+c).show()})});
+var tb_position;jQuery(document).ready(function(a){function b(){var b=e.find("#TB_iframeContent");g=b.contents().find("body"),c(),i.focus(),a("#plugin-information-tabs a",g).on("click",function(){c()}),g.on("keydown",function(a){27===a.which&&tb_remove()})}function c(){var b;h=a(":tabbable",g),i=e.find("#TB_closeWindowButton"),j=h.last(),b=i.add(j),b.off("keydown.wp-plugin-details"),b.on("keydown.wp-plugin-details",function(a){d(a)})}function d(a){9===a.which&&(j[0]!==a.target||a.shiftKey?i[0]===a.target&&a.shiftKey&&(a.preventDefault(),j.focus()):(a.preventDefault(),i.focus()))}var e,f,g,h,i,j;tb_position=function(){var b=a(window).width(),c=a(window).height()-(b>792?60:20),d=b>792?772:b-20;return e=a("#TB_window"),e.length&&(e.width(d).height(c),a("#TB_iframeContent").width(d).height(c),e.css({"margin-left":"-"+parseInt(d/2,10)+"px"}),"undefined"!=typeof document.body.style.maxWidth&&e.css({top:"30px","margin-top":"0"})),a("a.thickbox").each(function(){var b=a(this).attr("href");b&&(b=b.replace(/&width=[0-9]+/g,""),b=b.replace(/&height=[0-9]+/g,""),a(this).attr("href",b+"&width="+d+"&height="+c))})},a(window).resize(function(){tb_position()}),a("body").on("thickbox:iframe:loaded",e,function(){b()}).on("thickbox:removed",function(){f.focus()}),a(".thickbox.open-plugin-details-modal").on("click",function(b){var c=a(this).data("title")?plugininstallL10n.plugin_information+" "+a(this).data("title"):plugininstallL10n.plugin_modal_label;b.preventDefault(),b.stopPropagation(),f=a(this),tb_click.call(this),e.attr({role:"dialog","aria-label":plugininstallL10n.plugin_modal_label}),e.find("#TB_iframeContent").attr("title",c)}),a("#plugin-information-tabs a").click(function(b){var c=a(this).attr("name");b.preventDefault(),a("#plugin-information-tabs a.current").removeClass("current"),a(this).addClass("current"),"description"!==c&&a(window).width()<772?a("#plugin-information-content").find(".fyi").hide():a("#plugin-information-content").find(".fyi").show(),a("#section-holder div.section").hide(),a("#section-"+c).show()});var k=a(".upload-view-toggle"),l=a(document.body);k.attr({role:"button","aria-expanded":"false"}).on("click",function(a){a.preventDefault(),l.toggleClass("show-upload-view"),k.attr("aria-expanded",l.hasClass("show-upload-view"))})});

wp-admin/js/theme.js

@@ -1604,16 +1604,23 @@ themes.view.Installer = themes.view.Appearance.extend({
 	// in new location
 	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 ) {
+		var uploadViewToggle = $( '.upload-view-toggle' ),
+			$body = $( document.body );
+
+		uploadViewToggle
+			.attr({
+				role: 'button',
+				'aria-expanded': 'false'
+			})
+			.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 } );
+				$body.toggleClass( 'show-upload-view' );
+				uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
 			});
 	},
 

wp-admin/plugin-install.php

@@ -106,16 +106,31 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 	if ( ! empty( $tabs['upload'] ) && current_user_can( 'upload_plugins' ) ) {
 		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
 if ( $tab !== 'upload' ) {
 	$wp_list_table->views();

wp-admin/plugins.php

@@ -372,11 +372,9 @@ get_current_screen()->add_help_tab( array(
 'content'	=>
 	'<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>'
 ) );
 get_current_screen()->add_help_tab( array(

wp-admin/theme-install.php

@@ -127,8 +127,7 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 	 */
 	$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>
 

wp-includes/version.php

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