Move usePostFields to wordpress/editor package (#67024)

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

Author: 3 people

packages/dataviews/src/dataforms-layouts/panel/style.scss

@@ -44,3 +44,7 @@
 .dataforms-layouts-panel__dropdown-header {
 	margin-bottom: $grid-unit-20;
 }
+
+.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
+	z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown");
+}

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

@@ -18,10 +18,9 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  * Internal dependencies
  */
 import Page from '../page';
-import usePostFields from '../post-fields';
 import { unlock } from '../../lock-unlock';
 
-const { PostCardPanel } = unlock( editorPrivateApis );
+const { PostCardPanel, usePostFields } = unlock( editorPrivateApis );
 
 const fieldsWithBulkEditSupport = [
 	'title',

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

@@ -32,9 +32,8 @@ import AddNewPostModal from '../add-new-post';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
 import { usePrevious } from '@wordpress/compose';
-import usePostFields from '../post-fields';
 
-const { usePostActions } = unlock( editorPrivateApis );
+const { usePostActions, usePostFields } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 const { useEntityRecordsWithPermissions } = unlock( coreDataPrivateApis );
 const EMPTY_ARRAY = [];

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

@@ -30,7 +30,6 @@
 @import "./components/editor-canvas-container/style.scss";
 @import "./components/post-edit/style.scss";
 @import "./components/post-list/style.scss";
-@import "./components/post-fields/style.scss";
 @import "./components/resizable-frame/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
 @import "./components/global-styles/font-library-modal/style.scss";

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

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
+import type { Field } from '@wordpress/dataviews';
+import {
+	featuredImageField,
+	slugField,
+	parentField,
+	passwordField,
+	statusField,
+	commentStatusField,
+	titleField,
+	dateField,
+	authorField,
+} from '@wordpress/fields';
+import type { BasePostWithEmbeddedAuthor } from '@wordpress/fields';
+
+interface UsePostFieldsReturn {
+	isLoading: boolean;
+	fields: Field< BasePostWithEmbeddedAuthor >[];
+}
+
+interface Author {
+	id: number;
+	name: string;
+}
+
+function usePostFields(): UsePostFieldsReturn {
+	const { records: authors, isResolving: isLoadingAuthors } =
+		useEntityRecords< Author >( 'root', 'user', { per_page: -1 } );
+
+	const fields = useMemo(
+		() =>
+			[
+				featuredImageField,
+				titleField,
+				{
+					...authorField,
+					elements: authors?.map( ( { id, name } ) => ( {
+						value: id,
+						label: name,
+					} ) ),
+				},
+				statusField,
+				dateField,
+				slugField,
+				parentField,
+				commentStatusField,
+				passwordField,
+			] as Field< BasePostWithEmbeddedAuthor >[],
+		[ authors ]
+	);
+
+	return {
+		isLoading: isLoadingAuthors,
+		fields,
+	};
+}
+
+/**
+ * Hook to get the fields for a post (BasePost or BasePostWithEmbeddedAuthor).
+ */
+export default usePostFields;

packages/edit-site/src/style.scss

@@ -16,6 +16,7 @@ import PluginPostExcerpt from './components/post-excerpt/plugin';
 import PostCardPanel from './components/post-card-panel';
 import PreferencesModal from './components/preferences-modal';
 import { usePostActions } from './components/post-actions/actions';
+import usePostFields from './components/post-fields';
 import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
 import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
 import ResizableEditor from './components/resizable-editor';
@@ -40,6 +41,7 @@ lock( privateApis, {
 	PostCardPanel,
 	PreferencesModal,
 	usePostActions,
+	usePostFields,
 	ToolsMoreMenuGroup,
 	ViewMoreMenuGroup,
 	ResizableEditor,

packages/editor/src/components/post-fields/index.ts

@@ -1,2 +1,3 @@
 export * from './fields';
 export * from './actions';
+export type * from './types';