improve design

packages/edit-site/src/components/post-fields/index.js

@@ -27,10 +27,11 @@ import {
 } from '@wordpress/icons';
 import {
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
+	__experimentalText as Text,
+	__experimentalGrid as Grid,
 	Icon,
-	Placeholder,
 	Button,
+	Flex,
 	FlexItem,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -424,14 +425,14 @@ function usePostFields( viewType ) {
 
 					if ( ! url ) {
 						return (
-							<div
-								style={ {
-									backgroundColor:
-										'rgba(var(--wp-admin-theme-color--rgb), 0.08)',
-									width: '20px',
-									height: '20px',
-								} }
-							/>
+							<Flex gap={ 8 }>
+								<FlexItem>
+									<span className="edit-site-post-featured-image-placeholder" />
+								</FlexItem>
+								<FlexItem>
+									<span>{ __( 'Choose an image…' ) }</span>
+								</FlexItem>
+							</Flex>
 						);
 					}
 
@@ -469,77 +470,96 @@ function usePostFields( viewType ) {
 					return (
 						<fieldset className="edit-site-dataviews-controls__featured-image">
 							<div className="edit-side-dataviews-controls__featured-image-container">
-								<HStack>
-									<MediaUpload
-										onSelect={ ( selectedMedia ) =>
-											onChangeControl( selectedMedia.id )
-										}
-										allowedTypes={ [ 'image' ] }
-										render={ ( { open } ) => {
-											return (
-												<Button
-													className="edit-site-dataviews-controls__featured-image-upload-button"
-													onClick={ () => open() }
+								<MediaUpload
+									onSelect={ ( selectedMedia ) =>
+										onChangeControl( selectedMedia.id )
+									}
+									allowedTypes={ [ 'image' ] }
+									render={ ( { open } ) => {
+										return (
+											<div
+												role="button"
+												tabIndex={ 0 }
+												onClick={ ( event ) => {
+													const element =
+														event.target.tagName.toLowerCase();
+													// Prevent opening the media modal when clicking on the button/icon.
+													if (
+														element !== 'button' &&
+														element !== 'svg'
+													) {
+														open();
+													}
+												} }
+												onKeyDown={ open }
+											>
+												<Grid
+													rowGap={ 0 }
+													columnGap={ 8 }
+													templateColumns="24px 1fr 0.5fr"
+													rows={ url ? 2 : 0 }
 												>
 													{ url && (
-														<HStack justify="space-between">
-															<FlexItem className="edit-site-dataviews-controls__featured-image-element">
-																<img
-																	alt=""
-																	src={ url }
-																/>
-															</FlexItem>
-															<FlexItem>
-																<VStack>
-																	<span>
-																		{
-																			title
-																		}
-																	</span>
-																	<span className="edit-site-dataviews-controls__featured-image-filename">
-																		{
-																			filename
-																		}
-																	</span>
-																</VStack>
-															</FlexItem>
-														</HStack>
+														<>
+															<img
+																alt=""
+																src={ url }
+																className="edit-site-dataviews-controls__featured-image-element"
+															/>
+															<Text
+																as="span"
+																truncate
+																numberOfLines={
+																	0
+																}
+															>
+																{ title }
+															</Text>
+														</>
 													) }
 													{ ! url && (
-														<HStack
-															justify="flex-start"
-															className="dataviews-controls__featured-image-placeholder-container"
-														>
-															<FlexItem>
-																<Placeholder
-																	className="dataviews-controls__featured-image-placeholder"
-																	withIllustration
-																/>
-															</FlexItem>
-															<FlexItem>
-																<span>
-																	{ __(
-																		'Choose an image…'
-																	) }
-																</span>
-															</FlexItem>
-														</HStack>
+														<>
+															<span className="edit-site-post-featured-image-placeholder" />
+															<span>
+																{ __(
+																	'Choose an image…'
+																) }
+															</span>
+														</>
+													) }
+													{ url && (
+														<>
+															<Button
+																size="small"
+																className="edit-site-dataviews-controls__featured-image-remove-button"
+																icon={
+																	lineSolid
+																}
+																onClick={ () =>
+																	onChangeControl(
+																		0
+																	)
+																}
+															/>
+															<Text
+																className="edit-site-dataviews-controls__featured-image-filename"
+																as="span"
+																ellipsizeMode="middle"
+																limit={ 35 }
+																truncate
+																numberOfLines={
+																	0
+																}
+															>
+																{ filename }
+															</Text>
+														</>
 													) }
-												</Button>
-											);
-										} }
-									/>
-
-									{ url && (
-										<Button
-											className="edit-site-dataviews-controls__featured-image-remove-button"
-											icon={ lineSolid }
-											onClick={ () =>
-												onChangeControl( 0 )
-											}
-										/>
-									) }
-								</HStack>
+												</Grid>
+											</div>
+										);
+									} }
+								/>
 							</div>
 						</fieldset>
 					);

packages/edit-site/src/components/post-fields/style.scss

@@ -1,36 +1,51 @@
 .edit-site-post-featured-image {
-	width: 20px;
-	height: 20px;
+	width: 24px;
+	height: 24px;
+	border: $radius-small;
+}
+
+.edit-site-post-featured-image-placeholder {
+	width: 24px;
+	height: 24px;
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+	display: inline-block;
+	padding: 0;
+	background:
+		$white
+		linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 }
 
 .edit-site-dataviews-controls__featured-image {
 	.edit-side-dataviews-controls__featured-image-container {
-		border: var(--wp-admin-border-width-focus) solid $gray-300;
+		border: $border-width solid $gray-300;
+		padding: 8px 12px;
+		cursor: pointer;
 		&:hover {
-			background-color: $gray-300;
+			background-color: $gray-100;
 		}
 	}
 
 	img {
-		width: 20px;
-		height: 20px;
+		width: 24px;
+		height: 24px;
+		border: $radius-small;
 	}
 
 	span {
+		align-self: center;
 		text-align: start;
-		margin-left: $grid-unit-15;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		width: 200px;
 		white-space: nowrap;
 	}
 
 	.edit-site-dataviews-controls__featured-image-filename {
 		color: $gray-700;
-		font-size: 10px;
+		grid-area: 2 / 2 / 2 / 4;
+		line-height: 16px;
+		font-size: 12px;
 	}
 
 	.edit-site-dataviews-controls__featured-image-upload-button {
+		padding: 0;
 		height: fit-content;
 		&:hover,
 		&:focus {
@@ -44,6 +59,7 @@
 	}
 
 	.edit-site-dataviews-controls__featured-image-remove-button {
+		place-self: end;
 		align-self: baseline;
 	}
 }