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 #60625. Built from https://develop.svn.wordpress.org/trunk@58927 git-svn-id: http://core.svn.wordpress.org/trunk@58323 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Peter Wilson
parent
01d2199622
commit
d1386fb88c
|
|
@ -394,6 +394,7 @@ body.trashing #publish-settings {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#customize-control-site_icon .customize-control-description,
|
||||||
#customize-control-changeset_scheduled_date .customize-control-description {
|
#customize-control-changeset_scheduled_date .customize-control-description {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
@ -1067,10 +1068,6 @@ p.customize-section-description {
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove descender space. */
|
|
||||||
.customize-control-site_icon .favicon-preview .browser-preview {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.customize-control .thumbnail-image img {
|
.customize-control .thumbnail-image img {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -393,6 +393,7 @@ body.trashing #publish-settings {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#customize-control-site_icon .customize-control-description,
|
||||||
#customize-control-changeset_scheduled_date .customize-control-description {
|
#customize-control-changeset_scheduled_date .customize-control-description {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
@ -1066,10 +1067,6 @@ p.customize-section-description {
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove descender space. */
|
|
||||||
.customize-control-site_icon .favicon-preview .browser-preview {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.customize-control .thumbnail-image img {
|
.customize-control .thumbnail-image img {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -804,6 +804,8 @@ ul#add-to-blog-users {
|
||||||
padding: 9px 0;
|
padding: 9px 0;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
max-width: 270px;
|
max-width: 270px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #f0f0f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-add-site-icon:focus,
|
.button-add-site-icon:focus,
|
||||||
|
|
@ -811,18 +813,6 @@ ul#add-to-blog-users {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-icon-section .favicon-preview {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.site-icon-section .app-icon-preview {
|
|
||||||
float: right;
|
|
||||||
margin: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-icon-section .site-icon-preview img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-add-site-icon:focus {
|
.button-add-site-icon:focus {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-color: #3582c4;
|
border-color: #3582c4;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -803,6 +803,8 @@ ul#add-to-blog-users {
|
||||||
padding: 9px 0;
|
padding: 9px 0;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
max-width: 270px;
|
max-width: 270px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #f0f0f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-add-site-icon:focus,
|
.button-add-site-icon:focus,
|
||||||
|
|
@ -810,18 +812,6 @@ ul#add-to-blog-users {
|
||||||
background: #fff;
|
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 {
|
.button-add-site-icon:focus {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-color: #3582c4;
|
border-color: #3582c4;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -3,74 +3,199 @@
|
||||||
28.0 - Site Icon
|
28.0 - Site Icon
|
||||||
------------------------------------------------------------------------------*/
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
.site-icon-preview .favicon-preview {
|
.site-icon-section {
|
||||||
margin: 5px 0 20px;
|
--site-icon-removal: #b32d2e;
|
||||||
overflow: hidden;
|
}
|
||||||
|
|
||||||
|
.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 8px 0 0;
|
||||||
|
align-items: flex-start;
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: 180px;
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid var(--site-icon-input-border);
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: var(--site-icon-preview-background);
|
||||||
|
width: 275px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-icon-preview .favicon,
|
@media (prefers-color-scheme: dark) {
|
||||||
.site-icon-preview .browser-title {
|
.site-icon-preview {
|
||||||
height: 16px;
|
--site-icon-preview-browser-top: #2c3338;
|
||||||
right: 88px;
|
--site-icon-preview-browser-bottom: #111;
|
||||||
overflow: hidden;
|
--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 16px 0 0;
|
||||||
|
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-right: 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: rtl;
|
||||||
|
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;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 16px;
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: var(--after-size);;
|
||||||
|
transform: translate(calc(-1*(var(--after-size) * -0.125)), calc(var(--after-size) * -0.125));
|
||||||
|
filter: blur(5px);
|
||||||
|
opacity: 0.5;
|
||||||
|
background: var(--site-icon-url);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-icon-preview .favicon {
|
.site-icon-preview .app-icon-preview {
|
||||||
width: 16px;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-icon-preview .browser-title {
|
.site-icon-preview-browser {
|
||||||
right: 109px;
|
display: flex;
|
||||||
width: 72px;
|
padding: 4px 12px 0 4px;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
flex: 1 0 0;
|
||||||
|
z-index: 1;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
border-top: 1px solid var(--site-icon-preview-browser-border);
|
||||||
|
border-right: 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;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
|
||||||
|
|
||||||
.site-icon-preview .app-icon-preview {
|
|
||||||
background-color: #000;
|
|
||||||
border-radius: 16px;
|
|
||||||
height: 64px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview {
|
||||||
width: 64px;
|
width: 64px;
|
||||||
margin-top: 5px;
|
height: 64px;
|
||||||
|
margin: 0;
|
||||||
|
grid-column: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* rtl:ignore */
|
.site-icon-preview-crop-modal .site-icon-preview-browser {
|
||||||
.site-icon-preview .favicon,
|
grid-column: 2;
|
||||||
.site-icon-preview .app-icon-preview {
|
|
||||||
direction: ltr;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.customize-control-site_icon .favicon-preview {
|
.site-icon-preview-crop-modal .image-preview-wrap {
|
||||||
float: right;
|
overflow: hidden;
|
||||||
margin-left: 12px;
|
aspect-ratio: 1/1;
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.customize-control-site_icon .app-icon-preview {
|
.site-icon-preview-crop-modal .image-preview-wrap.browser {
|
||||||
margin-top: 9px;
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-icon-section button.reset {
|
button.reset.remove-site-icon {
|
||||||
color: #b32d2e;
|
color: var(--site-icon-removal);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-icon-section button.reset:focus,
|
button.reset.remove-site-icon:focus,
|
||||||
.site-icon-section button.reset:hover {
|
button.reset.remove-site-icon:hover {
|
||||||
background: #b32d2e;
|
background: var(--site-icon-removal);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #b32d2e;
|
border-color: var(--site-icon-removal);
|
||||||
box-shadow: 0 0 0 1px #b32d2e;
|
box-shadow: 0 0 0 1px var(--site-icon-removal);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-icon-section .action-buttons {
|
.site-icon-action-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
/*! This file is auto-generated */
|
/*! This file is auto-generated */
|
||||||
.site-icon-preview .favicon-preview{margin:5px 0 20px;overflow:hidden;position:relative;max-width:180px}.site-icon-preview .browser-title,.site-icon-preview .favicon{height:16px;right:88px;overflow:hidden;position:absolute;top:16px}.site-icon-preview .favicon{width:16px}.site-icon-preview .browser-title{right:109px;width:72px;white-space:nowrap}.site-icon-preview .app-icon-preview{background-color:#000;border-radius:16px;height:64px;overflow:hidden;width:64px;margin-top:5px}.site-icon-preview .app-icon-preview,.site-icon-preview .favicon{direction:ltr}.customize-control-site_icon .favicon-preview{float:right;margin-left:12px;margin-bottom:0}.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:0 0}.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}.site-icon-section .action-buttons{display:flex;flex-wrap:wrap;gap: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 8px 0 0;align-items:flex-start;position:relative;overflow:hidden;box-sizing:border-box;border:1px solid var(--site-icon-input-border);border-radius:4px;background-color:var(--site-icon-preview-background);width:275px}@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 16px 0 0;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-right: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:rtl;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;position:absolute;top:0;right:0;width:var(--after-size);transform:translate(calc(-1*(var(--after-size) * -.125)),calc(var(--after-size) * -.125));filter:blur(5px);opacity:.5;background:var(--site-icon-url)}.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}.site-icon-preview-browser{display:flex;padding:4px 12px 0 4px;align-items:flex-start;gap:16px;flex:1 0 0;z-index:1;border-top-right-radius:10px;border-top:1px solid var(--site-icon-preview-browser-border);border-right: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;white-space:nowrap;overflow:hidden;font-weight:500}.site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview{width:64px;height:64px;margin:0;grid-column:2}.site-icon-preview-crop-modal .site-icon-preview-browser{grid-column:2}.site-icon-preview-crop-modal .image-preview-wrap{overflow:hidden;aspect-ratio:1/1}.site-icon-preview-crop-modal .image-preview-wrap.browser{width:24px;height:24px}button.reset.remove-site-icon{color:var(--site-icon-removal);text-decoration:none;border-color:transparent;box-shadow:none;background:0 0}button.reset.remove-site-icon:focus,button.reset.remove-site-icon:hover{background:var(--site-icon-removal);color:#fff;border-color:var(--site-icon-removal);box-shadow:0 0 0 1px var(--site-icon-removal)}.site-icon-action-buttons{display:flex;flex-wrap:wrap;gap:10px}
|
||||||
|
|
@ -2,74 +2,199 @@
|
||||||
28.0 - Site Icon
|
28.0 - Site Icon
|
||||||
------------------------------------------------------------------------------*/
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
.site-icon-preview .favicon-preview {
|
.site-icon-section {
|
||||||
margin: 5px 0 20px;
|
--site-icon-removal: #b32d2e;
|
||||||
overflow: hidden;
|
}
|
||||||
|
|
||||||
|
.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;
|
position: relative;
|
||||||
max-width: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-icon-preview .favicon,
|
|
||||||
.site-icon-preview .browser-title {
|
|
||||||
height: 16px;
|
|
||||||
left: 88px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
box-sizing: border-box;
|
||||||
top: 16px;
|
border: 1px solid var(--site-icon-input-border);
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: var(--site-icon-preview-background);
|
||||||
|
width: 275px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-icon-preview .favicon {
|
@media (prefers-color-scheme: dark) {
|
||||||
width: 16px;
|
.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 .browser-title {
|
.site-icon-preview.settings {
|
||||||
left: 109px;
|
height: 88px;
|
||||||
width: 72px;
|
padding: 16px 0 0 16px;
|
||||||
white-space: nowrap;
|
width: 350px;
|
||||||
|
margin: 0 0 16px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-icon-preview .app-icon-preview {
|
.site-icon-preview.crop {
|
||||||
background-color: #000;
|
width: 258px;
|
||||||
border-radius: 16px;
|
height: 100%;
|
||||||
height: 64px;
|
display: grid;
|
||||||
overflow: hidden;
|
grid-template-columns: 8px 1fr;
|
||||||
width: 64px;
|
grid-template-rows: 64px 1fr;
|
||||||
margin-top: 5px;
|
padding-left: 0;
|
||||||
|
row-gap: 16px;
|
||||||
|
direction: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* rtl:ignore */
|
.site-icon-preview.hidden {
|
||||||
.site-icon-preview .favicon,
|
display: none;
|
||||||
.site-icon-preview .app-icon-preview {
|
}
|
||||||
|
|
||||||
|
.site-icon-preview .direction-wrap {
|
||||||
|
grid-template-columns: 44px 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
display: grid;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.customize-control-site_icon .favicon-preview {
|
.site-icon-preview.settings .direction-wrap {
|
||||||
float: left;
|
grid-template-columns: 58px 1fr;
|
||||||
margin-right: 12px;
|
gap: 16px;
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.customize-control-site_icon .app-icon-preview {
|
.site-icon-preview:after {
|
||||||
margin-top: 9px;
|
--after-size: 150%;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-icon-section button.reset {
|
.site-icon-preview .app-icon-preview {
|
||||||
color: #b32d2e;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
margin: 0;
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-icon-preview-crop-modal .site-icon-preview-browser {
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-icon-preview-crop-modal .image-preview-wrap {
|
||||||
|
overflow: hidden;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-icon-preview-crop-modal .image-preview-wrap.browser {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.reset.remove-site-icon {
|
||||||
|
color: var(--site-icon-removal);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-icon-section button.reset:focus,
|
button.reset.remove-site-icon:focus,
|
||||||
.site-icon-section button.reset:hover {
|
button.reset.remove-site-icon:hover {
|
||||||
background: #b32d2e;
|
background: var(--site-icon-removal);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #b32d2e;
|
border-color: var(--site-icon-removal);
|
||||||
box-shadow: 0 0 0 1px #b32d2e;
|
box-shadow: 0 0 0 1px var(--site-icon-removal);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-icon-section .action-buttons {
|
.site-icon-action-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
/*! This file is auto-generated */
|
/*! This file is auto-generated */
|
||||||
.site-icon-preview .favicon-preview{margin:5px 0 20px;overflow:hidden;position:relative;max-width:180px}.site-icon-preview .browser-title,.site-icon-preview .favicon{height:16px;left:88px;overflow:hidden;position:absolute;top:16px}.site-icon-preview .favicon{width:16px}.site-icon-preview .browser-title{left:109px;width:72px;white-space:nowrap}.site-icon-preview .app-icon-preview{background-color:#000;border-radius:16px;height:64px;overflow:hidden;width:64px;margin-top:5px}.site-icon-preview .app-icon-preview,.site-icon-preview .favicon{direction:ltr}.customize-control-site_icon .favicon-preview{float:left;margin-right:12px;margin-bottom:0}.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:0 0}.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}.site-icon-section .action-buttons{display:flex;flex-wrap:wrap;gap: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;overflow:hidden;box-sizing:border-box;border:1px solid var(--site-icon-input-border);border-radius:4px;background-color:var(--site-icon-preview-background);width:275px}@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;position:absolute;top:0;left:0;width:var(--after-size);transform:translate(calc(var(--after-size) * -.125),calc(var(--after-size) * -.125));filter:blur(5px);opacity:.5;background:var(--site-icon-url)}.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}.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;white-space:nowrap;overflow:hidden;font-weight:500}.site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview{width:64px;height:64px;margin:0;grid-column:2}.site-icon-preview-crop-modal .site-icon-preview-browser{grid-column:2}.site-icon-preview-crop-modal .image-preview-wrap{overflow:hidden;aspect-ratio:1/1}.site-icon-preview-crop-modal .image-preview-wrap.browser{width:24px;height:24px}button.reset.remove-site-icon{color:var(--site-icon-removal);text-decoration:none;border-color:transparent;box-shadow:none;background:0 0}button.reset.remove-site-icon:focus,button.reset.remove-site-icon:hover{background:var(--site-icon-removal);color:#fff;border-color:var(--site-icon-removal);box-shadow:0 0 0 1px var(--site-icon-removal)}.site-icon-action-buttons{display:flex;flex-wrap:wrap;gap:10px}
|
||||||
|
|
@ -188,6 +188,12 @@
|
||||||
$iconPreview.removeClass( 'hidden' );
|
$iconPreview.removeClass( 'hidden' );
|
||||||
$removeButton.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 the choose button is not in the update state, swap the classes.
|
||||||
if ( $chooseButton.attr( 'data-state' ) !== '1' ) {
|
if ( $chooseButton.attr( 'data-state' ) !== '1' ) {
|
||||||
$chooseButton.attr( {
|
$chooseButton.attr( {
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
/*! This file is auto-generated */
|
/*! This file is auto-generated */
|
||||||
!function(t){var a,i=t("#choose-from-library-button"),s=t("#site-icon-preview"),r=t("#browser-icon-preview"),n=t("#app-icon-preview"),l=t("#site_icon_hidden_field"),o=t("#js-remove-site-icon");function c(t){var e=t.get("width"),t=t.get("height"),a=512,i=512,s=a/i,r=a,n=i;return s<e/t?a=(i=t)*s:i=(a=e)/s,{aspectRatio:a+":"+i,handles:!0,keys:!0,instance:!0,persistent:!0,imageWidth:e,imageHeight:t,minWidth:a<r?a:r,minHeight:i<n?i:n,x1:s=(e-a)/2,y1:r=(t-i)/2,x2:a+s,y2:i+r}}function d(t){var e,a=t.alt?(e=wp.i18n.sprintf(wp.i18n.__("App icon preview: Current image: %s"),t.alt),wp.i18n.sprintf(wp.i18n.__("Browser icon preview: Current image: %s"),t.alt)):(e=wp.i18n.sprintf(wp.i18n.__("App icon preview: The current image has no alternative text. The file name is: %s"),t.filename),wp.i18n.sprintf(wp.i18n.__("Browser icon preview: The current image has no alternative text. The file name is: %s"),t.filename));n.attr({src:t.url,alt:e}),r.attr({src:t.url,alt:a}),s.removeClass("hidden"),o.removeClass("hidden"),"1"!==i.attr("data-state")&&i.attr({class:i.attr("data-alt-classes"),"data-alt-classes":i.attr("class"),"data-state":"1"}),i.text(i.attr("data-update-text"))}i.on("click",function(){var e=t(this);(a=wp.media({button:{text:e.data("update"),close:!1},states:[new wp.media.controller.Library({title:e.data("choose-text"),library:wp.media.query({type:"image"}),date:!1,suggestedWidth:e.data("size"),suggestedHeight:e.data("size")}),new wp.media.controller.SiteIconCropper({control:{params:{width:e.data("size"),height:e.data("size")}},imgSelectOptions:c})]})).on("cropped",function(t){l.val(t.id),d(t),a.close(),a=null}),a.on("select",function(){var t=a.state().get("selection").first();t.attributes.height===e.data("size")&&e.data("size")===t.attributes.width?(d(t.attributes),a.close(),l.val(t.id)):a.setState("cropper")}),a.open()}),o.on("click",function(){l.val("false"),t(this).toggleClass("hidden"),s.toggleClass("hidden"),r.attr({src:"",alt:""}),n.attr({src:"",alt:""}),i.attr({class:i.attr("data-alt-classes"),"data-alt-classes":i.attr("class"),"data-state":""}).text(i.attr("data-choose-text")).trigger("focus")})}(jQuery);
|
!function(t){var a,i=t("#choose-from-library-button"),s=t("#site-icon-preview"),r=t("#browser-icon-preview"),n=t("#app-icon-preview"),l=t("#site_icon_hidden_field"),o=t("#js-remove-site-icon");function c(t){var e=t.get("width"),t=t.get("height"),a=512,i=512,s=a/i,r=a,n=i;return s<e/t?a=(i=t)*s:i=(a=e)/s,{aspectRatio:a+":"+i,handles:!0,keys:!0,instance:!0,persistent:!0,imageWidth:e,imageHeight:t,minWidth:a<r?a:r,minHeight:i<n?i:n,x1:s=(e-a)/2,y1:r=(t-i)/2,x2:a+s,y2:i+r}}function d(t){var e,a=t.alt?(e=wp.i18n.sprintf(wp.i18n.__("App icon preview: Current image: %s"),t.alt),wp.i18n.sprintf(wp.i18n.__("Browser icon preview: Current image: %s"),t.alt)):(e=wp.i18n.sprintf(wp.i18n.__("App icon preview: The current image has no alternative text. The file name is: %s"),t.filename),wp.i18n.sprintf(wp.i18n.__("Browser icon preview: The current image has no alternative text. The file name is: %s"),t.filename));n.attr({src:t.url,alt:e}),r.attr({src:t.url,alt:a}),s.removeClass("hidden"),o.removeClass("hidden"),document.documentElement.style.setProperty("--site-icon-url","url("+t.url+")"),"1"!==i.attr("data-state")&&i.attr({class:i.attr("data-alt-classes"),"data-alt-classes":i.attr("class"),"data-state":"1"}),i.text(i.attr("data-update-text"))}i.on("click",function(){var e=t(this);(a=wp.media({button:{text:e.data("update"),close:!1},states:[new wp.media.controller.Library({title:e.data("choose-text"),library:wp.media.query({type:"image"}),date:!1,suggestedWidth:e.data("size"),suggestedHeight:e.data("size")}),new wp.media.controller.SiteIconCropper({control:{params:{width:e.data("size"),height:e.data("size")}},imgSelectOptions:c})]})).on("cropped",function(t){l.val(t.id),d(t),a.close(),a=null}),a.on("select",function(){var t=a.state().get("selection").first();t.attributes.height===e.data("size")&&e.data("size")===t.attributes.width?(d(t.attributes),a.close(),l.val(t.id)):a.setState("cropper")}),a.open()}),o.on("click",function(){l.val("false"),t(this).toggleClass("hidden"),s.toggleClass("hidden"),r.attr({src:"",alt:""}),n.attr({src:"",alt:""}),i.attr({class:i.attr("data-alt-classes"),"data-alt-classes":i.attr("class"),"data-state":""}).text(i.attr("data-choose-text")).trigger("focus")})}(jQuery);
|
||||||
|
|
@ -124,9 +124,11 @@ $tagline_description = sprintf(
|
||||||
$app_icon_alt_value = '';
|
$app_icon_alt_value = '';
|
||||||
$browser_icon_alt_value = '';
|
$browser_icon_alt_value = '';
|
||||||
|
|
||||||
|
$site_icon_url = get_site_icon_url();
|
||||||
|
|
||||||
if ( $site_icon_id ) {
|
if ( $site_icon_id ) {
|
||||||
$img_alt = get_post_meta( $site_icon_id, '_wp_attachment_image_alt', true );
|
$img_alt = get_post_meta( $site_icon_id, '_wp_attachment_image_alt', true );
|
||||||
$filename = wp_basename( get_site_icon_url() );
|
$filename = wp_basename( $site_icon_url );
|
||||||
$app_icon_alt_value = sprintf(
|
$app_icon_alt_value = sprintf(
|
||||||
/* translators: %s: The selected image filename. */
|
/* translators: %s: The selected image filename. */
|
||||||
__( 'App icon preview: The current image has no alternative text. The file name is: %s' ),
|
__( 'App icon preview: The current image has no alternative text. The file name is: %s' ),
|
||||||
|
|
@ -155,20 +157,31 @@ $tagline_description = sprintf(
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--site-icon-url: url( '<?php echo esc_url( $site_icon_url ); ?>' );
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div id="site-icon-preview" class="site-icon-preview wp-clearfix settings-page-preview <?php echo esc_attr( $classes_for_wrapper ); ?>">
|
<div id="site-icon-preview" class="site-icon-preview settings <?php echo esc_attr( $classes_for_wrapper ); ?>">
|
||||||
<div class="favicon-preview">
|
<div class="direction-wrap">
|
||||||
<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="">
|
<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="favicon">
|
<div class="site-icon-preview-browser">
|
||||||
<img id="browser-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $browser_icon_alt_value ); ?>">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<span id="site-icon-preview-site-title" class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
|
<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
|
||||||
<div class="action-buttons">
|
<div class="site-icon-action-buttons">
|
||||||
<button type="button"
|
<button type="button"
|
||||||
id="choose-from-library-button"
|
id="choose-from-library-button"
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -190,7 +203,7 @@ $tagline_description = sprintf(
|
||||||
<button
|
<button
|
||||||
id="js-remove-site-icon"
|
id="js-remove-site-icon"
|
||||||
type="button"
|
type="button"
|
||||||
<?php echo has_site_icon() ? 'class="button button-secondary reset"' : 'class="button button-secondary reset hidden"'; ?>
|
<?php echo has_site_icon() ? 'class="button button-secondary reset remove-site-icon"' : 'class="button button-secondary reset hidden"'; ?>
|
||||||
>
|
>
|
||||||
<?php _e( 'Remove Site Icon' ); ?>
|
<?php _e( 'Remove Site Icon' ); ?>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -198,8 +211,12 @@ $tagline_description = sprintf(
|
||||||
|
|
||||||
<p class="description">
|
<p class="description">
|
||||||
<?php
|
<?php
|
||||||
/* translators: %s: Site Icon size in pixels. */
|
printf(
|
||||||
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>' );
|
/* 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
|
||||||
|
);
|
||||||
?>
|
?>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5203,9 +5203,10 @@ final class WP_Customize_Manager {
|
||||||
array(
|
array(
|
||||||
'label' => __( 'Site Icon' ),
|
'label' => __( 'Site Icon' ),
|
||||||
'description' => sprintf(
|
'description' => sprintf(
|
||||||
/* translators: %s: Site Icon size in pixels. */
|
/* 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 %s pixels.' ) . '</p>',
|
'<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>',
|
||||||
'<code>512 × 512</code>'
|
512,
|
||||||
|
512
|
||||||
),
|
),
|
||||||
'section' => 'title_tagline',
|
'section' => 'title_tagline',
|
||||||
'priority' => 60,
|
'priority' => 60,
|
||||||
|
|
|
||||||
|
|
@ -2533,7 +2533,8 @@
|
||||||
width: 230px;
|
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-left: 262px;
|
margin-left: 262px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2833,7 +2834,8 @@
|
||||||
position: fixed;
|
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-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -2532,7 +2532,8 @@
|
||||||
width: 230px;
|
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;
|
margin-right: 262px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2832,7 +2833,8 @@
|
||||||
position: fixed;
|
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;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -54,59 +54,66 @@ class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control
|
||||||
<# if ( data.label ) { #>
|
<# if ( data.label ) { #>
|
||||||
<span class="customize-control-title">{{ data.label }}</span>
|
<span class="customize-control-title">{{ data.label }}</span>
|
||||||
<# } #>
|
<# } #>
|
||||||
<# if ( data.description ) { #>
|
|
||||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
|
||||||
<# } #>
|
|
||||||
|
|
||||||
<# if ( data.attachment && data.attachment.id ) { #>
|
<# if ( data.attachment && data.attachment.id ) { #>
|
||||||
<div class="attachment-media-view">
|
<div class="attachment-media-view">
|
||||||
<# if ( data.attachment.sizes ) { #>
|
<# if ( data.attachment.sizes ) { #>
|
||||||
<div class="site-icon-preview wp-clearfix">
|
<style>
|
||||||
<div class="favicon-preview">
|
:root{
|
||||||
<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="" />
|
--site-icon-url: url( '{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}' );
|
||||||
|
}
|
||||||
<div class="favicon">
|
</style>
|
||||||
<img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" alt="{{
|
<div class="site-icon-preview customizer">
|
||||||
data.attachment.alt ?
|
<div class="direction-wrap">
|
||||||
wp.i18n.sprintf(
|
<img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" class="app-icon-preview" alt="{{
|
||||||
<?php
|
data.attachment.alt ?
|
||||||
/* translators: %s: The selected image alt text. */
|
wp.i18n.sprintf(
|
||||||
echo wp_json_encode( __( 'Browser icon preview: Current image: %s' ) );
|
<?php
|
||||||
?>
|
/* translators: %s: The selected image alt text. */
|
||||||
,
|
echo wp_json_encode( __( 'App icon preview: Current image: %s' ) )
|
||||||
data.attachment.alt
|
?>
|
||||||
) :
|
,
|
||||||
wp.i18n.sprintf(
|
data.attachment.alt
|
||||||
<?php
|
) :
|
||||||
/* translators: %s: The selected image filename. */
|
wp.i18n.sprintf(
|
||||||
echo wp_json_encode( __( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ) );
|
<?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
|
?>
|
||||||
)
|
,
|
||||||
}}" />
|
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>
|
||||||
</div>
|
</div>
|
||||||
<span class="browser-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></span>
|
|
||||||
</div>
|
</div>
|
||||||
<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
|
|
||||||
)
|
|
||||||
}}"/>
|
|
||||||
</div>
|
</div>
|
||||||
<# } #>
|
<# } #>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
|
|
@ -128,6 +135,9 @@ class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<# } #>
|
<# } #>
|
||||||
|
<# if ( data.description ) { #>
|
||||||
|
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||||
|
<# } #>
|
||||||
<?php
|
<?php
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9173,8 +9173,8 @@ var View = wp.media.View,
|
||||||
* @augments Backbone.View
|
* @augments Backbone.View
|
||||||
*/
|
*/
|
||||||
SiteIconPreview = View.extend(/** @lends wp.media.view.SiteIconPreview.prototype */{
|
SiteIconPreview = View.extend(/** @lends wp.media.view.SiteIconPreview.prototype */{
|
||||||
className: 'site-icon-preview',
|
className: 'site-icon-preview-crop-modal',
|
||||||
template: wp.template( 'site-icon-preview' ),
|
template: wp.template( 'site-icon-preview-crop' ),
|
||||||
|
|
||||||
ready: function() {
|
ready: function() {
|
||||||
this.controller.imgSelect.setOptions({
|
this.controller.imgSelect.setOptions({
|
||||||
|
|
@ -9192,8 +9192,8 @@ SiteIconPreview = View.extend(/** @lends wp.media.view.SiteIconPreview.prototype
|
||||||
updatePreview: function( img, coords ) {
|
updatePreview: function( img, coords ) {
|
||||||
var rx = 64 / coords.width,
|
var rx = 64 / coords.width,
|
||||||
ry = 64 / coords.height,
|
ry = 64 / coords.height,
|
||||||
preview_rx = 16 / coords.width,
|
preview_rx = 24 / coords.width,
|
||||||
preview_ry = 16 / coords.height;
|
preview_ry = 24 / coords.height;
|
||||||
|
|
||||||
$( '#preview-app-icon' ).css({
|
$( '#preview-app-icon' ).css({
|
||||||
width: Math.round(rx * this.imageWidth ) + 'px',
|
width: Math.round(rx * this.imageWidth ) + 'px',
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1542,21 +1542,31 @@ function wp_print_media_templates() {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<?php // Template for the Site Icon preview, used for example in the Customizer. ?>
|
<?php // Template for the Site Icon preview, used for example in the Customizer. ?>
|
||||||
<script type="text/html" id="tmpl-site-icon-preview">
|
<script type="text/html" id="tmpl-site-icon-preview-crop">
|
||||||
<h2><?php _e( 'Preview' ); ?></h2>
|
<style>
|
||||||
<strong aria-hidden="true"><?php _e( 'As a browser icon' ); ?></strong>
|
:root{
|
||||||
<div class="favicon-preview">
|
--site-icon-url: url( "{{ data.url }}" );
|
||||||
<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" height="" alt="" />
|
}
|
||||||
|
</style>
|
||||||
<div class="favicon">
|
<h2><?php _ex( 'Site Icon Preview', 'noun' ); ?></h2>
|
||||||
<img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" />
|
<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' ); ?>" />
|
||||||
|
</div>
|
||||||
|
<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>
|
</div>
|
||||||
<span class="browser-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
*
|
*
|
||||||
* @global string $wp_version
|
* @global string $wp_version
|
||||||
*/
|
*/
|
||||||
$wp_version = '6.7-alpha-58926';
|
$wp_version = '6.7-alpha-58927';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue