Accessibility: Make buttons to add site images look like buttons.

The buttons to add site icons, logos, header images, and background images were designed with a dashed border. This led to confusion with users thinking they were drop regions for image uploads, rather than buttons to trigger an upload.

Change design of upload buttons to clarify expected user interaction.

Props emaildano, afercia, joedolson, ankitkumarshah, logicrays, shailu25.
Fixes #47579.
Built from https://develop.svn.wordpress.org/trunk@60645


git-svn-id: http://core.svn.wordpress.org/trunk@59981 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.css

@@ -1442,6 +1442,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;
@@ -2991,6 +3006,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;
 	}

wp-admin/css/customize-controls.css

@@ -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;
@@ -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;
 	}

wp-admin/css/forms-rtl.css

@@ -790,32 +790,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
 ------------------------------------------------------------------------------*/

wp-admin/css/forms.css

@@ -789,32 +789,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
 ------------------------------------------------------------------------------*/

wp-admin/options-general.php

@@ -105,7 +105,7 @@ $tagline_description = sprintf(
 	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       = '';
 

wp-includes/customize/class-wp-customize-header-image-control.php

@@ -173,12 +173,6 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
 			<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
@@ -246,7 +240,7 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
 			<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">

wp-includes/customize/class-wp-customize-media-control.php

@@ -196,7 +196,7 @@ class WP_Customize_Media_Control extends WP_Customize_Control {
 		<# } 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 ) { #>

wp-includes/customize/class-wp-customize-site-icon-control.php

@@ -126,7 +126,7 @@ class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control
 		<# } 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 ) { #>

wp-includes/js/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');
 			}
 		}
 	});

wp-includes/js/customize-views.min.js

@@ -1,2 +1,2 @@
 /*! This file is auto-generated */
-!function(i,e,o){var t;e&&e.customize&&((t=e.customize).HeaderTool.CurrentView=e.Backbone.View.extend({template:e.template("header-current"),initialize:function(){this.listenTo(this.model,"change",this.render),this.render()},render:function(){return this.$el.html(this.template(this.model.toJSON())),this.setButtons(),this},setButtons:function(){var e=i("#customize-control-header_image .actions .remove");this.model.get("choice")?e.show():e.hide()}}),t.HeaderTool.ChoiceView=e.Backbone.View.extend({template:e.template("header-choice"),className:"header-view",events:{"click .choice,.random":"select","click .close":"removeImage"},initialize:function(){var e=[this.model.get("header").url,this.model.get("choice")];this.listenTo(this.model,"change:selected",this.toggleSelected),o.contains(e,t.get().header_image)&&t.HeaderTool.currentHeader.set(this.extendedModel())},render:function(){return this.$el.html(this.template(this.extendedModel())),this.toggleSelected(),this},toggleSelected:function(){this.$el.toggleClass("selected",this.model.get("selected"))},extendedModel:function(){var e=this.model.get("collection");return o.extend(this.model.toJSON(),{type:e.type})},select:function(){this.preventJump(),this.model.save(),t.HeaderTool.currentHeader.set(this.extendedModel())},preventJump:function(){var e=i(".wp-full-overlay-sidebar-content"),t=e.scrollTop();o.defer(function(){e.scrollTop(t)})},removeImage:function(e){e.stopPropagation(),this.model.destroy(),this.remove()}}),t.HeaderTool.ChoiceListView=e.Backbone.View.extend({initialize:function(){this.listenTo(this.collection,"add",this.addOne),this.listenTo(this.collection,"remove",this.render),this.listenTo(this.collection,"sort",this.render),this.listenTo(this.collection,"change",this.toggleList),this.render()},render:function(){this.$el.empty(),this.collection.each(this.addOne,this),this.toggleList()},addOne:function(e){e.set({collection:this.collection}),e=new t.HeaderTool.ChoiceView({model:e}),this.$el.append(e.render().el)},toggleList:function(){var e=this.$el.parents().prev(".customize-control-title"),t=this.$el.find(".random").parent();this.collection.shouldHideTitle()?e.add(t).hide():e.add(t).show()}}),t.HeaderTool.CombinedList=e.Backbone.View.extend({initialize:function(e){this.collections=e,this.on("all",this.propagate,this)},propagate:function(t,i){o.each(this.collections,function(e){e.trigger(t,i)})}}))}(jQuery,window.wp,_);
+!function(i,e,o){var t;e&&e.customize&&((t=e.customize).HeaderTool.CurrentView=e.Backbone.View.extend({template:e.template("header-current"),initialize:function(){this.listenTo(this.model,"change",this.render),this.render()},render:function(){return this.$el.html(this.template(this.model.toJSON())),this.setButtons(),this},setButtons:function(){var e=i("#customize-control-header_image .actions .remove"),t=i("#customize-control-header_image .actions .new");this.model.get("choice")?(e.show(),t.removeClass("upload-button")):(e.hide(),t.addClass("upload-button"))}}),t.HeaderTool.ChoiceView=e.Backbone.View.extend({template:e.template("header-choice"),className:"header-view",events:{"click .choice,.random":"select","click .close":"removeImage"},initialize:function(){var e=[this.model.get("header").url,this.model.get("choice")];this.listenTo(this.model,"change:selected",this.toggleSelected),o.contains(e,t.get().header_image)&&t.HeaderTool.currentHeader.set(this.extendedModel())},render:function(){return this.$el.html(this.template(this.extendedModel())),this.toggleSelected(),this},toggleSelected:function(){this.$el.toggleClass("selected",this.model.get("selected"))},extendedModel:function(){var e=this.model.get("collection");return o.extend(this.model.toJSON(),{type:e.type})},select:function(){this.preventJump(),this.model.save(),t.HeaderTool.currentHeader.set(this.extendedModel())},preventJump:function(){var e=i(".wp-full-overlay-sidebar-content"),t=e.scrollTop();o.defer(function(){e.scrollTop(t)})},removeImage:function(e){e.stopPropagation(),this.model.destroy(),this.remove()}}),t.HeaderTool.ChoiceListView=e.Backbone.View.extend({initialize:function(){this.listenTo(this.collection,"add",this.addOne),this.listenTo(this.collection,"remove",this.render),this.listenTo(this.collection,"sort",this.render),this.listenTo(this.collection,"change",this.toggleList),this.render()},render:function(){this.$el.empty(),this.collection.each(this.addOne,this),this.toggleList()},addOne:function(e){e.set({collection:this.collection}),e=new t.HeaderTool.ChoiceView({model:e}),this.$el.append(e.render().el)},toggleList:function(){var e=this.$el.parents().prev(".customize-control-title"),t=this.$el.find(".random").parent();this.collection.shouldHideTitle()?e.add(t).hide():e.add(t).show()}}),t.HeaderTool.CombinedList=e.Backbone.View.extend({initialize:function(e){this.collections=e,this.on("all",this.propagate,this)},propagate:function(t,i){o.each(this.collections,function(e){e.trigger(t,i)})}}))}(jQuery,window.wp,_);

wp-includes/version.php

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