Editor: Align the Post Format control design with the rest of the pos…

…t sidebar controls (#62066)

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: jameskoster <[email protected]>

packages/editor/src/components/post-author/panel.js

@@ -58,7 +58,6 @@ export function PostAuthor() {
 			<PostPanelRow label={ __( 'Author' ) } ref={ setPopoverAnchor }>
 				<Dropdown
 					popoverProps={ popoverProps }
-					className="editor-post-author__panel-dropdown"
 					contentClassName="editor-post-author__panel-dialog"
 					focusOnMount
 					renderToggle={ ( { isOpen, onToggle } ) => (

packages/editor/src/components/post-format/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button, SelectControl } from '@wordpress/components';
+import { Button, RadioControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
@@ -85,16 +85,17 @@ export default function PostFormat() {
 	return (
 		<PostFormatCheck>
 			<div className="editor-post-format">
-				<SelectControl
-					__nextHasNoMarginBottom
+				<RadioControl
+					className="editor-post-format__options"
 					label={ __( 'Post Format' ) }
-					value={ postFormat }
+					selected={ postFormat }
 					onChange={ ( format ) => onUpdatePostFormat( format ) }
 					id={ postFormatSelectorId }
 					options={ formats.map( ( format ) => ( {
 						label: format.caption,
 						value: format.id,
 					} ) ) }
+					hideLabelFromVision
 				/>
 				{ suggestion && suggestion.id !== postFormat && (
 					<p className="editor-post-format__suggestion">

packages/editor/src/components/post-format/panel.js

@@ -1,20 +1,85 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
+import { Button, Dropdown } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import PostFormatForm from './';
+import { default as PostFormatForm, POST_FORMATS } from './';
 import PostFormatCheck from './check';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
 
-export function PostFormat() {
+/**
+ * Renders the Post Author Panel component.
+ *
+ * @return {Component} The component to be rendered.
+ */
+function PostFormat() {
+	const { postFormat } = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const _postFormat = getEditedPostAttribute( 'format' );
+		return {
+			postFormat: _postFormat ?? 'standard',
+		};
+	}, [] );
+	const activeFormat = POST_FORMATS.find(
+		( format ) => format.id === postFormat
+	);
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
 	return (
 		<PostFormatCheck>
-			<PanelRow className="editor-post-format__panel">
-				<PostFormatForm />
-			</PanelRow>
+			<PostPanelRow label={ __( 'Format' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					contentClassName="editor-post-format__dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							size="compact"
+							variant="tertiary"
+							aria-expanded={ isOpen }
+							aria-label={ sprintf(
+								// translators: %s: Current post format.
+								__( 'Change format: %s' ),
+								activeFormat?.caption
+							) }
+							onClick={ onToggle }
+						>
+							{ activeFormat?.caption }
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<div className="editor-post-format__dialog-content">
+							<InspectorPopoverHeader
+								title={ __( 'Format' ) }
+								onClose={ onClose }
+							/>
+							<PostFormatForm />
+						</div>
+					) }
+				/>
+			</PostPanelRow>
 		</PostFormatCheck>
 	);
 }

packages/editor/src/components/post-format/style.scss

@@ -2,8 +2,14 @@
 	margin: $grid-unit-05 0 0 0;
 }
 
-.editor-post-format__panel {
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
+.editor-post-format__dialog .editor-post-format__dialog-content {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}
+
+.editor-post-format__options {
+	.components-base-control__field > .components-v-stack {
+		gap: $grid-unit-15;
+	}
 }

packages/editor/src/components/sidebar/post-summary.js

@@ -79,9 +79,9 @@ export default function PostSummary( { onActionPerformed } ) {
 										<BlogTitle />
 										<PostsPerPage />
 										<SiteDiscussion />
+										<PostFormatPanel />
 										<PostStickyPanel />
 									</VStack>
-									<PostFormatPanel />
 									<TemplateAreas />
 									{ fills }
 								</VStack>

test/e2e/specs/editor/various/new-post.spec.js

@@ -40,7 +40,7 @@ test.describe( 'new editor state', () => {
 		// Should display the Post Formats UI.
 		await editor.openDocumentSettingsSidebar();
 		await expect(
-			page.locator( 'role=combobox[name="Post Format"i]' )
+			page.locator( 'role=button[name="Change Format: Standard"i]' )
 		).toBeVisible();
 	} );