General: Add an option to configure the site icon in general settings.

This restores the site icon setting to its original home on the settings page where it lives with the title and tagline.

The base for this code was originally added in [32994] and then removed in [33329]. The majority of the modification to that version are to remove the no-js pieces and make the workflow completely inline rather than putting the cropping on a separate page.

Additionally, since image crops rely on the ability to upload an image, this setting is gated by the `upload_files` capability.

Follow-up to: [32994], [33329].

Props jorbin, audrasjb, mukesh27, joedolson, afercia, kebbet, swissspidy, obenland, jameskoster, kjellr, andraganescu, stacimc, mikeschroder, h71, krupajnanda, huzaifaalmesbah.
Fixes #54370.
See #16434.



git-svn-id: https://develop.svn.wordpress.org/trunk@57602 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/forms.css

@@ -789,6 +789,42 @@ ul#add-to-blog-users {
 	outline: 2px solid transparent;
 }
 
+.button-add-site-icon{
+	width: 100%;
+	cursor: pointer;
+	text-align: center;
+	border: 1px dashed #c3c4c7;
+	box-sizing: border-box;
+	padding: 9px 0;
+	line-height: 1.6;
+	max-width: 270px;
+}
+
+.button-add-site-icon:focus,
+.button-add-site-icon:hover{
+	background: white;
+}
+
+.site-icon-section .favicon-preview{
+	float: left;
+}
+.site-icon-section .app-icon-preview{
+	float: left;
+	margin: 0 20px;
+}
+
+.site-icon-section .site-icon-preview img{
+	max-width: 100%;
+}
+
+.button-ad-site-icon:focus{
+	background-color: #fff;
+	border-color: #3582c4;
+	border-style: solid;
+	box-shadow: 0 0 0 1px #3582c4;
+	outline: 2px solid transparent;
+}
+
 /*------------------------------------------------------------------------------
   15.0 - Comments Screen
 ------------------------------------------------------------------------------*/

src/wp-admin/css/site-icon.css

@@ -7,6 +7,7 @@
 	overflow: hidden;
 	position: relative;
 	max-width: 180px;
+	float: left;
 }
 
 .site-icon-preview .favicon,
@@ -52,3 +53,20 @@
 .customize-control-site_icon .app-icon-preview {
 	margin-top: 9px;
 }
+
+.site-icon-section button.reset {
+	color: #b32d2e;
+	text-decoration: none;
+	border-color: transparent;
+	box-shadow: none;
+	background: transparent;
+	margin: 0 10px;
+}
+
+.site-icon-section button.reset:focus,
+.site-icon-section button.reset:hover {
+	background: #b32d2e;
+	color: #fff;
+	border-color: #b32d2e;
+	box-shadow: 0 0 0 1px #b32d2e;
+}

src/wp-admin/options-general.php

@@ -97,7 +97,86 @@ $tagline_description = sprintf(
 <p class="description" id="tagline-description"><?php echo $tagline_description; ?></p></td>
 </tr>
 
-<?php
+<?php if ( current_user_can( 'upload_files' ) ) : ?>
+<tr class="hide-if-no-js site-icon-section">
+<th scope="row"><?php _e( 'Site Icon' ); ?></th>
+<td>
+	<?php
+	wp_enqueue_media();
+	wp_enqueue_script( 'site-icon' );
+
+	$classes_for_upload_button = 'upload-button button-add-media button-add-site-icon';
+	$classes_for_update_button = 'button';
+
+	$classes_for_avatar = 'avatar avatar-150';
+	if ( has_site_icon() ) {
+		$classes_for_avatar          .= ' has-site-icon';
+		$classes_for_button           = $classes_for_update_button;
+		$classes_for_button_on_change = $classes_for_upload_button;
+	} else {
+		$classes_for_avatar          .= ' hidden';
+		$classes_for_button           = $classes_for_upload_button;
+		$classes_for_button_on_change = $classes_for_update_button;
+	}
+
+
+	?>
+	<div id="site-icon-preview" class="site-icon-preview wp-clearfix <?php echo esc_attr( $classes_for_avatar ); ?>">
+		<div class="favicon-preview">
+			<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="">
+			<div class="favicon">
+				<img src="<?php site_icon_url(); ?>" alt="Preview as a browser icon">
+			</div>
+			<span class="browser-title" aria-hidden="true"><?php echo get_bloginfo( 'name' ); ?></span>
+		</div>
+		<img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="Preview as an app icon">
+	</div>
+	<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
+	<p>
+		<button type="button"
+			id="choose-from-library-link"
+			type="button"
+			class="<?php echo esc_attr( $classes_for_button ); ?>"
+			data-alt-classes="<?php echo esc_attr( $classes_for_button_on_change ); ?>"
+			data-size="512"
+			data-choose-text="<?php esc_attr_e( 'Choose a Site Icon' ); ?>"
+			data-update-text="<?php esc_attr_e( 'Change Site Icon' ); ?>"
+			data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>"
+			data-state="<?php echo esc_attr( has_site_icon() ); ?>"
+
+		>
+			<?php if ( has_site_icon() ) : ?>
+				<?php _e( 'Change Site Icon' ); ?>
+			<?php else : ?>
+				<?php _e( 'Choose a Site Icon' ); ?>
+			<?php endif; ?>
+		</button>
+		<button
+			id="js-remove-site-icon"
+			type="button"
+			<?php echo has_site_icon() ? 'class="button button-secondary reset"' : 'class="button button-secondary reset hidden"'; ?>
+		>
+			<?php _e( 'Remove Site Icon' ); ?>
+		</button>
+	</p>
+
+	<p class="description" id="site-icon-description">
+		<?php _e( 'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. Upload one here!' ); ?>
+	</p>
+	<p class="description" id="site-icon-further-description">
+		<?php
+			/* translators: %s: Site Icon size in pixels. */
+			printf( __( 'Site Icons should be square and at least %s pixels.' ), '<strong>512 &times; 512</strong>' );
+		?>
+	</p>
+
+</td>
+</tr>
+
+	<?php
+endif;
+	/* End Site Icon */
+
 if ( ! is_multisite() ) {
 	$wp_site_url_class = '';
 	$wp_home_class     = '';

src/wp-admin/options.php

@@ -90,6 +90,7 @@ $allowed_options            = array(
 	'general'    => array(
 		'blogname',
 		'blogdescription',
+		'site_icon',
 		'gmt_offset',
 		'date_format',
 		'time_format',