From 6724cb400a68b2ea9e53a0ed131898d79fd4ea14 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Wed, 23 Apr 2025 12:21:41 +0530 Subject: [PATCH 01/10] Administration: Update site icon and media control button styling for clarity --- src/wp-admin/options-general.php | 2 +- src/wp-includes/customize/class-wp-customize-media-control.php | 2 +- .../customize/class-wp-customize-site-icon-control.php | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php index f0becb113d767..59209e1608ede 100644 --- a/src/wp-admin/options-general.php +++ b/src/wp-admin/options-general.php @@ -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 new'; $classes_for_update_button = 'button'; $classes_for_wrapper = ''; diff --git a/src/wp-includes/customize/class-wp-customize-media-control.php b/src/wp-includes/customize/class-wp-customize-media-control.php index c4af7c24ed2ed..0553fd2015686 100644 --- a/src/wp-includes/customize/class-wp-customize-media-control.php +++ b/src/wp-includes/customize/class-wp-customize-media-control.php @@ -196,7 +196,7 @@ public function content_template() { <# } else { #>
<# if ( data.canUpload ) { #> - + <# } #>
<# if ( data.defaultAttachment ) { #> diff --git a/src/wp-includes/customize/class-wp-customize-site-icon-control.php b/src/wp-includes/customize/class-wp-customize-site-icon-control.php index fe05678321cc2..1d13cd00b798f 100644 --- a/src/wp-includes/customize/class-wp-customize-site-icon-control.php +++ b/src/wp-includes/customize/class-wp-customize-site-icon-control.php @@ -126,7 +126,7 @@ public function content_template() { <# } else { #>
<# if ( data.canUpload ) { #> - + <# } #>
<# if ( data.defaultAttachment ) { #> From 6b8ebc02447f386eabb556bf3f76b9f402c8d47a Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Wed, 23 Apr 2025 12:25:31 +0530 Subject: [PATCH 02/10] Administration: Update site icon and media control button styling for clarity --- src/wp-admin/options-general.php | 2 +- src/wp-includes/customize/class-wp-customize-media-control.php | 2 +- .../customize/class-wp-customize-site-icon-control.php | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php index 59209e1608ede..e27d115a1c592 100644 --- a/src/wp-admin/options-general.php +++ b/src/wp-admin/options-general.php @@ -105,7 +105,7 @@ wp_enqueue_media(); wp_enqueue_script( 'site-icon' ); - $classes_for_upload_button = 'upload-button button new'; + $classes_for_upload_button = 'upload-button button'; $classes_for_update_button = 'button'; $classes_for_wrapper = ''; diff --git a/src/wp-includes/customize/class-wp-customize-media-control.php b/src/wp-includes/customize/class-wp-customize-media-control.php index 0553fd2015686..af137512c41f3 100644 --- a/src/wp-includes/customize/class-wp-customize-media-control.php +++ b/src/wp-includes/customize/class-wp-customize-media-control.php @@ -196,7 +196,7 @@ public function content_template() { <# } else { #>
<# if ( data.canUpload ) { #> - + <# } #>
<# if ( data.defaultAttachment ) { #> diff --git a/src/wp-includes/customize/class-wp-customize-site-icon-control.php b/src/wp-includes/customize/class-wp-customize-site-icon-control.php index 1d13cd00b798f..e8dd34070d74c 100644 --- a/src/wp-includes/customize/class-wp-customize-site-icon-control.php +++ b/src/wp-includes/customize/class-wp-customize-site-icon-control.php @@ -126,7 +126,7 @@ public function content_template() { <# } else { #>
<# if ( data.canUpload ) { #> - + <# } #>
<# if ( data.defaultAttachment ) { #> From 360d58a330466f04f1e20cb2e548570a8cfce62f Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Wed, 21 May 2025 13:26:20 +0530 Subject: [PATCH 03/10] Update upload button and remove `button-add-site-icon` styles --- src/wp-admin/css/customize-controls.css | 5 +++++ src/wp-admin/css/forms.css | 26 ------------------------- 2 files changed, 5 insertions(+), 26 deletions(-) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index b803c86ebdf0b..514ad9efbef75 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -1432,6 +1432,11 @@ p.customize-section-description { white-space: normal; } +.customize-control .attachment-media-view .upload-button { + width: 100%; + padding: 9px 0; +} + .customize-control .attachment-media-view .thumbnail, .customize-control-header .current .container { overflow: hidden; diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index ffe2c1711e7a1..bcd282a40498f 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -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 ------------------------------------------------------------------------------*/ From d2c4ad500432d9136469e0f2e9644b3898bde4d0 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Mon, 2 Jun 2025 15:00:18 +0530 Subject: [PATCH 04/10] Enhance header image control: update button classes for better styling and visibility --- src/js/_enqueues/wp/customize/views.js | 4 ++++ src/wp-includes/css/buttons.css | 5 +++++ .../customize/class-wp-customize-header-image-control.php | 8 +------- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/js/_enqueues/wp/customize/views.js b/src/js/_enqueues/wp/customize/views.js index a7125e032e63c..02c984de70c43 100644 --- a/src/js/_enqueues/wp/customize/views.js +++ b/src/js/_enqueues/wp/customize/views.js @@ -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'); } } }); diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 5146be4274254..18496a06876a5 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -340,6 +340,11 @@ TABLE OF CONTENTS: 0 0 0 1px #3582c4; } +.wp-core-ui.wp-customizer .upload-button { + width: 100%; + padding: 9px 0; +} + /* ---------------------------------------------------------------------------- 5.0 - Responsive Button Styles ---------------------------------------------------------------------------- */ diff --git a/src/wp-includes/customize/class-wp-customize-header-image-control.php b/src/wp-includes/customize/class-wp-customize-header-image-control.php index 2d36ecccc459d..1876237598563 100644 --- a/src/wp-includes/customize/class-wp-customize-header-image-control.php +++ b/src/wp-includes/customize/class-wp-customize-header-image-control.php @@ -173,12 +173,6 @@ public function print_header_image_template() { {{data.header.alt_text || data.header.description}} <# } #> - <# } else { #> - -
- -
- <# } #> - +
From a091f7f5713ef0442ff917e8505cbde796289759 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Mon, 2 Jun 2025 15:45:54 +0530 Subject: [PATCH 05/10] Refactor: remove button classes --- src/wp-includes/customize/class-wp-customize-media-control.php | 2 +- .../customize/class-wp-customize-site-icon-control.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/wp-includes/customize/class-wp-customize-media-control.php b/src/wp-includes/customize/class-wp-customize-media-control.php index af137512c41f3..edd2de5fdb45b 100644 --- a/src/wp-includes/customize/class-wp-customize-media-control.php +++ b/src/wp-includes/customize/class-wp-customize-media-control.php @@ -189,7 +189,7 @@ public function content_template() {
<# if ( data.canUpload ) { #> - + <# } #>
diff --git a/src/wp-includes/customize/class-wp-customize-site-icon-control.php b/src/wp-includes/customize/class-wp-customize-site-icon-control.php index e8dd34070d74c..5efe807047864 100644 --- a/src/wp-includes/customize/class-wp-customize-site-icon-control.php +++ b/src/wp-includes/customize/class-wp-customize-site-icon-control.php @@ -119,7 +119,7 @@ public function content_template() {
<# if ( data.canUpload ) { #> - + <# } #>
From 9d9139b0305e759be0f701f1cb7253c01a8f039c Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Mon, 28 Jul 2025 13:05:24 +0530 Subject: [PATCH 06/10] Improves header image control UI --- src/wp-admin/css/customize-controls.css | 5 +++++ src/wp-includes/css/buttons.css | 2 +- .../customize/class-wp-customize-header-image-control.php | 2 +- .../customize/class-wp-customize-media-control.php | 2 +- .../customize/class-wp-customize-site-icon-control.php | 2 +- 5 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 514ad9efbef75..b4aa65989fff1 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -1437,6 +1437,11 @@ p.customize-section-description { padding: 9px 0; } +.attachment-media-view.attachment-media-view-image.landscape .actions .button.upload-button.control-focus { + width: auto; + padding: 0 10px; +} + .customize-control .attachment-media-view .thumbnail, .customize-control-header .current .container { overflow: hidden; diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 18496a06876a5..606ca1f797e3e 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -340,7 +340,7 @@ TABLE OF CONTENTS: 0 0 0 1px #3582c4; } -.wp-core-ui.wp-customizer .upload-button { +#customize-control-header_image.customize-control.customize-control-header .actions .upload-button.button.new { width: 100%; padding: 9px 0; } diff --git a/src/wp-includes/customize/class-wp-customize-header-image-control.php b/src/wp-includes/customize/class-wp-customize-header-image-control.php index 1876237598563..644d40b4c0a98 100644 --- a/src/wp-includes/customize/class-wp-customize-header-image-control.php +++ b/src/wp-includes/customize/class-wp-customize-header-image-control.php @@ -240,7 +240,7 @@ public function render_content() {
- +
diff --git a/src/wp-includes/customize/class-wp-customize-media-control.php b/src/wp-includes/customize/class-wp-customize-media-control.php index edd2de5fdb45b..af137512c41f3 100644 --- a/src/wp-includes/customize/class-wp-customize-media-control.php +++ b/src/wp-includes/customize/class-wp-customize-media-control.php @@ -189,7 +189,7 @@ public function content_template() {
<# if ( data.canUpload ) { #> - + <# } #>
diff --git a/src/wp-includes/customize/class-wp-customize-site-icon-control.php b/src/wp-includes/customize/class-wp-customize-site-icon-control.php index 5efe807047864..e8dd34070d74c 100644 --- a/src/wp-includes/customize/class-wp-customize-site-icon-control.php +++ b/src/wp-includes/customize/class-wp-customize-site-icon-control.php @@ -119,7 +119,7 @@ public function content_template() {
<# if ( data.canUpload ) { #> - + <# } #>
From eba027e79b6e499a10386e9cf5914a323e4b72e7 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Tue, 29 Jul 2025 12:18:20 +0530 Subject: [PATCH 07/10] Fixed focus state for upload button --- src/wp-admin/css/customize-controls.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index b4aa65989fff1..dc878d042934c 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -1437,8 +1437,8 @@ p.customize-section-description { padding: 9px 0; } -.attachment-media-view.attachment-media-view-image.landscape .actions .button.upload-button.control-focus { - width: auto; +.customize-control .attachment-media-view .upload-button.control-focus { + width: auto; padding: 0 10px; } From 7129be251b1dc97f9c2294199f1e17408b96848d Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Fri, 15 Aug 2025 15:47:52 -0500 Subject: [PATCH 08/10] Set padding on mobile to match existing area This makes the large buttons the same size as the inputs neighboring them, which better matches the current design on mobile. --- src/wp-admin/css/customize-controls.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 11c27fa1be897..1a6b8eb108095 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -3000,6 +3000,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; } From 45b311c3d5f008a694b2bfbd9ee830aba80f2a22 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Fri, 15 Aug 2025 16:10:12 -0500 Subject: [PATCH 09/10] Add button-hero for site icon so styles match customizer --- src/wp-admin/options-general.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php index e27d115a1c592..62dabc4444954 100644 --- a/src/wp-admin/options-general.php +++ b/src/wp-admin/options-general.php @@ -105,7 +105,7 @@ wp_enqueue_media(); wp_enqueue_script( 'site-icon' ); - $classes_for_upload_button = 'upload-button button'; + $classes_for_upload_button = 'upload-button button-hero button'; $classes_for_update_button = 'button'; $classes_for_wrapper = ''; From 3c41b0de0dbddbd47733a1fbf398eb0f164d24e9 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Mon, 18 Aug 2025 15:04:05 -0500 Subject: [PATCH 10/10] Move header image button styles to customize-controls & reduce specificity --- src/wp-admin/css/customize-controls.css | 5 +++++ src/wp-includes/css/buttons.css | 5 ----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 1a6b8eb108095..f39f838b6fb0d 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -1451,6 +1451,11 @@ p.customize-section-description { 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; diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 606ca1f797e3e..5146be4274254 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -340,11 +340,6 @@ TABLE OF CONTENTS: 0 0 0 1px #3582c4; } -#customize-control-header_image.customize-control.customize-control-header .actions .upload-button.button.new { - width: 100%; - padding: 9px 0; -} - /* ---------------------------------------------------------------------------- 5.0 - Responsive Button Styles ---------------------------------------------------------------------------- */