[Site Editor]: Move featured image at the top of the inspector contro…

…ls (#59783) Co-authored-by: ntsekouras <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: oandregal <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Mar 14, 2024 · db1cd31 · db1cd31
1 parent 44cccd6
commit db1cd31
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 55 deletions.
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
@@ -14,6 +14,7 @@ import {
 	PostSyncStatus,
 	PostURLPanel,
 	PostTemplatePanel,
+	PostFeaturedImagePanel,
 	store as editorStore,
 } from '@wordpress/editor';
 
@@ -60,6 +61,7 @@ export default function PostStatus() {
 			<PluginPostStatusInfo.Slot>
 				{ ( fills ) => (
 					<>
+						<PostFeaturedImagePanel withPanelBody={ false } />
 						<PostVisibility />
 						<PostSchedulePanel />
 						<PostTemplatePanel />

diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -22,7 +22,6 @@ import {
 	PageAttributesPanel,
 	PostDiscussionPanel,
 	PostExcerptPanel,
-	PostFeaturedImagePanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 } from '@wordpress/editor';
@@ -117,7 +116,6 @@ const SidebarContent = ( {
 							<PluginDocumentSettingPanel.Slot />
 							<PostLastRevisionPanel />
 							<PostTaxonomiesPanel />
-							<PostFeaturedImagePanel />
 							<PostExcerptPanel />
 							<PostDiscussionPanel />
 							<PageAttributesPanel />

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
@@ -16,7 +16,6 @@ import {
 	PageAttributesPanel,
 	PostDiscussionPanel,
 	PostExcerptPanel,
-	PostFeaturedImagePanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	store as editorStore,
@@ -104,7 +103,6 @@ export default function PagePanels() {
 			) }
 			<PostLastRevisionPanel />
 			<PostTaxonomiesPanel />
-			<PostFeaturedImagePanel />
 			<PostExcerptPanel />
 			<PostDiscussionPanel />
 			<PageAttributesPanel />

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
@@ -7,6 +7,7 @@ import {
 	PostURLPanel,
 	PostSchedulePanel,
 	PostTemplatePanel,
+	PostFeaturedImagePanel,
 } from '@wordpress/editor';
 
 /**
@@ -23,6 +24,7 @@ export default function PageSummary( {
 } ) {
 	return (
 		<VStack spacing={ 0 }>
+			<PostFeaturedImagePanel withPanelBody={ false } />
 			<PageStatus
 				status={ status }
 				date={ date }

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/sidebar-card/index.js b/packages/edit-site/src/components/sidebar-edit-mode/sidebar-card/index.js
@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import {
+	Icon,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 
 export default function SidebarCard( {
 	className,
@@ -18,17 +22,19 @@ export default function SidebarCard( {
 } ) {
 	return (
 		<div className={ classnames( 'edit-site-sidebar-card', className ) }>
-			<Icon className="edit-site-sidebar-card__icon" icon={ icon } />
-			<div className="edit-site-sidebar-card__content">
-				<div className="edit-site-sidebar-card__header">
-					<h2 className="edit-site-sidebar-card__title">{ title }</h2>
-					{ actions }
-				</div>
-				<div className="edit-site-sidebar-card__description">
-					{ description }
-				</div>
+			<HStack spacing={ 3 } className="edit-site-sidebar-card__header">
+				<Icon className="edit-site-sidebar-card__icon" icon={ icon } />
+				<h2 className="edit-site-sidebar-card__title">{ title }</h2>
+				{ actions }
+			</HStack>
+			<VStack className="edit-site-sidebar-card__content">
+				{ description && (
+					<div className="edit-site-sidebar-card__description">
+						{ description }
+					</div>
+				) }
 				{ children }
-			</div>
+			</VStack>
 		</div>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/sidebar-card/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/sidebar-card/style.scss
@@ -1,15 +1,12 @@
 .edit-site-sidebar-card {
-	display: flex;
-	align-items: flex-start;
-
 	&__content {
 		flex-grow: 1;
-		margin-bottom: $grid-unit-05;
 	}
 
 	&__title {
 		font-weight: 500;
 		line-height: $icon-size;
+		flex-grow: 1;
 		&.edit-site-sidebar-card__title {
 			font-size: $default-font-size;
 			line-height: $default-line-height;
@@ -24,7 +21,6 @@
 
 	&__icon {
 		flex: 0 0 $icon-size;
-		margin-right: $grid-unit-15;
 		width: $icon-size;
 		height: $icon-size;
 	}

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
@@ -7,7 +7,6 @@ import {
 	PageAttributesPanel,
 	PostDiscussionPanel,
 	PostExcerptPanel,
-	PostFeaturedImagePanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	store as editorStore,
@@ -142,7 +141,6 @@ export default function TemplatePanel() {
 			) }
 			<PostLastRevisionPanel />
 			<PostTaxonomiesPanel />
-			<PostFeaturedImagePanel />
 			<PostExcerptPanel />
 			<PostDiscussionPanel />
 			<PageAttributesPanel />

diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
@@ -7,7 +7,6 @@ import {
 	DropZone,
 	Button,
 	Spinner,
-	ResponsiveWrapper,
 	withNotices,
 	withFilters,
 	__experimentalHStack as HStack,
@@ -99,10 +98,7 @@ function PostFeaturedImage( {
 	const toggleRef = useRef();
 	const [ isLoading, setIsLoading ] = useState( false );
 	const { getSettings } = useSelect( blockEditorStore );
-	const { mediaWidth, mediaHeight, mediaSourceUrl } = getMediaDetails(
-		media,
-		currentPostId
-	);
+	const { mediaSourceUrl } = getMediaDetails( media, currentPostId );
 
 	function onDropFiles( filesList ) {
 		getSettings().mediaUpload( {
@@ -183,16 +179,11 @@ function PostFeaturedImage( {
 									}
 								>
 									{ !! featuredImageId && media && (
-										<ResponsiveWrapper
-											naturalWidth={ mediaWidth }
-											naturalHeight={ mediaHeight }
-											isInline
-										>
-											<img
-												src={ mediaSourceUrl }
-												alt=""
-											/>
-										</ResponsiveWrapper>
+										<img
+											className="editor-post-featured-image__preview-image"
+											src={ mediaSourceUrl }
+											alt=""
+										/>
 									) }
 									{ isLoading && <Spinner /> }
 									{ ! featuredImageId &&

diff --git a/packages/editor/src/components/post-featured-image/panel.js b/packages/editor/src/components/post-featured-image/panel.js
@@ -15,7 +15,7 @@ import PostFeaturedImageCheck from './check';
 
 const PANEL_NAME = 'featured-image';
 
-function FeaturedImage() {
+export default function PostFeaturedImagePanel( { withPanelBody = true } ) {
 	const { postType, isEnabled, isOpened } = useSelect( ( select ) => {
 		const {
 			getEditedPostAttribute,
@@ -37,6 +37,14 @@ function FeaturedImage() {
 		return null;
 	}
 
+	if ( ! withPanelBody ) {
+		return (
+			<PostFeaturedImageCheck>
+				<PostFeaturedImage />
+			</PostFeaturedImageCheck>
+		);
+	}
+
 	return (
 		<PostFeaturedImageCheck>
 			<PanelBody
@@ -51,5 +59,3 @@ function FeaturedImage() {
 		</PostFeaturedImageCheck>
 	);
 }
-
-export default FeaturedImage;
diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss
@@ -1,25 +1,18 @@
 .editor-post-featured-image {
 	padding: 0;
 
-
 	.components-spinner {
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		margin-top: -9px;
 		margin-left: -9px;
 	}
-
-	// This keeps images at their intrinsic size (eg. a 50px
-	// image will never be wider than 50px).
-	.components-responsive-wrapper__content {
-		max-width: 100%;
-		width: auto;
-	}
 }
 
 .editor-post-featured-image__container {
 	position: relative;
+	aspect-ratio: 2/1;
 
 	&:hover,
 	&:focus,
@@ -38,26 +31,28 @@
 	@include reduce-motion("transition");
 	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
 	overflow: hidden; // Ensure the focus style properly encapsulates the image.
+	outline: $border-width solid rgba(0, 0, 0, 0.1);
+	outline-offset: -#{$border-width};
 
-	// Apply a max-height.
 	display: flex;
 	justify-content: center;
-	max-height: 150px;
 }
 
 .editor-post-featured-image__preview {
 	height: auto;
 
-	.components-responsive-wrapper {
+	.editor-post-featured-image__preview-image {
+		object-fit: cover;
 		width: 100%;
-		background: $gray-100;
+		object-position: 50% 50%;
+		aspect-ratio: 2/1;
 	}
 }
 
 .editor-post-featured-image__toggle {
 	border-radius: $radius-block-ui;
 	background-color: $gray-100;
-	min-height: 90px;
+	height: 100%;
 	line-height: 20px;
 	padding: $grid-unit-10 0;
 	text-align: center;

diff --git a/test/e2e/specs/editor/various/post-visibility.spec.js b/test/e2e/specs/editor/various/post-visibility.spec.js
@@ -89,7 +89,12 @@ test.describe( 'Post visibility', () => {
 
 		await page.click( 'role=button[name="View next month"i]' );
 		await page.click( 'role=application[name="Calendar"] >> text=15' );
-
+		await page
+			.locator( '.block-editor-publish-date-time-picker' )
+			.getByRole( 'button', {
+				name: 'Close',
+			} )
+			.click();
 		await page.click( 'role=button[name="Select visibility: Public"i]' );
 
 		await page.click( 'role=radio[name="Private"i]' );

diff --git a/test/e2e/specs/editor/various/sidebar.spec.js b/test/e2e/specs/editor/various/sidebar.spec.js
@@ -114,7 +114,6 @@ test.describe( 'Sidebar', () => {
 			'Summary',
 			'Categories',
 			'Tags',
-			'Featured image',
 			'Excerpt',
 			'Discussion',
 		] );