General: Some minor adjustments for the Site Icon option:

* Improve buttons flow on small viewports, taking longer translations into account.
* Make `alt` attributes translatable.
* Remove unused `id` attributes.

Follow-up to [57602].

Props kebbet, afercia, mukesh27.
See #54370.
Built from https://develop.svn.wordpress.org/trunk@57618


git-svn-id: http://core.svn.wordpress.org/trunk@57119 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2024-02-13 13:09:07 +00:00
parent 46221f3bb5
commit 046fe2802c
6 changed files with 21 additions and 11 deletions

View File

@ -61,7 +61,6 @@
border-color: transparent;
box-shadow: none;
background: transparent;
margin: 0 10px;
}
.site-icon-section button.reset:focus,
@ -71,3 +70,9 @@
border-color: #b32d2e;
box-shadow: 0 0 0 1px #b32d2e;
}
.site-icon-section .action-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

View File

@ -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;margin:0 10px}.site-icon-section button.reset:focus,.site-icon-section button.reset:hover{background:#b32d2e;color:#fff;border-color:#b32d2e;box-shadow:0 0 0 1px #b32d2e}
.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}

View File

@ -60,7 +60,6 @@
border-color: transparent;
box-shadow: none;
background: transparent;
margin: 0 10px;
}
.site-icon-section button.reset:focus,
@ -70,3 +69,9 @@
border-color: #b32d2e;
box-shadow: 0 0 0 1px #b32d2e;
}
.site-icon-section .action-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

View File

@ -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;margin:0 10px}.site-icon-section button.reset:focus,.site-icon-section button.reset:hover{background:#b32d2e;color:#fff;border-color:#b32d2e;box-shadow:0 0 0 1px #b32d2e}
.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}

View File

@ -125,14 +125,14 @@ $tagline_description = sprintf(
<div class="favicon-preview">
<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="">
<div class="favicon">
<img src="<?php site_icon_url(); ?>" alt="Preview as a browser icon">
<img src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>">
</div>
<span class="browser-title" aria-hidden="true"><?php echo get_bloginfo( 'name' ); ?></span>
</div>
<img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="Preview as an app icon">
<img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>">
</div>
<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
<p>
<div class="action-buttons">
<button type="button"
id="choose-from-library-link"
type="button"
@ -158,12 +158,12 @@ $tagline_description = sprintf(
>
<?php _e( 'Remove Site Icon' ); ?>
</button>
</p>
</div>
<p class="description" id="site-icon-description">
<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" id="site-icon-further-description">
<p class="description">
<?php
/* translators: %s: Site Icon size in pixels. */
printf( __( 'Site Icons should be square and at least %s pixels.' ), '<strong>512 &times; 512</strong>' );

View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.5-alpha-57617';
$wp_version = '6.5-alpha-57618';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.