60625 site icon UI

src/js/_enqueues/admin/site-icon.js

@@ -188,6 +188,12 @@
 		$iconPreview.removeClass( 'hidden' );
 		$removeButton.removeClass( 'hidden' );
 
+		// Set the global CSS variable for --site-icon-url to the selected image URL.
+		document.documentElement.style.setProperty(
+			'--site-icon-url',
+			'url(' + attributes.url + ')'
+		);
+
 		// If the choose button is not in the update state, swap the classes.
 		if ( $chooseButton.attr( 'data-state' ) !== '1' ) {
 			$chooseButton.attr( {

src/js/media/views/site-icon-preview.js

@@ -15,8 +15,8 @@ var View = wp.media.View,
  * @augments Backbone.View
  */
 SiteIconPreview = View.extend(/** @lends wp.media.view.SiteIconPreview.prototype */{
-	className: 'site-icon-preview',
-	template: wp.template( 'site-icon-preview' ),
+	className: 'site-icon-preview-crop-modal',
+	template: wp.template( 'site-icon-preview-crop' ),
 
 	ready: function() {
 		this.controller.imgSelect.setOptions({
@@ -34,8 +34,8 @@ SiteIconPreview = View.extend(/** @lends wp.media.view.SiteIconPreview.prototype
 	updatePreview: function( img, coords ) {
 		var rx = 64 / coords.width,
 			ry = 64 / coords.height,
-			preview_rx = 16 / coords.width,
-			preview_ry = 16 / coords.height;
+			preview_rx = 24 / coords.width,
+			preview_ry = 24 / coords.height;
 
 		$( '#preview-app-icon' ).css({
 			width: Math.round(rx * this.imageWidth ) + 'px',

src/wp-admin/css/customize-controls.css

@@ -393,6 +393,7 @@ body.trashing #publish-settings {
 	margin-bottom: 0;
 }
 
+#customize-control-site_icon .customize-control-description,
 #customize-control-changeset_scheduled_date .customize-control-description {
 	font-style: normal;
 }
@@ -1066,10 +1067,6 @@ p.customize-section-description {
 	line-height: 0;
 }
 
-/* Remove descender space. */
-.customize-control-site_icon .favicon-preview .browser-preview {
-	vertical-align: top;
-}
 
 .customize-control .thumbnail-image img {
 	cursor: pointer;

src/wp-admin/css/forms.css

@@ -810,18 +810,6 @@ ul#add-to-blog-users {
 	background: #fff;
 }
 
-.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-add-site-icon:focus {
 	background-color: #fff;
 	border-color: #3582c4;

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

@@ -2,55 +2,152 @@
   28.0 - Site Icon
 ------------------------------------------------------------------------------*/
 
-.site-icon-preview .favicon-preview {
-	margin: 5px 0 20px;
-	overflow: hidden;
+.site-icon-preview {
+	direction: initial;
+	display: flex;
+	height: 60px;
+	padding: 8px 0 0 8px;
+	align-items: flex-start;
 	position: relative;
-	max-width: 180px;
+	overflow: hidden;
+	box-sizing: border-box;
+	border: 1px solid #8c8f94;
+	border-radius: 4px;
+	background-color: #fff;
+	width: 275px;
 }
 
-.site-icon-preview .favicon,
-.site-icon-preview .browser-title {
-	height: 16px;
-	left: 88px;
-	overflow: hidden;
-	position: absolute;
-	top: 16px;
+.site-icon-preview.settings {
+	height: 88px;
+	padding: 16px 0 0 16px;
+	width: 350px;
+	margin: 0 0 16px 0;
 }
 
-.site-icon-preview .favicon {
-	width: 16px;
+.site-icon-preview.crop {
+	width: 258px;
+	height: 100%;
+	display: grid;
+	grid-template-columns: 8px 1fr;
+	grid-template-rows: 64px 1fr;
+	padding-left: 0;
+	row-gap: 16px;
+	direction: inherit;
 }
 
-.site-icon-preview .browser-title {
-	left: 109px;
-	width: 72px;
-	white-space: nowrap;
+.site-icon-preview.hidden {
+	display: none;
+}
+
+.site-icon-preview .direction-wrap {
+	grid-template-columns: 44px 1fr;
+	gap: 8px;
+	display: grid;
+	direction: ltr;
+	height: 100%;
+	width: 100%;
+}
+
+.site-icon-preview.settings .direction-wrap {
+	grid-template-columns: 58px 1fr;
+	gap: 16px;
+}
+
+.site-icon-preview:after {
+	content: "";
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 200%;
+	height: 200%;
+	transform: translateX(-25%) translateY(-25%);
+	filter: blur(6px);
+	opacity: 0.5;
+	background: var(--site-icon-url);
 }
 
 .site-icon-preview .app-icon-preview {
-	background-color: #000;
-	border-radius: 16px;
-	height: 64px;
+	aspect-ratio: 1/1;
+	border-radius: 10px;
+	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
+	flex-shrink: 0;
+	width: 100%;
+	z-index: 1;
+}
+
+.site-icon-preview-browser {
+	direction: initial;
+	display: flex;
+	padding: 4px 4px 0 12px;
+	align-items: flex-start;
+	gap: 16px;
+	flex: 1 0 0;
+	z-index: 1;
+	border-top-left-radius: 10px;
+	border-top: 1px solid rgba(255, 255, 255, 0.20);
+	border-left: 1px solid rgba(255, 255, 255, 0.20);
+	background: linear-gradient(180deg, #dcdcdc 0%, #bdbdbd 100%);
+	box-shadow: 0px 10px 22px 0px rgba(0, 0, 0, 0.20);
+}
+
+.site-icon-preview .browser-buttons {
+	width: 48px;
+	height: 40px;
+	fill: #8C8F94;
+}
+
+.site-icon-preview-tab {
+	padding: 8px;
+	align-items: center;
+	gap: 8px;
+	flex: 1 0 0;
+	border-radius: 4px;
+	background-color: #f0f0f1;
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+	display: grid;
+	grid-template-columns: 24px auto 24px;
+}
+
+.site-icon-preview-browser .browser-icon-preview {
+	width: 24px;
+	height: 24px;
+	box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
+}
+
+.site-icon-preview-tab > img,
+.site-icon-preview-tab > svg {
+	fill: #646970;
+	width: 24px;
+	height: 24px;
+}
+
+.site-icon-preview-site-title {
+	text-overflow: ellipsis;
+	white-space: nowrap;
 	overflow: hidden;
+	font-weight: 500;
+}
+
+.site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview {
 	width: 64px;
-	margin-top: 5px;
+	height: 64px;
+	margin: 0;
+	grid-column: 2;
 }
 
-/* rtl:ignore */
-.site-icon-preview .favicon,
-.site-icon-preview .app-icon-preview {
-	direction: ltr;
+.site-icon-preview-crop-modal .site-icon-preview-browser {
+	grid-column: 2;
 }
 
-.customize-control-site_icon .favicon-preview {
-	float: left;
-	margin-right: 12px;
-	margin-bottom: 0;
+.site-icon-preview-crop-modal .image-preview-wrap {
+	overflow: hidden;
+	aspect-ratio: 1/1;
 }
 
-.customize-control-site_icon .app-icon-preview {
-	margin-top: 9px;
+.site-icon-preview-crop-modal .image-preview-wrap.browser {
+	width: 24px;
+	height: 24px;
 }
 
 .site-icon-section button.reset {

src/wp-admin/includes/update-core.php

@@ -765,6 +765,10 @@
 	'wp-admin/images/about-header-freedoms.svg',
 	'wp-admin/images/about-header-contribute.svg',
 	'wp-admin/images/about-header-background.svg',
+	// 6.7
+	'wp-admin/images/browser-rtl.png',
+	'wp-admin/images/browser.png',
+
 );
 
 /**

src/wp-admin/options-general.php

@@ -121,6 +121,7 @@
 
 	// Handle alt text for site icon on page load.
 	$site_icon_id           = (int) get_option( 'site_icon' );
+	$site_icon_url          = get_site_icon_url();
 	$app_icon_alt_value     = '';
 	$browser_icon_alt_value = '';
 
@@ -155,16 +156,27 @@
 	}
 	?>
 
-
-	<div id="site-icon-preview" class="site-icon-preview wp-clearfix settings-page-preview <?php echo esc_attr( $classes_for_wrapper ); ?>">
-		<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 id="browser-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $browser_icon_alt_value ); ?>">
+	<style>
+	:root{
+		--site-icon-url: url( '<?php echo esc_url( $site_icon_url ); ?>' );
+	}
+	</style>
+
+	<div id="site-icon-preview" class="site-icon-preview settings <?php echo esc_attr( $classes_for_wrapper ); ?>">
+		<div class="direction-wrap">
+			<img id="app-icon-preview" src="<?php echo esc_url( $site_icon_url ); ?>" class="app-icon-preview" alt="<?php echo esc_attr( $app_icon_alt_value ); ?>" />
+			<div class="site-icon-preview-browser">
+				<svg role="img" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="browser-buttons"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 20a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm18 0a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm24-6a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z" /></svg>
+				<div class="site-icon-preview-tab">
+					<img id="browser-icon-preview" src="<?php echo esc_url( $site_icon_url ); ?>" class="browser-icon-preview" alt="<?php echo esc_attr( $browser_icon_alt_value ); ?>" />
+					<div class="site-icon-preview-site-title" id="site-icon-preview-site-title" aria-hidden="true"><?php echo get_bloginfo( 'name' ); ?></div>
+						<svg role="img" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="close-button">
+							<path d="M12 13.0607L15.7123 16.773L16.773 15.7123L13.0607 12L16.773 8.28772L15.7123 7.22706L12 10.9394L8.28771 7.22705L7.22705 8.28771L10.9394 12L7.22706 15.7123L8.28772 16.773L12 13.0607Z" />
+						</svg>
+					</div>
+				</div>
 			</div>
-			<span id="site-icon-preview-site-title" class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
 		</div>
-		<img id="app-icon-preview" class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $app_icon_alt_value ); ?>">
 	</div>
 
 	<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
@@ -198,8 +210,12 @@ class="<?php echo esc_attr( $classes_for_button ); ?>"
 
 	<p class="description">
 		<?php
-			/* translators: %s: Site Icon size in pixels. */
-			printf( __( 'The Site Icon is what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. It should be square and at least %s pixels.' ), '<code>512 &times; 512</code>' );
+			/* translators: 1: opening  <code> tag. 2: closing </code> tag. */
+			printf(
+				__( 'The Site Icon is what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. It should be square and at least %1$s512 by 512%2$s pixels.' ),
+				'<code>',
+				'</code>'
+			);
 		?>
 	</p>
 

src/wp-includes/class-wp-customize-manager.php

@@ -5203,9 +5203,10 @@ public function register_controls() {
 				array(
 					'label'       => __( 'Site Icon' ),
 					'description' => sprintf(
-						/* translators: %s: Site Icon size in pixels. */
-						'<p>' . __( 'The Site Icon is what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. It should be square and at least %s pixels.' ) . '</p>',
-						'<code>512 &times; 512</code>'
+						/* translators: 1: opening  <code> tag. 2: closing </code> tag. */
+						'<p>' . __( 'The Site Icon is what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. It should be square and at least %1$s512 by 512%2$s pixels.' ) . '</p>',
+						'<code>',
+						'</code>'
 					),
 					'section'     => 'title_tagline',
 					'priority'    => 60,

src/wp-includes/css/media-views.css

@@ -2531,7 +2531,8 @@
 		width: 230px;
 	}
 
-	.options-general-php .crop-content.site-icon {
+	.options-general-php .crop-content.site-icon,
+	.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
 		margin-right: 262px;
 	}
 
@@ -2831,7 +2832,8 @@
 		position: fixed;
 	}
 
-	.options-general-php .crop-content.site-icon {
+	.options-general-php .crop-content.site-icon,
+	.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
 		margin-right: 0;
 	}