Site icon: Polish up Site Icon on the general settings screen.
This fixes a number of issues, chief among them: - Updates to the site title are reflected in the preview. - Improve alt text for preview - Make string describing site icon more succinct. - Add inline documentation to JavaScript Props kebbet, jorbin, swissspidy, afercia, mukesh27, alexstine, jameskoster, andraganescu. Fixes #54370. Built from https://develop.svn.wordpress.org/trunk@57713 git-svn-id: http://core.svn.wordpress.org/trunk@57214 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Aaron Jorbin
parent
0eb0449db0
commit
7173bb9a94
|
|
@ -790,7 +790,7 @@ ul#add-to-blog-users {
|
|||
outline: 2px solid transparent;
|
||||
}
|
||||
|
||||
.button-add-site-icon{
|
||||
.button-add-site-icon {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
|
@ -802,23 +802,23 @@ ul#add-to-blog-users {
|
|||
}
|
||||
|
||||
.button-add-site-icon:focus,
|
||||
.button-add-site-icon:hover{
|
||||
background: white;
|
||||
.button-add-site-icon:hover {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.site-icon-section .favicon-preview{
|
||||
.site-icon-section .favicon-preview {
|
||||
float: right;
|
||||
}
|
||||
.site-icon-section .app-icon-preview{
|
||||
.site-icon-section .app-icon-preview {
|
||||
float: right;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.site-icon-section .site-icon-preview img{
|
||||
.site-icon-section .site-icon-preview img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.button-ad-site-icon:focus{
|
||||
.button-add-site-icon:focus {
|
||||
background-color: #fff;
|
||||
border-color: #3582c4;
|
||||
border-style: solid;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -789,7 +789,7 @@ ul#add-to-blog-users {
|
|||
outline: 2px solid transparent;
|
||||
}
|
||||
|
||||
.button-add-site-icon{
|
||||
.button-add-site-icon {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
|
@ -801,23 +801,23 @@ ul#add-to-blog-users {
|
|||
}
|
||||
|
||||
.button-add-site-icon:focus,
|
||||
.button-add-site-icon:hover{
|
||||
background: white;
|
||||
.button-add-site-icon:hover {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.site-icon-section .favicon-preview{
|
||||
.site-icon-section .favicon-preview {
|
||||
float: left;
|
||||
}
|
||||
.site-icon-section .app-icon-preview{
|
||||
.site-icon-section .app-icon-preview {
|
||||
float: left;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.site-icon-section .site-icon-preview img{
|
||||
.site-icon-section .site-icon-preview img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.button-ad-site-icon:focus{
|
||||
.button-add-site-icon:focus {
|
||||
background-color: #fff;
|
||||
border-color: #3582c4;
|
||||
border-style: solid;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8,7 +8,6 @@
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
max-width: 180px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.site-icon-preview .favicon,
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
/*! This file is auto-generated */
|
||||
.site-icon-preview .favicon-preview{margin:5px 0 20px;overflow:hidden;position:relative;max-width:180px;float:right}.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-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}
|
||||
|
|
@ -7,7 +7,6 @@
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
max-width: 180px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.site-icon-preview .favicon,
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
/*! This file is auto-generated */
|
||||
.site-icon-preview .favicon-preview{margin:5px 0 20px;overflow:hidden;position:relative;max-width:180px;float:left}.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-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}
|
||||
|
|
@ -36,6 +36,7 @@ function options_general_add_js() {
|
|||
<script type="text/javascript">
|
||||
jQuery( function($) {
|
||||
var $siteName = $( '#wp-admin-bar-site-name' ).children( 'a' ).first(),
|
||||
$siteIconPreview = $('#site-icon-preview-site-title'),
|
||||
homeURL = ( <?php echo wp_json_encode( get_home_url() ); ?> || '' ).replace( /^(https?:\/\/)?(www\.)?/, '' );
|
||||
|
||||
$( '#blogname' ).on( 'input', function() {
|
||||
|
|
@ -47,6 +48,7 @@ function options_general_add_js() {
|
|||
}
|
||||
|
||||
$siteName.text( title );
|
||||
$siteIconPreview.text( title );
|
||||
});
|
||||
|
||||
$( 'input[name="date_format"]' ).on( 'click', function() {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,40 @@
|
|||
(function($) {
|
||||
var frame;
|
||||
/**
|
||||
* Handle the site icon setting in options-general.php.
|
||||
*
|
||||
* @since 6.5.0
|
||||
* @output wp-admin/js/site-icon.js
|
||||
*/
|
||||
|
||||
function calculateImageSelectOptions ( attachment ) {
|
||||
var realWidth = attachment.get( 'width' ),
|
||||
/* global jQuery, wp */
|
||||
|
||||
( function ( $ ) {
|
||||
var $chooseButton = $( '#choose-from-library-button' ),
|
||||
$iconPreview = $( '#site-icon-preview' ),
|
||||
$browserIconPreview = $( '#browser-icon-preview' ),
|
||||
$appIconPreview = $( '#app-icon-preview' ),
|
||||
$hiddenDataField = $( '#site_icon_hidden_field' ),
|
||||
$removeButton = $( '#js-remove-site-icon' ),
|
||||
frame;
|
||||
|
||||
/**
|
||||
* Calculate image selection options based on the attachment dimensions.
|
||||
*
|
||||
* @since 6.5.0
|
||||
*
|
||||
* @param {Object} attachment The attachment object representing the image.
|
||||
* @return {Object} The image selection options.
|
||||
*/
|
||||
function calculateImageSelectOptions( attachment ) {
|
||||
var realWidth = attachment.get( 'width' ),
|
||||
realHeight = attachment.get( 'height' ),
|
||||
xInit = 512,
|
||||
yInit = 512,
|
||||
ratio = xInit / yInit,
|
||||
xImg = xInit,
|
||||
yImg = yInit,
|
||||
x1, y1, imgSelectOptions;
|
||||
xImg = xInit,
|
||||
yImg = yInit,
|
||||
x1,
|
||||
y1,
|
||||
imgSelectOptions;
|
||||
|
||||
if ( realWidth / realHeight > ratio ) {
|
||||
yInit = realHeight;
|
||||
|
|
@ -35,104 +60,177 @@
|
|||
x1: x1,
|
||||
y1: y1,
|
||||
x2: xInit + x1,
|
||||
y2: yInit + y1
|
||||
y2: yInit + y1,
|
||||
};
|
||||
|
||||
return imgSelectOptions;
|
||||
}
|
||||
|
||||
$( function() {
|
||||
// Build the choose from library frame.
|
||||
$( '#choose-from-library-link' ).on( 'click', function() {
|
||||
var $el = $(this);
|
||||
/**
|
||||
* Initializes the media frame for selecting or cropping an image.
|
||||
*
|
||||
* @since 6.5.0
|
||||
*/
|
||||
$chooseButton.on( 'click', function () {
|
||||
var $el = $( this );
|
||||
|
||||
// Create the media frame.
|
||||
frame = wp.media({
|
||||
button: {
|
||||
// Set the text of the button.
|
||||
text: $el.data('update'),
|
||||
// Don't close, we might need to crop.
|
||||
close: false
|
||||
},
|
||||
states: [
|
||||
new wp.media.controller.Library({
|
||||
title: $el.data( 'choose' ),
|
||||
library: wp.media.query({ type: 'image' }),
|
||||
date: false,
|
||||
suggestedWidth: $el.data( 'size' ),
|
||||
suggestedHeight: $el.data( 'size' )
|
||||
}),
|
||||
new wp.media.controller.SiteIconCropper({
|
||||
control: {
|
||||
params: {
|
||||
width: $el.data( 'size' ),
|
||||
height: $el.data( 'size' )
|
||||
}
|
||||
// Create the media frame.
|
||||
frame = wp.media( {
|
||||
button: {
|
||||
// Set the text of the button.
|
||||
text: $el.data( 'update' ),
|
||||
|
||||
// Don't close, we might need to crop.
|
||||
close: false,
|
||||
},
|
||||
states: [
|
||||
new wp.media.controller.Library( {
|
||||
title: $el.data( 'choose-text' ),
|
||||
library: wp.media.query( { type: 'image' } ),
|
||||
date: false,
|
||||
suggestedWidth: $el.data( 'size' ),
|
||||
suggestedHeight: $el.data( 'size' ),
|
||||
} ),
|
||||
new wp.media.controller.SiteIconCropper( {
|
||||
control: {
|
||||
params: {
|
||||
width: $el.data( 'size' ),
|
||||
height: $el.data( 'size' ),
|
||||
},
|
||||
imgSelectOptions: calculateImageSelectOptions
|
||||
})
|
||||
]
|
||||
});
|
||||
},
|
||||
imgSelectOptions: calculateImageSelectOptions,
|
||||
} ),
|
||||
],
|
||||
} );
|
||||
|
||||
frame.on( 'cropped', function( attachment) {
|
||||
$( '#site_icon_hidden_field' ).val(attachment.id);
|
||||
switchToUpdate(attachment.url);
|
||||
frame.on( 'cropped', function ( attachment ) {
|
||||
$hiddenDataField.val( attachment.id );
|
||||
switchToUpdate( attachment );
|
||||
frame.close();
|
||||
|
||||
// Start over with a frame that is so fresh and so clean clean.
|
||||
frame = null;
|
||||
} );
|
||||
|
||||
// When an image is selected, run a callback.
|
||||
frame.on( 'select', function () {
|
||||
// Grab the selected attachment.
|
||||
var attachment = frame.state().get( 'selection' ).first();
|
||||
|
||||
if (
|
||||
attachment.attributes.height === $el.data( 'size' ) &&
|
||||
$el.data( 'size' ) === attachment.attributes.width
|
||||
) {
|
||||
switchToUpdate( attachment.attributes );
|
||||
frame.close();
|
||||
// Start over with a frame that is so fresh and so clean clean.
|
||||
frame = null;
|
||||
});
|
||||
|
||||
// When an image is selected, run a callback.
|
||||
frame.on( 'select', function() {
|
||||
// Grab the selected attachment.
|
||||
var attachment = frame.state().get('selection').first();
|
||||
// Set the value of the hidden input to the attachment id.
|
||||
$hiddenDataField.val( attachment.id );
|
||||
} else {
|
||||
frame.setState( 'cropper' );
|
||||
}
|
||||
} );
|
||||
|
||||
if ( attachment.attributes.height === $el.data('size') && $el.data('size') === attachment.attributes.width ) {
|
||||
// Set the value of the hidden input to the attachment id.
|
||||
$( '#site_icon_hidden_field').val(attachment.id);
|
||||
switchToUpdate(attachment.attributes.url);
|
||||
frame.close();
|
||||
} else {
|
||||
frame.setState( 'cropper' );
|
||||
}
|
||||
});
|
||||
frame.open();
|
||||
} );
|
||||
|
||||
frame.open();
|
||||
});
|
||||
});
|
||||
/**
|
||||
* Update the UI when a site icon is selected.
|
||||
*
|
||||
* @since 6.5.0
|
||||
*
|
||||
* @param {array} attributes The attributes for the attachment.
|
||||
*/
|
||||
function switchToUpdate( attributes ) {
|
||||
var i18nAppAlternativeString, i18nBrowserAlternativeString;
|
||||
|
||||
function switchToUpdate( url ){
|
||||
// Set site-icon-img src to the url and remove the hidden class.
|
||||
$( '#site-icon-preview').find('img').not('.browser-preview').each( function(i, img ){
|
||||
$(img).attr('src', url );
|
||||
});
|
||||
$( '#site-icon-preview' ).removeClass( 'hidden' );
|
||||
// Remove hidden class from remove.
|
||||
$( '#js-remove-site-icon' ).removeClass( 'hidden' );
|
||||
// If the button is not in the update state, swap the classes.
|
||||
if( $( '#choose-from-library-link' ).attr( 'data-state' ) !== '1' ){
|
||||
var classes = $( '#choose-from-library-link' ).attr( 'class' );
|
||||
$( '#choose-from-library-link' ).attr( 'class', $( '#choose-from-library-link' ).attr('data-alt-classes') );
|
||||
$( '#choose-from-library-link' ).attr( 'data-alt-classes', classes );
|
||||
$( '#choose-from-library-link' ).attr( 'data-state', '1' );
|
||||
if ( attributes.alt ) {
|
||||
i18nAppAlternativeString = wp.i18n.sprintf(
|
||||
/* translators: %s: The selected image alt text. */
|
||||
wp.i18n.__( 'App icon preview: Current image: %s' ),
|
||||
attributes.alt
|
||||
);
|
||||
i18nBrowserAlternativeString = wp.i18n.sprintf(
|
||||
/* translators: %s: The selected image alt text. */
|
||||
wp.i18n.__( 'Browser icon preview: Current image: %s' ),
|
||||
attributes.alt
|
||||
);
|
||||
} else {
|
||||
i18nAppAlternativeString = wp.i18n.sprintf(
|
||||
/* translators: %s: The selected image filename. */
|
||||
wp.i18n.__(
|
||||
'App icon preview: The current image has no alternative text. The file name is: %s'
|
||||
),
|
||||
attributes.filename
|
||||
);
|
||||
i18nBrowserAlternativeString = wp.i18n.sprintf(
|
||||
/* translators: %s: The selected image filename. */
|
||||
wp.i18n.__(
|
||||
'Browser icon preview: The current image has no alternative text. The file name is: %s'
|
||||
),
|
||||
attributes.filename
|
||||
);
|
||||
}
|
||||
|
||||
// swap the text of the button
|
||||
$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr( 'data-update-text' ) );
|
||||
// Set site-icon-img src and alternative text to app icon preview.
|
||||
$appIconPreview.attr( {
|
||||
src: attributes.url,
|
||||
alt: i18nAppAlternativeString,
|
||||
} );
|
||||
|
||||
// Set site-icon-img src and alternative text to browser preview.
|
||||
$browserIconPreview.attr( {
|
||||
src: attributes.url,
|
||||
alt: i18nBrowserAlternativeString,
|
||||
} );
|
||||
|
||||
// Remove hidden class from icon preview div and remove button.
|
||||
$iconPreview.removeClass( 'hidden' );
|
||||
$removeButton.removeClass( 'hidden' );
|
||||
|
||||
// If the choose button is not in the update state, swap the classes.
|
||||
if ( $chooseButton.attr( 'data-state' ) !== '1' ) {
|
||||
$chooseButton.attr( {
|
||||
class: $chooseButton.attr( 'data-alt-classes' ),
|
||||
'data-alt-classes': $chooseButton.attr( 'class' ),
|
||||
'data-state': '1',
|
||||
} );
|
||||
}
|
||||
|
||||
// Swap the text of the choose button.
|
||||
$chooseButton.text( $chooseButton.attr( 'data-update-text' ) );
|
||||
}
|
||||
|
||||
$( '#js-remove-site-icon' ).on( 'click', function() {
|
||||
$( '#site_icon_hidden_field' ).val( 'false' );
|
||||
$( '#site-icon-preview' ).toggleClass( 'hidden' );
|
||||
/**
|
||||
* Handles the click event of the remove button.
|
||||
*
|
||||
* @since 6.5.0
|
||||
*/
|
||||
$removeButton.on( 'click', function () {
|
||||
$hiddenDataField.val( 'false' );
|
||||
$( this ).toggleClass( 'hidden' );
|
||||
$iconPreview.toggleClass( 'hidden' );
|
||||
$browserIconPreview.attr( {
|
||||
src: '',
|
||||
alt: '',
|
||||
} );
|
||||
$appIconPreview.attr( {
|
||||
src: '',
|
||||
alt: '',
|
||||
} );
|
||||
|
||||
var classes = $( '#choose-from-library-link' ).attr( 'class' );
|
||||
$( '#choose-from-library-link' ).attr( 'class', $( '#choose-from-library-link' ).attr( 'data-alt-classes' ) );
|
||||
$( '#choose-from-library-link' ).attr( 'data-alt-classes', classes );
|
||||
|
||||
// Swap the text of the button.
|
||||
$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr( 'data-choose-text' ) );
|
||||
// Set the state of the button so it can be changed on new icon.
|
||||
$( '#choose-from-library-link' ).attr( 'data-state', '');
|
||||
});
|
||||
}(jQuery));
|
||||
/**
|
||||
* Resets state to the button, for correct visual style and state.
|
||||
* Updates the text of the button.
|
||||
* Sets focus state to the button.
|
||||
*/
|
||||
$chooseButton
|
||||
.attr( {
|
||||
class: $chooseButton.attr( 'data-alt-classes' ),
|
||||
'data-alt-classes': $chooseButton.attr( 'class' ),
|
||||
'data-state': '',
|
||||
} )
|
||||
.text( $chooseButton.attr( 'data-choose-text' ) )
|
||||
.trigger( 'focus' );
|
||||
} );
|
||||
} )( jQuery );
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
/*! This file is auto-generated */
|
||||
!function(a){var i;function t(t){var e=t.get("width"),t=t.get("height"),i=512,a=512,r=i/a,o=i,s=a;return r<e/t?i=(a=t)*r:a=(i=e)/r,{aspectRatio:i+":"+a,handles:!0,keys:!0,instance:!0,persistent:!0,imageWidth:e,imageHeight:t,minWidth:i<o?i:o,minHeight:a<s?a:s,x1:r=(e-i)/2,y1:o=(t-a)/2,x2:i+r,y2:a+o}}function r(i){var t;a("#site-icon-preview").find("img").not(".browser-preview").each(function(t,e){a(e).attr("src",i)}),a("#site-icon-preview").removeClass("hidden"),a("#js-remove-site-icon").removeClass("hidden"),"1"!==a("#choose-from-library-link").attr("data-state")&&(t=a("#choose-from-library-link").attr("class"),a("#choose-from-library-link").attr("class",a("#choose-from-library-link").attr("data-alt-classes")),a("#choose-from-library-link").attr("data-alt-classes",t),a("#choose-from-library-link").attr("data-state","1")),a("#choose-from-library-link").text(a("#choose-from-library-link").attr("data-update-text"))}a(function(){a("#choose-from-library-link").on("click",function(){var e=a(this);(i=wp.media({button:{text:e.data("update"),close:!1},states:[new wp.media.controller.Library({title:e.data("choose"),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:t})]})).on("cropped",function(t){a("#site_icon_hidden_field").val(t.id),r(t.url),i.close(),i=null}),i.on("select",function(){var t=i.state().get("selection").first();t.attributes.height===e.data("size")&&e.data("size")===t.attributes.width?(a("#site_icon_hidden_field").val(t.id),r(t.attributes.url),i.close()):i.setState("cropper")}),i.open()})}),a("#js-remove-site-icon").on("click",function(){a("#site_icon_hidden_field").val("false"),a("#site-icon-preview").toggleClass("hidden"),a(this).toggleClass("hidden");var t=a("#choose-from-library-link").attr("class");a("#choose-from-library-link").attr("class",a("#choose-from-library-link").attr("data-alt-classes")),a("#choose-from-library-link").attr("data-alt-classes",t),a("#choose-from-library-link").text(a("#choose-from-library-link").attr("data-choose-text")),a("#choose-from-library-link").attr("data-state","")})}(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"),"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);
|
||||
|
|
@ -107,34 +107,70 @@ $tagline_description = sprintf(
|
|||
|
||||
$classes_for_upload_button = 'upload-button button-add-media button-add-site-icon';
|
||||
$classes_for_update_button = 'button';
|
||||
$classes_for_wrapper = '';
|
||||
|
||||
$classes_for_avatar = 'avatar avatar-150';
|
||||
if ( has_site_icon() ) {
|
||||
$classes_for_avatar .= ' has-site-icon';
|
||||
$classes_for_wrapper .= ' has-site-icon';
|
||||
$classes_for_button = $classes_for_update_button;
|
||||
$classes_for_button_on_change = $classes_for_upload_button;
|
||||
} else {
|
||||
$classes_for_avatar .= ' hidden';
|
||||
$classes_for_wrapper .= ' hidden';
|
||||
$classes_for_button = $classes_for_upload_button;
|
||||
$classes_for_button_on_change = $classes_for_update_button;
|
||||
}
|
||||
|
||||
// Handle alt text for site icon on page load.
|
||||
$site_icon_id = (int) get_option( 'site_icon' );
|
||||
$app_icon_alt_value = '';
|
||||
$browser_icon_alt_value = '';
|
||||
|
||||
if ( $site_icon_id ) {
|
||||
$img_alt = get_post_meta( $site_icon_id, '_wp_attachment_image_alt', true );
|
||||
$filename = wp_basename( get_site_icon_url() );
|
||||
$app_icon_alt_value = sprintf(
|
||||
/* translators: %s: The selected image filename. */
|
||||
__( 'App icon preview: The current image has no alternative text. The file name is: %s' ),
|
||||
$filename
|
||||
);
|
||||
|
||||
$browser_icon_alt_value = sprintf(
|
||||
/* translators: %s: The selected image filename. */
|
||||
__( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ),
|
||||
$filename
|
||||
);
|
||||
|
||||
if ( $img_alt ) {
|
||||
$app_icon_alt_value = sprintf(
|
||||
/* translators: %s: The selected image alt text. */
|
||||
__( 'App icon preview: Current image: %s' ),
|
||||
$img_alt
|
||||
);
|
||||
|
||||
$browser_icon_alt_value = sprintf(
|
||||
/* translators: %s: The selected image alt text. */
|
||||
__( 'Browser icon preview: Current image: %s' ),
|
||||
$img_alt
|
||||
);
|
||||
}
|
||||
}
|
||||
?>
|
||||
<div id="site-icon-preview" class="site-icon-preview wp-clearfix <?php echo esc_attr( $classes_for_avatar ); ?>">
|
||||
|
||||
|
||||
<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 src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>">
|
||||
<img id="browser-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $browser_icon_alt_value ); ?>">
|
||||
</div>
|
||||
<span class="browser-title" aria-hidden="true"><?php echo get_bloginfo( 'name' ); ?></span>
|
||||
<span id="site-icon-preview-site-title" class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
|
||||
</div>
|
||||
<img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>">
|
||||
<img id="app-icon-preview" class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $app_icon_alt_value ); ?>">
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
|
||||
<div class="action-buttons">
|
||||
<button type="button"
|
||||
id="choose-from-library-link"
|
||||
id="choose-from-library-button"
|
||||
type="button"
|
||||
class="<?php echo esc_attr( $classes_for_button ); ?>"
|
||||
data-alt-classes="<?php echo esc_attr( $classes_for_button_on_change ); ?>"
|
||||
|
|
@ -160,13 +196,10 @@ $tagline_description = sprintf(
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<p class="description">
|
||||
<?php _e( 'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. Upload one here!' ); ?>
|
||||
</p>
|
||||
<p class="description">
|
||||
<?php
|
||||
/* translators: %s: Site Icon size in pixels. */
|
||||
printf( __( 'Site Icons should be square and at least %s pixels.' ), '<strong>512 × 512</strong>' );
|
||||
printf( __( 'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. They should be square and at least %s pixels.' ), '<code>512 × 512</code>' );
|
||||
?>
|
||||
</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -849,7 +849,8 @@ function wp_default_scripts( $scripts ) {
|
|||
|
||||
$scripts->add( 'wp-lists', "/wp-includes/js/wp-lists$suffix.js", array( 'wp-ajax-response', 'jquery-color' ), false, 1 );
|
||||
|
||||
$scripts->add( 'site-icon', '/wp-admin/js/site-icon.js', array( 'jquery', 'jcrop' ), false, 1 );
|
||||
$scripts->add( 'site-icon', '/wp-admin/js/site-icon.js', array( 'jquery' ), false, 1 );
|
||||
$scripts->set_translations( 'site-icon' );
|
||||
|
||||
// WordPress no longer uses or bundles Prototype or script.aculo.us. These are now pulled from an external source.
|
||||
$scripts->add( 'prototype', 'https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js', array(), '1.7.1' );
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '6.5-beta2-57712';
|
||||
$wp_version = '6.5-beta2-57713';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue