diff --git a/packages/dataviews/src/dataforms-layouts/panel/style.scss b/packages/dataviews/src/dataforms-layouts/panel/style.scss index ae69c4ff45243..c7058f6366b3b 100644 --- a/packages/dataviews/src/dataforms-layouts/panel/style.scss +++ b/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"); +} diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js index fbff29ed67afa..a535eef4ce787 100644 --- a/packages/edit-site/src/components/post-edit/index.js +++ b/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', diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js deleted file mode 100644 index 6ba9453709f0d..0000000000000 --- a/packages/edit-site/src/components/post-fields/index.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * WordPress dependencies - */ -import { - featuredImageField, - slugField, - parentField, - passwordField, - statusField, - commentStatusField, - titleField, - dateField, - authorField, -} from '@wordpress/fields'; -import { useMemo } from '@wordpress/element'; -import { useEntityRecords } from '@wordpress/core-data'; - -function usePostFields() { - const { records: authors, isResolving: isLoadingAuthors } = - useEntityRecords( '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, - ], - [ authors ] - ); - - return { - isLoading: isLoadingAuthors, - fields, - }; -} - -export default usePostFields; diff --git a/packages/edit-site/src/components/post-fields/style.scss b/packages/edit-site/src/components/post-fields/style.scss deleted file mode 100644 index adeaf9a267825..0000000000000 --- a/packages/edit-site/src/components/post-fields/style.scss +++ /dev/null @@ -1,3 +0,0 @@ -.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown { - z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown"); -} diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js index 4639cb3c950b7..975809b2ad610 100644 --- a/packages/edit-site/src/components/post-list/index.js +++ b/packages/edit-site/src/components/post-list/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 = []; diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 0e5744fe362e3..63ad8244a7c95 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/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"; diff --git a/packages/editor/src/components/post-fields/index.ts b/packages/editor/src/components/post-fields/index.ts new file mode 100644 index 0000000000000..3d675ab763d64 --- /dev/null +++ b/packages/editor/src/components/post-fields/index.ts @@ -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; diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index f9a6d4d17904e..b49b2a69a3bf2 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -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, diff --git a/packages/fields/src/index.ts b/packages/fields/src/index.ts index 4c721b85b61a4..41879a86e76be 100644 --- a/packages/fields/src/index.ts +++ b/packages/fields/src/index.ts @@ -1,2 +1,3 @@ export * from './fields'; export * from './actions'; +export type * from './types';