Skip to content

Administration: Update site icon and media control button styling #8724

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Infinite-Null wants to merge 11 commits into from
Closed

Administration: Update site icon and media control button styling #8724

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6724cb4
Administration: Update site icon and media control button styling for…
Infinite-Null Apr 23, 2025
6b8ebc0
Administration: Update site icon and media control button styling for…
Infinite-Null Apr 23, 2025
360d58a
Update upload button and remove `button-add-site-icon` styles
Infinite-Null May 21, 2025
d2c4ad5
Enhance header image control: update button classes for better stylin…
Infinite-Null Jun 2, 2025
a091f7f
Refactor: remove button classes
Infinite-Null Jun 2, 2025
9d9139b
Improves header image control UI
Infinite-Null Jul 28, 2025
eba027e
Fixed focus state for upload button
Infinite-Null Jul 29, 2025
f0b0313
Merge branch 'trunk' into fix/customizer-button-appearance
Infinite-Null Jul 29, 2025
7129be2
Set padding on mobile to match existing area
joedolson Aug 15, 2025
45b311c
Add button-hero for site icon so styles match customizer
joedolson Aug 15, 2025
3c41b0d
Move header image button styles to customize-controls & reduce specif…
joedolson Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/js/_enqueues/wp/customize/views.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,14 @@

setButtons: function() {
var elements = $('#customize-control-header_image .actions .remove');
var addButton = $('#customize-control-header_image .actions .new');

if (this.model.get('choice')) {
elements.show();
addButton.removeClass('upload-button');
} else {
elements.hide();
addButton.addClass('upload-button');
}
}
});
Expand Down
19 changes: 19 additions & 0 deletions src/wp-admin/css/customize-controls.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1441,6 +1441,21 @@ p.customize-section-description {
white-space: normal;
}

.customize-control .attachment-media-view .upload-button {
width: 100%;
padding: 9px 0;
}

.customize-control .attachment-media-view .upload-button.control-focus {
width: auto;
padding: 0 10px;
}

.customize-control.customize-control-header .actions .upload-button.button.new {
width: 100%;
padding: 9px 0;
}

.customize-control .attachment-media-view .thumbnail,
.customize-control-header .current .container {
overflow: hidden;
Expand Down Expand Up @@ -2990,6 +3005,10 @@ body.adding-widget .add-new-widget:before,
vertical-align: middle;
}

.customize-control .attachment-media-view .upload-button {
padding: 5px 0;
}

#customize-control-changeset_status .customize-inside-control-row {
padding-top: 15px;
}
Expand Down
26 changes: 0 additions & 26 deletions src/wp-admin/css/forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -794,32 +794,6 @@ ul#add-to-blog-users {
outline: 2px solid transparent;
}

.button-add-site-icon {
width: 100%;
cursor: pointer;
text-align: center;
border: 1px dashed #c3c4c7;
box-sizing: border-box;
padding: 9px 0;
line-height: 1.6;
max-width: 270px;
border-radius: 4px;
background: #f0f0f1;
}

.button-add-site-icon:focus,
.button-add-site-icon:hover {
background: #fff;
}

.button-add-site-icon:focus {
background-color: #fff;
border-color: #3582c4;
border-style: solid;
box-shadow: 0 0 0 1px #3582c4;
outline: 2px solid transparent;
}

/*------------------------------------------------------------------------------
15.0 - Comments Screen
------------------------------------------------------------------------------*/
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/options-general.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
wp_enqueue_media();
wp_enqueue_script( 'site-icon' );

$classes_for_upload_button = 'upload-button button-add-media button-add-site-icon';
$classes_for_upload_button = 'upload-button button-hero button';
$classes_for_update_button = 'button';
$classes_for_wrapper = '';

Expand Down
8 changes: 1 addition & 7 deletions src/wp-includes/customize/class-wp-customize-header-image-control.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,12 +173,6 @@ public function print_header_image_template() {
<img src="{{data.header.thumbnail_url}}" alt="{{data.header.alt_text || data.header.description}}" />

<# } #>
<# } else { #>

<div class="placeholder">
<?php _e( 'No image set' ); ?>
</div>

<# } #>
</script>
<?php
Expand Down Expand Up @@ -246,7 +240,7 @@ public function render_content() {
<div class="actions">
<?php if ( current_user_can( 'upload_files' ) ) : ?>
<button type="button"<?php echo $visibility; ?> class="button remove" aria-label="<?php esc_attr_e( 'Hide header image' ); ?>"><?php _e( 'Hide image' ); ?></button>
<button type="button" class="button new" id="header_image-button" aria-label="<?php esc_attr_e( 'Add Header Image' ); ?>"><?php _e( 'Add Image' ); ?></button>
<button type="button" class="button new <?php echo ! $this->get_current_image_src() ? '' : 'customize-header-image-not-selected'; ?>" id="header_image-button" aria-label="<?php esc_attr_e( 'Add Header Image' ); ?>"><?php _e( 'Add Image' ); ?></button>
<?php endif; ?>
</div>
<div class="choices">
Expand Down
2 changes: 1 addition & 1 deletion src/wp-includes/customize/class-wp-customize-media-control.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ public function content_template() {
<# } else { #>
<div class="attachment-media-view">
<# if ( data.canUpload ) { #>
<button type="button" class="upload-button button-add-media" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
<button type="button" class="upload-button button" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
<# } #>
<div class="actions">
<# if ( data.defaultAttachment ) { #>
Expand Down
2 changes: 1 addition & 1 deletion src/wp-includes/customize/class-wp-customize-site-icon-control.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ public function content_template() {
<# } else { #>
<div class="attachment-media-view">
<# if ( data.canUpload ) { #>
<button type="button" class="upload-button button-add-media"><?php echo $this->button_labels['site_icon']; ?></button>
<button type="button" class="upload-button button"><?php echo $this->button_labels['site_icon']; ?></button>
<# } #>
<div class="actions">
<# if ( data.defaultAttachment ) { #>
Expand Down
Loading