<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[58927] trunk/src: Administration: Modernize Site Icon UI in settings, customizer.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/58927">58927</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/58927","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>peterwilsoncc</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2024-08-23 22:45:54 +0000 (Fri, 23 Aug 2024)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Administration: Modernize Site Icon UI in settings, customizer.
Updates the UI for previewing a site icon in general settings and the customizer to account for changes to browser designs over the past years.
Props joedolson, joen, kebbet, nhrrob, swissspidy, mukesh27, afercia, jorbin.
Fixes <a href="https://core.trac.wordpress.org/ticket/60625">#60625</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcjs_enqueuesadminsiteiconjs">trunk/src/js/_enqueues/admin/site-icon.js</a></li>
<li><a href="#trunksrcjsmediaviewssiteiconpreviewjs">trunk/src/js/media/views/site-icon-preview.js</a></li>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadmincssformscss">trunk/src/wp-admin/css/forms.css</a></li>
<li><a href="#trunksrcwpadmincsssiteiconcss">trunk/src/wp-admin/css/site-icon.css</a></li>
<li><a href="#trunksrcwpadminoptionsgeneralphp">trunk/src/wp-admin/options-general.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizemanagerphp">trunk/src/wp-includes/class-wp-customize-manager.php</a></li>
<li><a href="#trunksrcwpincludescssmediaviewscss">trunk/src/wp-includes/css/media-views.css</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizesiteiconcontrolphp">trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php</a></li>
<li><a href="#trunksrcwpincludesmediatemplatephp">trunk/src/wp-includes/media-template.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcjs_enqueuesadminsiteiconjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/_enqueues/admin/site-icon.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/_enqueues/admin/site-icon.js 2024-08-23 15:40:15 UTC (rev 58926)
+++ trunk/src/js/_enqueues/admin/site-icon.js 2024-08-23 22:45:54 UTC (rev 58927)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -188,6 +188,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $iconPreview.removeClass( 'hidden' );
</span><span class="cx" style="display: block; padding: 0 10px"> $removeButton.removeClass( 'hidden' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Set the global CSS variable for --site-icon-url to the selected image URL.
+ document.documentElement.style.setProperty(
+ '--site-icon-url',
+ 'url(' + attributes.url + ')'
+ );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // If the choose button is not in the update state, swap the classes.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $chooseButton.attr( 'data-state' ) !== '1' ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $chooseButton.attr( {
</span></span></pre></div>
<a id="trunksrcjsmediaviewssiteiconpreviewjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/media/views/site-icon-preview.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/media/views/site-icon-preview.js 2024-08-23 15:40:15 UTC (rev 58926)
+++ trunk/src/js/media/views/site-icon-preview.js 2024-08-23 22:45:54 UTC (rev 58927)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -15,8 +15,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @augments Backbone.View
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> SiteIconPreview = View.extend(/** @lends wp.media.view.SiteIconPreview.prototype */{
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- className: 'site-icon-preview',
- template: wp.template( 'site-icon-preview' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ className: 'site-icon-preview-crop-modal',
+ template: wp.template( 'site-icon-preview-crop' ),
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> ready: function() {
</span><span class="cx" style="display: block; padding: 0 10px"> this.controller.imgSelect.setOptions({
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -34,8 +34,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> updatePreview: function( img, coords ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var rx = 64 / coords.width,
</span><span class="cx" style="display: block; padding: 0 10px"> ry = 64 / coords.height,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- preview_rx = 16 / coords.width,
- preview_ry = 16 / coords.height;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ preview_rx = 24 / coords.width,
+ preview_ry = 24 / coords.height;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $( '#preview-app-icon' ).css({
</span><span class="cx" style="display: block; padding: 0 10px"> width: Math.round(rx * this.imageWidth ) + 'px',
</span></span></pre></div>
<a id="trunksrcwpadmincsscustomizecontrolscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-controls.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-controls.css 2024-08-23 15:40:15 UTC (rev 58926)
+++ trunk/src/wp-admin/css/customize-controls.css 2024-08-23 22:45:54 UTC (rev 58927)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -393,6 +393,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-control-site_icon .customize-control-description,
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-control-changeset_scheduled_date .customize-control-description {
</span><span class="cx" style="display: block; padding: 0 10px"> font-style: normal;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1066,10 +1067,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* Remove descender space. */
-.customize-control-site_icon .favicon-preview .browser-preview {
- vertical-align: top;
-}
</del><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control .thumbnail-image img {
</span><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span></span></pre></div>
<a id="trunksrcwpadmincssformscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/forms.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/forms.css 2024-08-23 15:40:15 UTC (rev 58926)
+++ trunk/src/wp-admin/css/forms.css 2024-08-23 22:45:54 UTC (rev 58927)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -803,6 +803,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 9px 0;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.6;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 270px;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-radius: 4px;
+ background: #f0f0f1;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .button-add-site-icon:focus,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -810,18 +812,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.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%;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .button-add-site-icon:focus {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: #3582c4;
</span></span></pre></div>
<a id="trunksrcwpadmincsssiteiconcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/site-icon.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/site-icon.css 2024-08-23 15:40:15 UTC (rev 58926)
+++ trunk/src/wp-admin/css/site-icon.css 2024-08-23 22:45:54 UTC (rev 58927)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2,59 +2,184 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 28.0 - Site Icon
</span><span class="cx" style="display: block; padding: 0 10px"> ------------------------------------------------------------------------------*/
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site-icon-preview .favicon-preview {
- margin: 5px 0 20px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site-icon-section {
+ --site-icon-removal: #b32d2e;
+}
+
+.site-icon-preview {
+ --site-icon-input-border: #8c8f94;
+ --site-icon-preview-background: #fff;
+ --site-icon-preview-browser-top: #dcdcde;
+ --site-icon-preview-browser-bottom: #a7aaad;
+ --site-icon-preview-browser-border: rgba(255, 255, 255, 0.2);
+ --site-icon-address-bar-background: #f0f0f1;
+ --site-icon-address-bar-close: #646970;
+ --site-icon-address-bar-text: #3c434a;
+ --site-icon-shadow-1: rgba(0, 0, 0, 0.1);
+ --site-icon-shadow-2: rgba(0, 0, 0, 0.2);
+ --site-icon-shadow-3: rgba(0, 0, 0, 0.5);
+
+ direction: initial;
+ display: flex;
+ height: 60px;
+ padding: 8px 0 0 8px;
+ align-items: flex-start;
+ position: relative;
</ins><span class="cx" style="display: block; padding: 0 10px"> overflow: hidden;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- position: relative;
- max-width: 180px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ box-sizing: border-box;
+ border: 1px solid var(--site-icon-input-border);
+ border-radius: 4px;
+ background-color: var(--site-icon-preview-background);
+ width: 275px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site-icon-preview .favicon,
-.site-icon-preview .browser-title {
- height: 16px;
- left: 88px;
- overflow: hidden;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media (prefers-color-scheme: dark) {
+ .site-icon-preview {
+ --site-icon-preview-browser-top: #2c3338;
+ --site-icon-preview-browser-bottom: #111;
+ --site-icon-address-bar-background: #3c434a;
+ --site-icon-address-bar-close: #f0f0f1;
+ --site-icon-address-bar-text: #f0f0f1;
+ }
+}
+
+.site-icon-preview.settings {
+ height: 88px;
+ padding: 16px 0 0 16px;
+ width: 350px;
+ margin: 0 0 16px 0;
+}
+
+.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.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 {
+ --after-size: 150%;
+ aspect-ratio: 1/1;
+ content: "";
+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- top: 16px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ top: 0;
+ left: 0;
+ width: var(--after-size);;
+ transform: translate(calc(var(--after-size) * -0.125), calc(var(--after-size) * -0.125));
+ filter: blur(5px);
+ opacity: 0.5;
+ background: var(--site-icon-url);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site-icon-preview .favicon {
- width: 16px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site-icon-preview .app-icon-preview {
+ aspect-ratio: 1/1;
+ border-radius: 10px;
+ box-shadow: 0 1px 5px 0 var(--site-icon-shadow-3);
+ flex-shrink: 0;
+ width: 100%;
+ z-index: 1;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site-icon-preview .browser-title {
- left: 109px;
- width: 72px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site-icon-preview-browser {
+ 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 var(--site-icon-preview-browser-border);
+ border-left: 1px solid var(--site-icon-preview-browser-border);
+ background: linear-gradient(180deg, var(--site-icon-preview-browser-top) 0%, var(--site-icon-preview-browser-bottom) 100%);
+ box-shadow: 0 10px 22px 0 var(--site-icon-shadow-2);
+}
+
+.site-icon-preview .browser-buttons {
+ width: 48px;
+ height: 40px;
+ fill: var(--site-icon-input-border);
+}
+
+.site-icon-preview-tab {
+ padding: 8px;
+ align-items: center;
+ gap: 8px;
+ flex: 1 0 0;
+ border-radius: 4px;
+ background-color: var(--site-icon-address-bar-background);
+ box-shadow: 0 1px 3px 0 var(--site-icon-shadow-1);
+ display: grid;
+ grid-template-columns: 24px auto 24px;
+}
+
+.site-icon-preview-browser .browser-icon-preview {
+ box-shadow: 0 0 20px 0 var(--site-icon-shadow-1);
+}
+
+.site-icon-preview-tab > img,
+.site-icon-preview-tab > svg {
+ width: 24px;
+ height: 24px;
+}
+
+.site-icon-preview-tab > svg {
+ fill: var(--site-icon-address-bar-close);
+}
+
+.site-icon-preview-site-title {
+ color: var(--site-icon-address-bar-text);
+ text-overflow: ellipsis;
</ins><span class="cx" style="display: block; padding: 0 10px"> white-space: nowrap;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ overflow: hidden;
+ font-weight: 500;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site-icon-preview .app-icon-preview {
- background-color: #000;
- border-radius: 16px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview {
+ width: 64px;
</ins><span class="cx" style="display: block; padding: 0 10px"> height: 64px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- overflow: hidden;
- width: 64px;
- margin-top: 5px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 0;
+ grid-column: 2;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* rtl:ignore */
-.site-icon-preview .favicon,
-.site-icon-preview .app-icon-preview {
- direction: ltr;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site-icon-preview-crop-modal .site-icon-preview-browser {
+ grid-column: 2;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.customize-control-site_icon .favicon-preview {
- float: left;
- margin-right: 12px;
- margin-bottom: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site-icon-preview-crop-modal .image-preview-wrap {
+ overflow: hidden;
+ aspect-ratio: 1/1;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.customize-control-site_icon .app-icon-preview {
- margin-top: 9px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site-icon-preview-crop-modal .image-preview-wrap.browser {
+ width: 24px;
+ height: 24px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site-icon-section button.reset {
- color: #b32d2e;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+button.reset.remove-site-icon {
+ color: var(--site-icon-removal);
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: transparent;
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -61,15 +186,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background: transparent;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site-icon-section button.reset:focus,
-.site-icon-section button.reset:hover {
- background: #b32d2e;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+button.reset.remove-site-icon:focus,
+button.reset.remove-site-icon:hover {
+ background: var(--site-icon-removal);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #fff;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-color: #b32d2e;
- box-shadow: 0 0 0 1px #b32d2e;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-color: var(--site-icon-removal);
+ box-shadow: 0 0 0 1px var(--site-icon-removal);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site-icon-section .action-buttons {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site-icon-action-buttons {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: flex;
</span><span class="cx" style="display: block; padding: 0 10px"> flex-wrap: wrap;
</span><span class="cx" style="display: block; padding: 0 10px"> gap: 10px;
</span></span></pre></div>
<a id="trunksrcwpadminoptionsgeneralphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/options-general.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/options-general.php 2024-08-23 15:40:15 UTC (rev 58926)
+++ trunk/src/wp-admin/options-general.php 2024-08-23 22:45:54 UTC (rev 58927)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -124,9 +124,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $app_icon_alt_value = '';
</span><span class="cx" style="display: block; padding: 0 10px"> $browser_icon_alt_value = '';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $site_icon_url = get_site_icon_url();
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( $site_icon_id ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $img_alt = get_post_meta( $site_icon_id, '_wp_attachment_image_alt', true );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $filename = wp_basename( get_site_icon_url() );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $filename = wp_basename( $site_icon_url );
</ins><span class="cx" style="display: block; padding: 0 10px"> $app_icon_alt_value = sprintf(
</span><span class="cx" style="display: block; padding: 0 10px"> /* translators: %s: The selected image filename. */
</span><span class="cx" style="display: block; padding: 0 10px"> __( 'App icon preview: The current image has no alternative text. The file name is: %s' ),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -155,20 +157,31 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <style>
+ :root {
+ --site-icon-url: url( '<?php echo esc_url( $site_icon_url ); ?>' );
+ }
+ </style>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <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 ); ?>">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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 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>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span id="site-icon-preview-site-title" class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
</del><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <img id="app-icon-preview" class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $app_icon_alt_value ); ?>">
</del><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="action-buttons">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="site-icon-action-buttons">
</ins><span class="cx" style="display: block; padding: 0 10px"> <button type="button"
</span><span class="cx" style="display: block; padding: 0 10px"> id="choose-from-library-button"
</span><span class="cx" style="display: block; padding: 0 10px"> type="button"
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -190,7 +203,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <button
</span><span class="cx" style="display: block; padding: 0 10px"> id="js-remove-site-icon"
</span><span class="cx" style="display: block; padding: 0 10px"> type="button"
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?php echo has_site_icon() ? 'class="button button-secondary reset"' : 'class="button button-secondary reset hidden"'; ?>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php echo has_site_icon() ? 'class="button button-secondary reset remove-site-icon"' : 'class="button button-secondary reset hidden"'; ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> >
</span><span class="cx" style="display: block; padding: 0 10px"> <?php _e( 'Remove Site Icon' ); ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </button>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -198,8 +211,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <p class="description">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* 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 × 512</code>' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ printf(
+ /* translators: 1: pixel value for icon size. 2: pixel value for icon size. */
+ __( '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 <code>%1$s by %2$s</code> pixels.' ),
+ 512,
+ 512
+ );
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizemanagerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-customize-manager.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-manager.php 2024-08-23 15:40:15 UTC (rev 58926)
+++ trunk/src/wp-includes/class-wp-customize-manager.php 2024-08-23 22:45:54 UTC (rev 58927)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5203,9 +5203,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'label' => __( 'Site Icon' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'description' => sprintf(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* 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 × 512</code>'
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* translators: 1: pixel value for icon size. 2: pixel value for icon size. */
+ '<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 <code>%1$s by %2$s</code> pixels.' ) . '</p>',
+ 512,
+ 512
</ins><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'section' => 'title_tagline',
</span><span class="cx" style="display: block; padding: 0 10px"> 'priority' => 60,
</span></span></pre></div>
<a id="trunksrcwpincludescssmediaviewscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/css/media-views.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/css/media-views.css 2024-08-23 15:40:15 UTC (rev 58926)
+++ trunk/src/wp-includes/css/media-views.css 2024-08-23 22:45:54 UTC (rev 58927)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2532,7 +2532,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> width: 230px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .options-general-php .crop-content.site-icon {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .options-general-php .crop-content.site-icon,
+ .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: 262px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2832,7 +2833,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> position: fixed;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .options-general-php .crop-content.site-icon {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .options-general-php .crop-content.site-icon,
+ .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizesiteiconcontrolphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php 2024-08-23 15:40:15 UTC (rev 58926)
+++ trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php 2024-08-23 22:45:54 UTC (rev 58927)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -54,59 +54,66 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.label ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="customize-control-title">{{ data.label }}</span>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# if ( data.description ) { #>
- <span class="description customize-control-description">{{{ data.description }}}</span>
- <# } #>
</del><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.attachment && data.attachment.id ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-media-view">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.attachment.sizes ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="site-icon-preview wp-clearfix">
- <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="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" alt="{{
- data.attachment.alt ?
- wp.i18n.sprintf(
- <?php
- /* translators: %s: The selected image alt text. */
- echo wp_json_encode( __( 'Browser icon preview: Current image: %s' ) );
- ?>
- ,
- data.attachment.alt
- ) :
- wp.i18n.sprintf(
- <?php
- /* translators: %s: The selected image filename. */
- echo wp_json_encode( __( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ) );
- ?>
- ,
- data.attachment.filename
- )
- }}" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <style>
+ :root{
+ --site-icon-url: url( '{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}' );
+ }
+ </style>
+ <div class="site-icon-preview customizer">
+ <div class="direction-wrap">
+ <img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" class="app-icon-preview" alt="{{
+ data.attachment.alt ?
+ wp.i18n.sprintf(
+ <?php
+ /* translators: %s: The selected image alt text. */
+ echo wp_json_encode( __( 'App icon preview: Current image: %s' ) )
+ ?>
+ ,
+ data.attachment.alt
+ ) :
+ wp.i18n.sprintf(
+ <?php
+ /* translators: %s: The selected image filename. */
+ echo wp_json_encode( __( 'App icon preview: The current image has no alternative text. The file name is: %s' ) );
+ ?>
+ ,
+ data.attachment.filename
+ )
+ }}" />
+ <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 src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" class="browser-icon-preview" alt="{{
+ data.attachment.alt ?
+ wp.i18n.sprintf(
+ <?php
+ /* translators: %s: The selected image alt text. */
+ echo wp_json_encode( __( 'Browser icon preview: Current image: %s' ) );
+ ?>
+ ,
+ data.attachment.alt
+ ) :
+ wp.i18n.sprintf(
+ <?php
+ /* translators: %s: The selected image filename. */
+ echo wp_json_encode( __( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ) );
+ ?>
+ ,
+ data.attachment.filename
+ )
+ }}" />
+ <div class="site-icon-preview-site-title" aria-hidden="true"><# print( '<?php echo esc_js( 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>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span class="browser-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></span>
</del><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <img class="app-icon-preview" src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" alt="{{
- data.attachment.alt ?
- wp.i18n.sprintf(
- <?php
- /* translators: %s: The selected image alt text. */
- echo wp_json_encode( __( 'App icon preview: Current image: %s' ) )
- ?>
- ,
- data.attachment.alt
- ) :
- wp.i18n.sprintf(
- <?php
- /* translators: %s: The selected image filename. */
- echo wp_json_encode( __( 'App icon preview: The current image has no alternative text. The file name is: %s' ) );
- ?>
- ,
- data.attachment.filename
- )
- }}"/>
</del><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="actions">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -128,6 +135,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.description ) { #>
+ <span class="description customize-control-description">{{{ data.description }}}</span>
+ <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpincludesmediatemplatephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/media-template.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/media-template.php 2024-08-23 15:40:15 UTC (rev 58926)
+++ trunk/src/wp-includes/media-template.php 2024-08-23 22:45:54 UTC (rev 58927)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1542,22 +1542,32 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php // Template for the Site Icon preview, used for example in the Customizer. ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <script type="text/html" id="tmpl-site-icon-preview">
- <h2><?php _e( 'Preview' ); ?></h2>
- <strong aria-hidden="true"><?php _e( 'As a browser icon' ); ?></strong>
- <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" height="" alt="" />
-
- <div class="favicon">
- <img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script type="text/html" id="tmpl-site-icon-preview-crop">
+ <style>
+ :root{
+ --site-icon-url: url( "{{ data.url }}" );
+ }
+ </style>
+ <h2><?php _ex( 'Site Icon Preview', 'noun' ); ?></h2>
+ <p><?php _e( 'As an app icon and a browser icon.' ); ?></p>
+ <div class="site-icon-preview crop">
+ <div class="image-preview-wrap app-icon-preview">
+ <img id="preview-app-icon" src="{{ data.url }}" class="app-icon-preview" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>" />
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span class="browser-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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">
+ <div class="image-preview-wrap browser">
+ <img id="preview-favicon" src="{{ data.url }}" class="browser-icon-preview" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" />
+ </div>
+ <div class="site-icon-preview-site-title" aria-hidden="true"><# print( '<?php echo esc_js( 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>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- <strong aria-hidden="true"><?php _e( 'As an app icon' ); ?></strong>
- <div class="app-icon-preview">
- <img id="preview-app-icon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>" />
- </div>
</del><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span></span></pre>
</div>
</div>
</body>
</html>