Editor: Polish the style of some of the post summary rows. (#61645)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · May 16, 2024 · 15a6f89 · 15a6f89
1 parent 6a51b24
commit 15a6f89
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 166 deletions.
diff --git a/packages/editor/src/components/post-excerpt/panel.js b/packages/editor/src/components/post-excerpt/panel.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -186,49 +181,46 @@ function PrivateExcerpt() {
 		? __( 'Edit description' )
 		: __( 'Edit excerpt' );
 	return (
-		<Dropdown
-			className="editor-post-excerpt__dropdown"
-			contentClassName="editor-post-excerpt__dropdown__content"
-			popoverProps={ popoverProps }
-			focusOnMount
-			ref={ setPopoverAnchor }
-			renderToggle={ ( { onToggle } ) => (
-				<Button
-					className={ clsx(
-						'editor-post-excerpt__dropdown__trigger',
-						{ 'has-excerpt': !! excerpt }
-					) }
-					onClick={ onToggle }
-					label={
-						!! excerptText ? triggerEditLabel : excerptPlaceholder
-					}
-					showTooltip={ !! excerptText }
-				>
-					{ excerptText || excerptPlaceholder }
-				</Button>
-			) }
-			renderContent={ ( { onClose } ) => (
-				<>
-					<InspectorPopoverHeader
-						title={ label }
-						onClose={ onClose }
-					/>
+		<VStack>
+			{ excerptText }
+			<Dropdown
+				className="editor-post-excerpt__dropdown"
+				contentClassName="editor-post-excerpt__dropdown__content"
+				popoverProps={ popoverProps }
+				focusOnMount
+				ref={ setPopoverAnchor }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						className="editor-post-excerpt__dropdown__trigger"
+						onClick={ onToggle }
+						variant="link"
+					>
+						{ excerptText ? triggerEditLabel : excerptPlaceholder }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ label }
+							onClose={ onClose }
+						/>
 
-					<VStack spacing={ 4 }>
-						<PluginPostExcerpt.Slot>
-							{ ( fills ) => (
-								<>
-									<PostExcerptForm
-										hideLabelFromVision
-										updateOnBlur
-									/>
-									{ fills }
-								</>
-							) }
-						</PluginPostExcerpt.Slot>
-					</VStack>
-				</>
-			) }
-		/>
+						<VStack spacing={ 4 }>
+							<PluginPostExcerpt.Slot>
+								{ ( fills ) => (
+									<>
+										<PostExcerptForm
+											hideLabelFromVision
+											updateOnBlur
+										/>
+										{ fills }
+									</>
+								) }
+							</PluginPostExcerpt.Slot>
+						</VStack>
+					</>
+				) }
+			/>
+		</VStack>
 	);
 }
diff --git a/packages/editor/src/components/post-excerpt/style.scss b/packages/editor/src/components/post-excerpt/style.scss
@@ -3,23 +3,6 @@
 	margin-bottom: 10px;
 }
 
-.editor-post-excerpt__dropdown__trigger {
-	height: auto;
-	padding: 0;
-
-	&:not(.has-excerpt) {
-		color: $gray-700;
-	}
-
-	&:hover {
-		color: $gray-900;
-	}
-}
-
-.editor-post-excerpt__dropdown {
-	display: block;
-}
-
 .editor-post-excerpt__dropdown__content {
 	.components-popover__content {
 		min-width: 320px;

diff --git a/packages/editor/src/components/post-schedule/panel.js b/packages/editor/src/components/post-schedule/panel.js
@@ -41,7 +41,9 @@ export default function PostSchedulePanel() {
 			// move around when the label changes.
 			anchor: popoverAnchor,
 			'aria-label': __( 'Change publish date' ),
-			placement: 'bottom-end',
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
 		} ),
 		[ popoverAnchor ]
 	);

diff --git a/packages/editor/src/components/post-status/index.js b/packages/editor/src/components/post-status/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -15,13 +10,12 @@ import {
 	TextControl,
 	RadioControl,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
-import { Icon, chevronDownSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -35,42 +29,14 @@ import {
 import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
 
-function PostStatusLabel( { canEdit } ) {
-	const status = useSelect(
-		( select ) => select( editorStore ).getEditedPostAttribute( 'status' ),
-		[]
-	);
-	let statusLabel;
-	switch ( status ) {
-		case 'publish':
-			statusLabel = __( 'Published' );
-			break;
-		case 'future':
-			statusLabel = __( 'Scheduled' );
-			break;
-		case 'draft':
-		case 'auto-draft':
-			statusLabel = __( 'Draft' );
-			break;
-		case 'pending':
-			statusLabel = __( 'Pending' );
-			break;
-		case 'private':
-			statusLabel = __( 'Private' );
-			break;
-	}
-	return (
-		<Text
-			className={ clsx( 'editor-post-status-label', {
-				[ ` has-status-${ status }` ]: !! status,
-				'has-icon': canEdit,
-			} ) }
-		>
-			{ statusLabel }
-			{ canEdit && <Icon icon={ chevronDownSmall } /> }
-		</Text>
-	);
-}
+const labels = {
+	'auto-draft': __( 'Draft' ),
+	draft: __( 'Draft' ),
+	pending: __( 'Pending' ),
+	private: __( 'Private' ),
+	future: __( 'Scheduled' ),
+	publish: __( 'Published' ),
+};
 
 const STATUS_OPTIONS = [
 	{
@@ -234,10 +200,16 @@ export default function PostStatus() {
 					focusOnMount
 					renderToggle={ ( { onToggle } ) => (
 						<Button
-							className="editor-post-status-trigger"
+							variant="tertiary"
+							size="compact"
 							onClick={ onToggle }
+							aria-label={ sprintf(
+								// translators: %s: Current post status.
+								__( 'Change post status: %s' ),
+								labels[ status ]
+							) }
 						>
-							<PostStatusLabel canEdit={ canEdit } />
+							{ labels[ status ] }
 						</Button>
 					) }
 					renderContent={ ( { onClose } ) => (
@@ -309,9 +281,7 @@ export default function PostStatus() {
 					) }
 				/>
 			) : (
-				<div className="editor-post-status">
-					<PostStatusLabel />
-				</div>
+				<div className="editor-post-status">{ labels[ status ] }</div>
 			) }
 		</PostPanelRow>
 	);

diff --git a/packages/editor/src/components/post-status/style.scss b/packages/editor/src/components/post-status/style.scss
@@ -1,40 +1,5 @@
 .editor-post-status {
 	max-width: 100%;
-
-	.editor-post-status-trigger {
-		padding: 1px;
-		height: auto;
-		border-radius: $grid-unit-20;
-	}
-
-	.editor-post-status-label {
-		border-radius: $grid-unit-20;
-		display: inline-flex;
-		padding: 0 $grid-unit-15 0 $grid-unit-15;
-		background: rgba($gray-900, 0.04);
-		height: $button-size-compact;
-		align-items: center;
-		color: $gray-900;
-
-		&.has-icon {
-			padding: 0 $grid-unit-10 0 $grid-unit-15;
-
-			&:hover {
-				background: rgba($gray-900, 0.08);
-			}
-		}
-
-		&.has-status-publish,
-		&.has-status-private,
-		&.has-status-future {
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-			color: var(--wp-admin-theme-color);
-
-			&:hover {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-			}
-		}
-	}
 }
 
 .editor-change-status__password-fieldset {

diff --git a/test/e2e/specs/editor/various/change-detection.spec.js b/test/e2e/specs/editor/various/change-detection.spec.js
@@ -80,8 +80,9 @@ test.describe( 'Change detection', () => {
 
 		// Toggle post as needing review (not persisted for autosave).
 		await editor.openDocumentSettingsSidebar();
-		const postStatusButton = page.locator( '.editor-post-status-trigger' );
-		await postStatusButton.click();
+		await page
+			.getByRole( 'button', { name: 'Change post status:' } )
+			.click();
 		await page.getByRole( 'radio', { name: 'Pending' } ).click();
 		// Force autosave to occur immediately.
 		await Promise.all( [

diff --git a/test/e2e/specs/editor/various/new-post-default-content.spec.js b/test/e2e/specs/editor/various/new-post-default-content.spec.js
@@ -30,8 +30,9 @@ test.describe( 'new editor filtered state', () => {
 		await expect
 			.poll( editor.getEditedPostContent )
 			.toBe( 'My default content' );
+		await page.getByRole( 'button', { name: 'Edit excerpt' } ).click();
 		await expect(
-			page.getByRole( 'button', { name: 'Edit excerpt' } )
-		).toHaveText( 'My default excerpt' );
+			page.getByRole( 'textbox', { name: 'Write an excerpt (optional)' } )
+		).toHaveValue( 'My default excerpt' );
 	} );
 } );
diff --git a/test/e2e/specs/editor/various/post-visibility.spec.js b/test/e2e/specs/editor/various/post-visibility.spec.js
@@ -17,10 +17,9 @@ test.describe( 'Post visibility', () => {
 
 			await editor.openDocumentSettingsSidebar();
 
-			const postStatusButton = page.locator(
-				'.editor-post-status-trigger'
-			);
-			await postStatusButton.click();
+			await page
+				.getByRole( 'button', { name: 'Change post status:' } )
+				.click();
 			await page.getByRole( 'radio', { name: 'Private' } ).click();
 
 			const currentStatus = await page.evaluate( () => {
@@ -58,8 +57,9 @@ test.describe( 'Post visibility', () => {
 				name: 'Close',
 			} )
 			.click();
-		const postStatusButton = page.locator( '.editor-post-status-trigger' );
-		await postStatusButton.click();
+		await page
+			.getByRole( 'button', { name: 'Change post status:' } )
+			.click();
 		await page.getByRole( 'radio', { name: 'Private' } ).click();
 		await page
 			.getByRole( 'region', { name: 'Editor top bar' } )

diff --git a/test/e2e/specs/editor/various/preview.spec.js b/test/e2e/specs/editor/various/preview.spec.js
@@ -183,8 +183,9 @@ test.describe( 'Preview', () => {
 
 		// Return to editor and switch to Draft.
 		await editorPage.bringToFront();
-		const postStatusButton = page.locator( '.editor-post-status-trigger' );
-		await postStatusButton.click();
+		await page
+			.getByRole( 'button', { name: 'Change post status:' } )
+			.click();
 		await page.getByRole( 'radio', { name: 'Draft' } ).click();
 		await page
 			.getByRole( 'region', { name: 'Editor top bar' } )

diff --git a/test/e2e/specs/editor/various/switch-to-draft.spec.js b/test/e2e/specs/editor/various/switch-to-draft.spec.js
@@ -46,11 +46,9 @@ test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page',
 					);
 
 					await editor.openDocumentSettingsSidebar();
-
-					const postStatusButton = page.locator(
-						'.editor-post-status-trigger'
-					);
-					await postStatusButton.click();
+					await page
+						.getByRole( 'button', { name: 'Change post status:' } )
+						.click();
 					await page.getByRole( 'radio', { name: 'Draft' } ).click();
 
 					if ( viewport === 'small' ) {