Try to improve featured image style and accessibility

This is an attempt to fix #1116. It redesigns the Featured Image panel to more closely resemble both the visual style and the markup/accessibility of the Image widget. One problem this PR has right now, is that I'm not quite sure how to update/tweak the labels, that appear to be using a `postLabel` function. As such when building this the labels were wrong. Any idea what this might be, @youknowriad
WordPress · Dec 15, 2017 · 2efe7bb · 2efe7bb
1 parent 0f35fc6
commit 2efe7bb
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 25 deletions.
diff --git a/editor/components/post-featured-image/index.js b/editor/components/post-featured-image/index.js
@@ -20,8 +20,10 @@ import { getCurrentPostType, getEditedPostAttribute } from '../../selectors';
 import { editPost } from '../../actions';
 
 //used when labels from post tyoe were not yet loaded or when they are not present.
-const DEFAULT_SET_FEATURE_IMAGE_LABEL = __( 'Set featured image' );
-const DEFAULT_REMOVE_FEATURE_IMAGE_LABEL = __( 'Remove featured image' );
+const DEFAULT_SET_FEATURE_IMAGE_LABEL = __( 'No image selected' );
+const DEFAULT_ADD_FEATURE_IMAGE_LABEL = __( 'Add Image' );
+const DEFAULT_REMOVE_FEATURE_IMAGE_LABEL = __( 'Remove Image' );
+const DEFAULT_REPLACE_FEATURE_IMAGE_LABEL = __( 'Replace Image' );
 
 function PostFeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, media, postType } ) {
 	const postLabel = get( postType, 'data.labels', {} );
@@ -30,7 +32,7 @@ function PostFeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, med
 			{ !! featuredImageId &&
 				<MediaUploadButton
 					title={ postLabel.set_featured_image }
-					buttonProps={ { className: 'button-link editor-post-featured-image__preview' } }
+					buttonProps={ { className: 'editor-post-featured-image__preview' } }
 					onSelect={ onUpdateImage }
 					type="image"
 				>
@@ -46,22 +48,37 @@ function PostFeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, med
 				</MediaUploadButton>
 			}
 			{ !! featuredImageId && media && ! media.isLoading &&
-				<p className="editor-post-featured-image__howto">
-					{ __( 'Click the image to edit or update' ) }
-				</p>
-			}
-			{ ! featuredImageId &&
 				<MediaUploadButton
-					title={ postLabel.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL }
-					buttonProps={ { className: 'editor-post-featured-image__toggle button-link' } }
+					title={ postLabel.set_featured_image }
+					buttonProps={ { className: 'button' } }
 					onSelect={ onUpdateImage }
 					type="image"
 				>
-					{ postLabel.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL }
+					{ postLabel.set_featured_image || DEFAULT_REPLACE_FEATURE_IMAGE_LABEL }
 				</MediaUploadButton>
 			}
+			{ ! featuredImageId &&
+				<div>
+					<MediaUploadButton
+						title={ postLabel.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL }
+						buttonProps={ { className: 'editor-post-featured-image__toggle' } }
+						onSelect={ onUpdateImage }
+						type="image"
+					>
+						{ postLabel.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL }
+					</MediaUploadButton>
+					<MediaUploadButton
+						title={ postLabel.set_featured_image || DEFAULT_ADD_FEATURE_IMAGE_LABEL }
+						buttonProps={ { className: 'button' } }
+						onSelect={ onUpdateImage }
+						type="image"
+					>
+						{ postLabel.set_featured_image || DEFAULT_ADD_FEATURE_IMAGE_LABEL }
+					</MediaUploadButton>
+				</div>
+			}
 			{ !! featuredImageId &&
-				<Button className="editor-post-featured-image__toggle button-link" onClick={ onRemoveImage }>
+				<Button className="button" onClick={ onRemoveImage }>
 					{ postLabel.remove_featured_image || DEFAULT_REMOVE_FEATURE_IMAGE_LABEL }
 				</Button>
 			}

diff --git a/editor/components/post-featured-image/style.scss b/editor/components/post-featured-image/style.scss
@@ -1,28 +1,29 @@
 .editor-post-featured-image {
-	padding: 10px 0 0;
+	padding: 0;
 
 	.spinner {
 		margin: 0;
 	}
-}
-
-.editor-post-featured-image__toggle {
-	text-decoration: underline;
-	color: $blue-wordpress;
-
-	&:focus {
-		box-shadow: none;
-		outline: none;
-	}
 
-	&:hover {
-		color: $blue-medium-500;
+	.button {
+		margin: 0 8px 8px 0;
 	}
 }
 
+.editor-post-featured-image__toggle,
 .editor-post-featured-image__preview {
 	display: block;
 	width: 100%;
+	margin-bottom: 1em;
+	padding: 0;
+}
+
+.editor-post-featured-image__toggle {
+	border: 1px dashed $light-gray-900;
+	background-color: $light-gray-300;
+	line-height: 20px;
+	padding: $item-spacing 0;
+	text-align: center;
 }
 
 .editor-post-featured-image__howto {