diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 4d5f22e02fa7d..99b3e6ea18ffd 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -213,6 +213,9 @@ $z-layers: (
// Ensure quick actions toolbar appear above pagination
".dataviews-bulk-actions-toolbar": 2,
+
+ // Needs to be below media library (.media-model) that has a z-index of 160000.
+ ".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown": 160000 - 10,
);
@function z-index( $key ) {
diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js
index 1c8f2d3a4f89a..d4558cf863f13 100644
--- a/packages/edit-site/src/components/post-fields/index.js
+++ b/packages/edit-site/src/components/post-fields/index.js
@@ -12,6 +12,7 @@ import {
createInterpolateElement,
useMemo,
useState,
+ useCallback,
} from '@wordpress/element';
import { dateI18n, getDate, getSettings } from '@wordpress/date';
import {
@@ -22,8 +23,16 @@ import {
pending,
notAllowed,
commentAuthorAvatar as authorIcon,
+ lineSolid,
} from '@wordpress/icons';
-import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
+import {
+ __experimentalHStack as HStack,
+ __experimentalVStack as VStack,
+ Icon,
+ Placeholder,
+ Button,
+ FlexItem,
+} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
@@ -37,8 +46,7 @@ import {
} from '../../utils/constants';
import { default as Link, useLink } from '../routes/link';
import Media from '../media';
-import { isBlobURL } from '@wordpress/blob';
-import { PostFeaturedImage } from '@wordpress/editor';
+import { MediaUpload } from '@wordpress/block-editor';
// See https://github.com/WordPress/gutenberg/issues/55886
// We do not support custom statutes at the moment.
@@ -82,48 +90,6 @@ const getFormattedDate = ( dateToDisplay ) =>
getDate( dateToDisplay )
);
-function FeaturedImage( { item, viewType } ) {
- const isDisabled = item.status === 'trash';
- const { onClick } = useLink( {
- postId: item.id,
- postType: item.type,
- canvas: 'edit',
- } );
-
- const size =
- viewType === LAYOUT_GRID
- ? [ 'large', 'full', 'medium', 'thumbnail' ]
- : [ 'thumbnail', 'medium', 'large', 'full' ];
-
- const renderButton = viewType === LAYOUT_GRID && ! isDisabled;
- return (
-
- { renderButton ? (
-
- ) : (
-
- ) }
-
- );
-}
-
function PostStatusField( { item } ) {
const status = STATUSES.find( ( { value } ) => value === item.status );
const label = status?.label || item.status;
@@ -198,24 +164,6 @@ function usePostFields( viewType ) {
const fields = useMemo(
() => [
- {
- id: 'featured_media',
- label: __( 'Featured Image' ),
- type: 'image',
- getValue: ( { item } ) => {
- const mediaUrl = isBlobURL( item.featured_media )
- ? item.featured_media
- : getFeaturedMediaUrl( item.featured_media )
- ?.source_url;
- return mediaUrl;
- },
- render: ( { item } ) => {
- return (
-
- );
- },
- enableSorting: false,
- },
{
label: __( 'Title' ),
id: 'title',
@@ -412,6 +360,177 @@ function usePostFields( viewType ) {
},
],
},
+ {
+ id: 'featured_media',
+ label: __( 'Featured Image' ),
+ type: 'image',
+ render: ( { item } ) => {
+ const mediaId = item.featured_media;
+
+ const media = getFeaturedMediaUrl( mediaId );
+
+ const url = media?.source_url;
+ const title = media?.title?.rendered;
+
+ // This is a false positive
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const { onClick } = useLink( {
+ postId: item.id,
+ postType: item.type,
+ canvas: 'edit',
+ } );
+
+ if ( viewType === LAYOUT_GRID && item.status !== 'trash' ) {
+ if ( ! url ) {
+ return null;
+ }
+ return (
+
+ );
+ }
+
+ if ( ! url ) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+ { title }
+
+ );
+ },
+ Edit: ( { field, onChange, data } ) => {
+ const { id } = field;
+
+ const value = field.getValue( { item: data } ) ?? '';
+
+ const onChangeControl = useCallback(
+ ( newValue ) =>
+ onChange( {
+ [ id ]: newValue,
+ } ),
+ [ id, onChange ]
+ );
+
+ const media = getFeaturedMediaUrl( value );
+
+ const url = media?.source_url;
+ const title = media?.title?.rendered;
+ const filename =
+ media?.media_details?.file?.match( '([^/]+$)' )[ 0 ];
+
+ return (
+
+ );
+ },
+ enableSorting: false,
+ },
],
[ authors, getFeaturedMediaUrl, viewType, frontPageId, postsPageId ]
);
diff --git a/packages/edit-site/src/components/post-fields/style.scss b/packages/edit-site/src/components/post-fields/style.scss
new file mode 100644
index 0000000000000..41dc13790bffb
--- /dev/null
+++ b/packages/edit-site/src/components/post-fields/style.scss
@@ -0,0 +1,48 @@
+.edit-site-post-featured-image {
+ width: 20px;
+ height: 20px;
+}
+
+.edit-site-dataviews-controls__featured-image {
+ .edit-side-dataviews-controls__featured-image-container {
+ border: var(--wp-admin-border-width-focus) solid $gray-300;
+ &:hover {
+ background-color: $gray-300;
+ }
+ }
+
+ img {
+ width: 20px;
+ height: 20px;
+ }
+
+ span {
+ text-align: justify;
+ margin-left: $grid-unit-15;
+ }
+
+ .edit-site-dataviews-controls__featured-image-filename {
+ color: $gray-700;
+ font-size: 10px;
+ }
+
+ .edit-site-dataviews-controls__featured-image-upload-button {
+ height: fit-content;
+ &:hover {
+ border: 0;
+ color: unset;
+ }
+ }
+
+ .edit-site-dataviews-controls__featured-image-element {
+ align-self: baseline;
+ }
+
+ .edit-site-dataviews-controls__featured-image-remove-button {
+ align-self: baseline;
+ }
+}
+
+.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/style.scss b/packages/edit-site/src/style.scss
index 473deaeedc590..5b57cbeb31980 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -29,6 +29,7 @@
@import "./components/style-book/style.scss";
@import "./components/editor-canvas-container/style.scss";
@import "./components/post-edit/style.scss";
+@import "./components/post-fields/style.scss";
@import "./components/post-list/style.scss";
@import "./components/resizable-frame/style.scss";
@import "./hooks/push-changes-to-global-styles/style.scss";