Extract a PostPanelRow component from the different sidebar panels (#…

…56238)
WordPress · Nov 20, 2023 · 447a6de · 447a6de
1 parent 8863b49
commit 447a6de
Show file tree

Hide file tree

Showing 20 changed files with 133 additions and 146 deletions.
diff --git a/packages/edit-post/src/components/sidebar/post-pending-status/index.js b/packages/edit-post/src/components/sidebar/post-pending-status/index.js
@@ -1,18 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
 import {
 	PostPendingStatus as PostPendingStatusForm,
 	PostPendingStatusCheck,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { PostPanelRow } = unlock( editorPrivateApis );
+
 export function PostPendingStatus() {
 	return (
 		<PostPendingStatusCheck>
-			<PanelRow>
+			<PostPanelRow>
 				<PostPendingStatusForm />
-			</PanelRow>
+			</PostPanelRow>
 		</PostPendingStatusCheck>
 	);
 }

diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
@@ -64,12 +64,12 @@ export default function PostStatus() {
 						<PostSchedulePanel />
 						<PostTemplate />
 						<PostURLPanel />
+						<PostSyncStatus />
 						<PostSticky />
 						<PostPendingStatus />
 						<PostFormat />
 						<PostSlug />
 						<PostAuthor />
-						<PostSyncStatus />
 						{ fills }
 						<HStack
 							style={ {

diff --git a/packages/edit-post/src/components/sidebar/post-sticky/index.js b/packages/edit-post/src/components/sidebar/post-sticky/index.js
@@ -1,18 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
 import {
 	PostSticky as PostStickyForm,
 	PostStickyCheck,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { PostPanelRow } = unlock( editorPrivateApis );
+
 export function PostSticky() {
 	return (
 		<PostStickyCheck>
-			<PanelRow>
+			<PostPanelRow>
 				<PostStickyForm />
-			</PanelRow>
+			</PostPanelRow>
 		</PostStickyCheck>
 	);
 }

diff --git a/packages/edit-post/src/components/sidebar/post-template/index.js b/packages/edit-post/src/components/sidebar/post-template/index.js
@@ -2,17 +2,23 @@
  * WordPress dependencies
  */
 import { useState, useMemo } from '@wordpress/element';
-import { PanelRow, Dropdown, Button } from '@wordpress/components';
+import { Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import PostTemplateForm from './form';
 import { store as editPostStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { PostPanelRow } = unlock( editorPrivateApis );
 
 export default function PostTemplate() {
 	// Use internal state instead of a ref to make sure that the component
@@ -53,11 +59,9 @@ export default function PostTemplate() {
 	}
 
 	return (
-		<PanelRow className="edit-post-post-template" ref={ setPopoverAnchor }>
-			<span>{ __( 'Template' ) }</span>
+		<PostPanelRow label={ __( 'Template' ) } ref={ setPopoverAnchor }>
 			<Dropdown
 				popoverProps={ popoverProps }
-				className="edit-post-post-template__dropdown"
 				contentClassName="edit-post-post-template__dialog"
 				focusOnMount
 				renderToggle={ ( { isOpen, onToggle } ) => (
@@ -70,7 +74,7 @@ export default function PostTemplate() {
 					<PostTemplateForm onClose={ onClose } />
 				) }
 			/>
-		</PanelRow>
+		</PostPanelRow>
 	);
 }
 

diff --git a/packages/edit-post/src/components/sidebar/post-template/style.scss b/packages/edit-post/src/components/sidebar/post-template/style.scss
@@ -1,18 +1,3 @@
-.edit-post-post-template {
-	width: 100%;
-	justify-content: flex-start;
-
-	span {
-		display: block;
-		width: 30%;
-		margin-right: 8px;
-	}
-}
-
-.edit-post-post-template__dropdown {
-	max-width: 55%;
-}
-
 .components-button.edit-post-post-template__toggle {
 	display: inline-block;
 	width: 100%;

diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js
@@ -2,15 +2,23 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { PanelRow, Dropdown, Button } from '@wordpress/components';
+import { Dropdown, Button } from '@wordpress/components';
 import {
 	PostVisibility as PostVisibilityForm,
 	PostVisibilityLabel,
 	PostVisibilityCheck,
 	usePostVisibilityLabel,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { useMemo, useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { PostPanelRow } = unlock( editorPrivateApis );
+
 export function PostVisibility() {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -29,11 +37,10 @@ export function PostVisibility() {
 	return (
 		<PostVisibilityCheck
 			render={ ( { canEdit } ) => (
-				<PanelRow
+				<PostPanelRow
+					label={ __( 'Visibility' ) }
 					ref={ setPopoverAnchor }
-					className="edit-post-post-visibility"
 				>
-					<span>{ __( 'Visibility' ) }</span>
 					{ ! canEdit && (
 						<span>
 							<PostVisibilityLabel />
@@ -55,7 +62,7 @@ export function PostVisibility() {
 							) }
 						/>
 					) }
-				</PanelRow>
+				</PostPanelRow>
 			) }
 		/>
 	);

diff --git a/packages/edit-post/src/components/sidebar/post-visibility/style.scss b/packages/edit-post/src/components/sidebar/post-visibility/style.scss
@@ -1,14 +1,3 @@
-.edit-post-post-visibility {
-	width: 100%;
-	justify-content: flex-start;
-
-	span {
-		display: block;
-		width: 30%;
-		margin-right: 8px;
-	}
-}
-
 .edit-post-post-visibility__dialog .editor-post-visibility {
 	// sidebar width - popover padding - form margin
 	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js
@@ -3,17 +3,12 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
-import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
-} from '@wordpress/components';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -24,6 +19,8 @@ import ResetDefaultTemplate from './reset-default-template';
 import { unlock } from '../../../lock-unlock';
 import { PAGE_CONTENT_BLOCK_TYPES } from '../../../utils/constants';
 
+const { PostPanelRow } = unlock( editorPrivateApis );
+
 const POPOVER_PROPS = {
 	className: 'edit-site-page-panels-edit-template__dropdown',
 	placement: 'bottom-start',
@@ -71,10 +68,7 @@ export default function EditTemplate() {
 	}
 
 	return (
-		<HStack className="edit-site-summary-field">
-			<Text className="edit-site-summary-field__label">
-				{ __( 'Template' ) }
-			</Text>
+		<PostPanelRow label={ __( 'Template' ) }>
 			<DropdownMenu
 				popoverProps={ POPOVER_PROPS }
 				focusOnMount
@@ -122,6 +116,6 @@ export default function EditTemplate() {
 					</>
 				) }
 			</DropdownMenu>
-		</HStack>
+		</PostPanelRow>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
@@ -6,7 +6,6 @@ import {
 	ToggleControl,
 	Dropdown,
 	__experimentalText as Text,
-	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	TextControl,
 	RadioControl,
@@ -19,11 +18,15 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import StatusLabel from '../../sidebar-navigation-screen-page/status-label';
+import { unlock } from '../../../lock-unlock';
+
+const { PostPanelRow } = unlock( editorPrivateApis );
 
 const STATUS_OPTIONS = [
 	{
@@ -159,10 +162,7 @@ export default function PageStatus( {
 	};
 
 	return (
-		<HStack className="edit-site-summary-field">
-			<Text className="edit-site-summary-field__label">
-				{ __( 'Status' ) }
-			</Text>
+		<PostPanelRow label={ __( 'Status' ) }>
 			<Dropdown
 				contentClassName="edit-site-change-status__content"
 				popoverProps={ popoverProps }
@@ -244,6 +244,6 @@ export default function PageStatus( {
 					</>
 				) }
 			/>
-		</HStack>
+		</PostPanelRow>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
@@ -59,25 +59,15 @@
 	}
 }
 
-.edit-site-summary-field {
-	.components-dropdown {
-		width: 70%;
-	}
-
-	.edit-site-summary-field__trigger {
-		max-width: 100%;
-
-		// Truncate
-		display: block;
-		text-align: left;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.edit-site-summary-field__label {
-		width: 30%;
-	}
+.edit-site-summary-field__trigger {
+	max-width: 100%;
+
+	// Truncate
+	display: block;
+	text-align: left;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .edit-site-page-panels-edit-template__dropdown {

diff --git a/packages/editor/src/components/post-panel-row/index.js b/packages/editor/src/components/post-panel-row/index.js
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+
+const PostPanelRow = forwardRef( ( { className, label, children }, ref ) => {
+	return (
+		<HStack
+			className={ classnames( 'editor-post-panel__row', className ) }
+			ref={ ref }
+		>
+			{ label ? (
+				<>
+					<div className="editor-post-panel__row-label">
+						{ label }
+					</div>
+					<div className="editor-post-panel__row-control">
+						{ children }
+					</div>
+				</>
+			) : (
+				children
+			) }
+		</HStack>
+	);
+} );
+
+export default PostPanelRow;
diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss
@@ -0,0 +1,15 @@
+.editor-post-panel__row {
+	width: 100%;
+	justify-content: flex-start;
+	align-items: flex-start;
+	min-height: $button-size;
+}
+
+.editor-post-panel__row-label {
+	width: 30%;
+	flex-shrink: 0;
+}
+
+.editor-post-panel__row-control {
+	flex-grow: 1;
+}